UDN-企业互联网技术人气社区

板块导航

浏览  : 841
回复  : 2

[jQuery] jquery插件 autoComboBox 下拉框

[复制链接]
山外青山的头像 楼主
发表于 2016-12-13 16:15:14 | 显示全部楼层 |阅读模式
  大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢

  问: 1.大家在做省市区下拉框联动,或者是产品分类联动,或者是部门联动等下拉框时怎么做? 是用ajaxpro.dll 还是jquery ajax呢??
  
  答: 是,留下继续阅读.
  
  否,跟帖回复你的方法
  
  结论:每次重复劳动 重复创造联动的下拉框, 累,想死!! 读完本文 您也许可以找到更好的方法来实现 无限级(理论) 的联动下拉框,也许只要10秒钟就够了.
  
  就这样,一个自动产生联动下拉框的插件诞生了...
  
  本插件依赖于jquery1.4.2 最低版本自行测试.
  
  废话完毕.
  
  代码:
  1. <div class="zldd-AutoComboBox" id="div_autoComboBox">
  2. </div>
复制代码
 
  调用方法:
  
  复制代码 代码如下:

  1. var data= [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "办公室(行政人事培训)"}] }, { "id": 52, "text": "研发部" }, { "id": 53, "text": "财务部"}]
  2. $("#div_autoComboBox").AutoComboBox({
  3. cssClass: "autoComboBox",
  4. nullDispaly: true,
  5. //url: "ComboBoxTreeDept_Data.aspx",
  6. //如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源
  7. // ps:只请求一次数据库,数据源将存放在客户端
  8. data:data,
  9. firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等
  10. });
复制代码

  结果: 这样就一个无限级(理论) 的联动下拉框就出来了.. 如果你拷贝一下以上代码,修改一下url参数 10秒钟够了吧??? 注:关于json格式,包括名称,请自行转换,本源码也包含一个只针对本插件转换json的一个dll.
  
  (引用后:
  
  ///dataset 数据源
  
  ///要显示text
  
  ///id,, 你懂的
  
  ///父id, 你也懂的
  
  ///忽略....
  
  string treeJson = zlddEasyUiHelp.CreateTree.DataSetToTree(ds_department, "Dept_Name", "Dept_ID", "Dept_PId",false);
  
  )
  
  问:我怎么获取用户选择的值.?
  
  答: 一句代码搞定,并支持多个参数重载
  
  复制代码 代码如下:

  1. $("#div1").ComboBoxGetValue([index],[ErrorFn]);
  2. //可选参数说明:
  3. //index,获取第几个下拉框的值,默认最后一个(如果不填写也是获取最后一个值)
  4. // ErrorFn,获取值时遇到错误 如:假设现在是省市区联动,您要获取第三个下拉框(区),但是用户只选择到了市,这将会获取不到,那么将调用传递进去的方法
  5. //该回调方法写法如下:
  6. var ErrorFn = function () {
  7. alert("错误了");
  8. }
复制代码
 
  看到此处您是否会用了???如果不会,你懂的,回帖....
  
  接下来说下"修改"功能
  
  如:刚才用户选择了自己的 地址, 那么现在用户需要修改,用户刚才选择到了"区",我们要初始化联动下拉框 并且要设置区,市,省的默认值.
  
  很简单: 在上面的代码加一句话(下方红色标注的代码)就会自动初始化带默认值的联动下拉框
  
  例:
  
  复制代码 代码如下:

  1. $("#div_autoComboBox").AutoComboBox({
  2. cssClass: "autoComboBox",
  3. nullDispaly: true,
  4. //url: "ComboBoxTreeDept_Data.aspx",
  5. //如果没有使用远程数据 则可以使用本地数据源 使用上面定义的data变量 注:如果url不为空时 优先使用远程数据源
  6. // ps:只请求一次数据库,数据源将存放在客户端
  7. data:data,
  8. defaultValue: 76,
  9. firstValue: [true, "==请选择==", "==请选择=="] //是否自动创建第一个值 这个值通常为 请选择 ,不限等
  10. });
复制代码

  关于"修改"功能的诞生背景,有兴趣的看...
  
  话说本插件是不可以设置默认值的,也就是不能自初始化带默认值的下拉框
  
  但是,由于一个美女诱惑我,说"你要弄出来,我就干嘛嘛",,具体干嘛,各位懂的....
  
  到此介绍完毕
  
  源码下载,/201012/yuanma/AutoComboBoxs.rar(已更新)
  
  (源码只包括插件源码,转换json格式字符串的dll)
  
  2011年1月4日17:12:39更新
  
  版本 v1.1
  
  更新内容
  
  修复部分已知bug(如果子类没有顶级选项如"请选择" 造成第三级无法创建的问题)
  
  增加获取选定项对象的方法
  
  性能的优化

相关帖子

发表于 2016-12-13 16:15:43 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2016-12-17 15:13:36 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部