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 ...
随机推荐
- 工厂食堂3D指纹考勤系统解决方案
指纹考勤就餐管理系统利用3D活体指纹技术完成对正式员工就餐管理.就餐者只需办理完入职手续,并登记考勤指纹,就可通过考勤指纹在工厂食堂领餐. 大多数工厂食堂就餐是福利性的,只准员工就餐,不准员工带亲戚朋 ...
- 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 ...
- Jmeter学习（一）
最近测了一个导出功能,感觉应该学习下Jmeter,WEB系统的性能系统还是需要有一定累积. 选择Jmeter而不是LR,很简单的原因是QTP和LR不能装一台机器上. 也有很多测试人员推荐Jmeter, ...
- spring-task
cronExpression的配置说明,具体使用以及参数请百度google 字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 0-59 , - * / 小 ...
- php curl 采集
curl 采集五个步骤: 1.curl_init()初始化curl 2.curl_setopt()设置传输数据和参数 3.curl_exec()执行传输并获取返回数据 4.curl_errono()返 ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- openssl 非对称加密 RSA 加密解密以及签名验证签名
1. 简介 openssl rsa.h 提供了密码学中公钥加密体系的一些接口, 本文主要讨论利用rsa.h接口开发以下功能 公钥私钥的生成 公钥加密,私钥解密 私钥加密,公钥解密 签名:私钥签名 验 ...
- 【转】 如何使用Valgrind memcheck工具进行C/C++的内存泄漏检测
系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调试内存问题的恶梦.所以,在实践中会用到很多工具来 ...
- AES,RSA对称加密和非对称加密
1.关于RSA加密机制:是非对称加密方式,两个钥,公钥和私钥,公钥用于加密数据,可以分享给其他用户,私钥可以用于解密用公钥加密的数据,关于安全问题是公钥泄露不会影响安全问题,公钥与私钥是一一对应的关系 ...
- ubuntu16.04安装virtualbox5.1失败 gcc:error:unrecognized command line option ‘-fstack-protector-strong’
系统:ubuntu16.04.1 软件:Virtualbox-5.1 编译器:GCC 4.7.4 在如上环境下安装Vbx5.1提示我在终端执行/sbin/vboxconfig命令 照做 出现如下err ...