WebForm使用AngularJS实现下拉框多级联动
- 数据准备
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
SubCategories = {
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
},
{
CateId = ,
CateName = Depth = ,
ParentId = ,
}
})
}
})
}
})
}
});
}
{
GetCategories(categoryList, categories);
}
{
{
allCategories.Add( {
CateId = subcategory.CateId,
CateName = subcategory.CateName,
Depth = subcategory.Depth,
ParentId = subcategory.ParentId
});
{
GetCategories(allCategories, subcategory.SubCategories);
}
}
}
}
{
}
} - 服务准备
{
{
ContractResolver = });
context.Response.ContentType = context.Response.Write(result);
}
{
{
}
}
} - 界面控件处理，并引入AngularJS
);
);
] = $scope.tempCate.filter(function(value, index, array) {
;
] = ] = ] = ] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
] = ] = $scope.tempCate.filter(function(value, index, array) {
&& value.parentId == newVal.cateId;
];
; i > ; i--) {
];
< <option value= </ < <option value= </ <asp:HiddenField runat= </div>
<asp:Button ID= </form>
</body>
</html> - 后台代码
{
LoadCategoryId = ;
}
}
{
Button1.Text = hfCategory.Value;
}
} - 说明
- 需要引入angular.js和ui-bootstrap.js
- AngularJS的$scope.$watch很有用
- 借助隐藏域实现前台台数据传递
- 源码地址
WebForm使用AngularJS实现下拉框多级联动的更多相关文章
- 下拉框多级联动辅助js，优化您的下拉框
function IniteSelect(options) { $("body").IniteSelect(options) } (function ($) { $.fn.Init ...
- angularJs实现下拉框多选
话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是 注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min. ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
- ASP.NET——实现两个下拉框动态联动
引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...
- 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
<html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...
- django：下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
- angularjs 实现下拉框编辑数据回显
https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...
- angularJS select下拉框检测改变
html:(已引入amazeUI) <div style="width:70px;display:inline-block;"> <form class=&quo ...
随机推荐
- C#自定义大小与改变大下的方法
在用VS的窗体设计器时,我们可以发现控件都是可以拖动的,并且还可以调整大小.怎么在自己的程序中可以使用上述功能呢? 下面的方法值得借鉴! using System; using System.Wind ...
- RabbitMQ 将监听的IP从localhost修改为指定IP
# vim /etc/rabbitmq/rabbitmq.config 搜索 tcp_listeners 更改为:{tcp_listeners, [{"指定的IP", 5672}] ...
- sublimetext3备份
http://files.cnblogs.com/files/hwd13/Data.zip http://files.cnblogs.com/files/hwd13/sublime3.zip
- C#知识点总结系列：C# 数据结构
线性表(Linear List) 线性表是一个线性结构,它是一个含有n≥0个结点的有限序列,对于其中的结点,有且仅有一个开始结点没有前驱但有一个后继结点,有且仅有一个终端结点没有后继但有一个前驱结点, ...
- 剑指offer六：反转链表
输入一个链表,反转链表后,输出链表的所有元素 public class ListNode { int val; ListNode next = null; ListNode(int val) { th ...
- codeforces 744C Hongcow Buys a Deck of Cards
C. Hongcow Buys a Deck of Cards time limit per test 2 seconds memory limit per test 256 megabytes in ...
- Python 启动本地服务
在 Linux 服务器上或安装了 Python 的机器上,Python自带了一个WEB服务器 SimpleHTTPServer,我们可以很简单的使用 python -m SimpleHTTPServ ...
- Lambda表达式入门
Lambda表达式是Java 8的重要更新,也是一个被广大开发者期待已久的新特性,Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接 ...
- 个人psp
排球计分程序 1.计划 通过对用户故事估计这个任务需要3~5d天. 2.开发 2.1需求分析 作为一个观众,我希望了解每场比赛的比分,以便了解比赛的情况. 作为一个观众,我希望输入球队名称查询球队比分 ...
- 对象排序，compareTo
第一个例子 /*为了比较,让自己的类实现Comparable接口,按照自己想要的排序方式重写compareTo *Map只是提供了对键的排序,但是当我们需要对值排序时就的提供我们自己的比较器 这里 只 ...