1:添加引用

  1.    <%--流程类别多选--引用js和css文件--开始--%>
  2.     <link rel="stylesheet" href="../css/zTreeStyle/demo.css?version=<%=VersionNo %>>" type="text/css">
  3.     <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
  4.  
  5.     <%--流程类别多选--引用js和css文件--结束--%>

1 添加引用

2:js脚本

  1.     <%--流程类别多选--引用js脚本--开始--%>
  2.     <script type="text/javascript">
  3.         <!--
  4.     var setting = {
  5.         check: {
  6.             enable: true,
  7.  
  8.             chkboxType: { "Y": "s", "N": "ps" }
  9.         },
  10.         view: {
  11.             dblClickExpand: false
  12.         },
  13.         data: {
  14.             simpleData: {
  15.                 enable: true
  16.             }
  17.         },
  18.         callback: {
  19.             beforeClick: beforeClick,
  20.             onCheck: onCheck
  21.         }
  22.     };
  23.  
  24.     var zNodes;
  25.     var selectIds = "";
  26.     function beforeClick(treeId, treeNode) {
  27.         var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory");
  28.         zTree.checkNode(treeNode, !treeNode.checked, null, true);
  29.         return false;
  30.     }
  31.  
  32.     function onCheck(e, treeId, treeNode) {
  33.         var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory"),
  34.         nodes = zTree.getCheckedNodes(true),
  35.         v = "";
  36.         selectIds = "";
  37.         for (var i = , l = nodes.length; i < l; i++) {
  38.             v += nodes[i].name + ",";
  39.             selectIds += nodes[i].id + ",";
  40.         }
  41.         if (v.length > ) v = v.substring(, v.length - );
  42.         if (selectIds.length > ) {
  43.             selectIds = selectIds.substring(, selectIds.length - );
  44.         }
  45.         var cityObj = $("#dropParProcessCategory");
  46.         cityObj.attr("value", v);
  47.         //给隐藏域赋值
  48.         setHidDropParProcessCategoryIds(v, selectIds);
  49.         selProcessCatergoryChange();
  50.         //清空二级树
  51.         clearSubProcess();
  52.     }
  53.     function showMenu() {
  54.         var cityObj = $("#dropParProcessCategory");
  55.         var cityOffset = $("#dropParProcessCategory").offset();
  56.         $("#menuProcessCategory").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
  57.  
  58.         $("body").bind("mousedown", onBodyDown);
  59.         checkedNodesByProcessCategoryIds();
  60.     }
  61.     function hideMenu() {
  62.         $("#menuProcessCategory").fadeOut("fast");
  63.         $("body").unbind("mousedown", onBodyDown);
  64.     }
  65.     function onBodyDown(event) {
  66.         if (!(event.target.id == "menuBtn" || event.target.id == "dropParProcessCategory" || event.target.id == "menuProcessCategory" || $(event.target).parents("#menuProcessCategory").length > )) {
  67.             hideMenu();
  68.         }
  69.     }
  70.  
  71.     $(document).ready(function () {
  72.         zNodes = eval("(" + $("#<%=hidDropParProcessCategoryDataSource.ClientID %>").val() + ")");
  73.         $.fn.zTree.init($("#treeProcessCategory"), setting, zNodes);
  74.         $.fn.zTree.init($("#treeDemo"), setting2, zNodes2);
  75.     });
  76.         function setHidDropParProcessCategoryIds(v, selectIds) {
  77.             $("#<%=hidDropParProcessCategoryNames.ClientID %>").val(v, selectIds);
  78.             $("#<%=hidDropParProcessCategoryIds.ClientID %>").val(selectIds);
  79.         }
  80.     </script>
  81.  
  82.     <script type="text/javascript">
  83.  
  84.         var setting2 = {
  85.             check: {
  86.                 enable: true,
  87.                 chkboxType: { "Y": "", "N": "" }
  88.             },
  89.             view: {
  90.                 dblClickExpand: false
  91.             },
  92.             data: {
  93.                 simpleData: {
  94.                     enable: true
  95.                 }
  96.             },
  97.             callback: {
  98.                 beforeClick: beforeClick2,
  99.                 onCheck: onCheck2
  100.             }
  101.         };
  102.  
  103.         var zNodes2 = [];
  104.         var selectIds2 = "";
  105.         function beforeClick2(treeId, treeNode) {
  106.             var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  107.             zTree.checkNode(treeNode, !treeNode.checked, null, true);
  108.             return false;
  109.         }
  110.  
  111.         function onCheck2(e, treeId, treeNode) {
  112.             var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  113.             nodes = zTree.getCheckedNodes(true),
  114.             v = "";
  115.             selectIds2 = "";
  116.             for (var i = , l = nodes.length; i < l; i++) {
  117.                 v += nodes[i].name + ",";
  118.                 selectIds2 += nodes[i].id + ",";
  119.             }
  120.             if (v.length > ) { v = v.substring(, v.length - ); }
  121.             if (selectIds2.length > ) {
  122.                 selectIds2 = selectIds2.substring(, selectIds2.length - );
  123.             }
  124.             var cityObj = $("#dropSubProcess");
  125.             cityObj.attr("value", v);
  126.             //给隐藏域赋值
  127.             SetValueToHidd(v, selectIds2)
  128.         }
  129.         function showMenu2() {
  130.             var cityObj = $("#dropSubProcess");
  131.             var cityOffset = $("#dropSubProcess").offset();
  132.             $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
  133.  
  134.             $("body").bind("mousedown", onBodyDown2);
  135.             checkedNodesBySubProcessIds();
  136.         }
  137.         function hideMenu2() {
  138.             $("#menuContent").fadeOut("fast");
  139.             $("body").unbind("mousedown", onBodyDown2);
  140.         }
  141.         function onBodyDown2(event) {
  142.             if (!(event.target.id == "menuBtn" || event.target.id == "dropSubProcess" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > )) {
  143.                 hideMenu2();
  144.             }
  145.         }
  146.         //清空二级树
  147.         function clearSubProcess() {
  148.             $("#<%=hidSubProcessNames.ClientID %>").val("");
  149.             $("#<%=hidSubProcess.ClientID %>").val("");
  150.             $("#<%=dropSubProcess.ClientID %>").val("");
  151.         }
  152.     </script>
  153.     <%--流程类别多选--引用js脚本--结束--%>

设置两个js脚本

3:页面刷新后状态保持

  1.      <%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>
  2.     <script type="text/javascript">
  3.         function checkedNodesByProcessCategoryIds() {
  4.             var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory");
  5.             if (zTree == null) {
  6.                 return;
  7.             }
  8.             var processCategoryIds = $("#<%=hidDropParProcessCategoryIds.ClientID %>").val()
  9.             var ids = processCategoryIds.split(',');
  10.             for (var i = ; i < ids.length; i++) {
  11.                 var node = zTree.getNodeByParam("id", ids[i], null);
  12.                 if (node != null) {
  13.                     node.checked = true;
  14.                     zTree.updateNode(node);
  15.                 }
  16.             }
  17.         };
  18.  
  19.         function checkedNodesBySubProcessIds() {
  20.             var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  21.             if (zTree==null) {
  22.                 return;
  23.             }
  24.             var subProcessIds = $("#<%=hidSubProcess.ClientID %>").val()
  25.             var ids = subProcessIds.split(',');
  26.             for (var i = ; i < ids.length; i++) {
  27.                 var node = zTree.getNodeByParam("id", ids[i], null);
  28.                 if (node != null) {
  29.                     node.checked = true;
  30.                     zTree.updateNode(node);
  31.                 }
  32.             }
  33.         };
  34.  
  35.     </script>
  36.  
  37.      <%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>

查询后再次刷新页面,选中已选中的值

4:二级联动

  1.      function selProcessCatergoryChange() {
  2.             $.ajax({
  3.                 type: "GET",
  4.                 url: "/Services/RetrieveMDSService.aspx",
  5.                 dataType: "json",
  6.                 cache: true,
  7.                 data: { RetrieveType: "SetParProcessCategorySelectChangeZTree", strId: $("#<%=hidDropParProcessCategoryIds.ClientID %>").val() },
  8.                 success: function (returnValue) {
  9.                     var vhtml = new Array();
  10.  
  11.                     var jsonList = returnValue;
  12.  
  13.                     for (var i = ; i < jsonList.length; i++) {
  14.                         //{id:3, pId:0, name:"上海"},
  15.                         if (jsonList[i].ProcessID != "undefined" && jsonList[i].ProcessID != "") {
  16.                             var eJson = '{id: ' + jsonList[i].ProcessID + ', pId:0, name:\"' + jsonList[i].ProcessName + '\"}';
  17.  
  18.                             vhtml.push(eval("(" + eJson + ")"));
  19.                         }
  20.                     }
  21.                     zNodes2 = vhtml;
  22.                     $.fn.zTree.init($("#treeDemo"), setting2, zNodes2);
  23.                 },
  24.                 error: function (data, textStatus, errorThrown) {
  25.                 }
  26.             });
  27.         }
  28.  
  29.         function SetValueToHidd(v, subProcessIDs) {
  30.             document.getElementById("<%= hidSubProcessNames.ClientID%>").value = v;
  31.             document.getElementById("<%= hidSubProcess.ClientID%>").value = subProcessIDs;
  32.         }

构建2级联动

  1.     private void SetParProcessCategorySelectChangeZTree()
  2.         {
  3.             //20140610 Eva Add:设置多语言
  4.             string lang = this.GetCurrentLanguage();
  5.             StringBuilder builder = new StringBuilder();
  6.             builder.Append("[");
  7.             builder.Append("{");
  8.             if (lang == "en-us")
  9.             {
  10.                 builder.AppendFormat("\"ProcessName\":\"{0}\",", "All");
  11.             }
  12.             else
  13.             {
  14.                 builder.AppendFormat("\"ProcessName\":\"{0}\",", "全部");
  15.             }
  16.  
  17.             builder.AppendFormat("\"ProcessID\":\"{0}\"", "");
  18.             builder.Append("},");
  19.             if ((base.Request.QueryString["strId"] != null) && (base.Request.QueryString["strId"].Trim() != ""))
  20.             {
  21.                 string strIds = base.Request.QueryString["strId"].Trim();
  22.                 string whereStr = String.Format(@" select a.sort,b.OrderNo,a.sort,a.* from ProcessPublish a inner join ProcessCategory b on b.ProcessCategoryID = a.ProcessCategoryID and b.IsUse <> 0
  23. where a.ProcessCategoryID in ({0})  and  a.isAvailable =1
  24. Order by b.OrderNo,a.sort", strIds);
  25.                 List<IProcessPublish> list = WFModelManager.ProcessPublishDAO.RetrieveListByWhereNoOrder(whereStr);
  26.                 if ((list != null) && (list.Count > ))
  27.                 {
  28.                     foreach (IProcessPublish publish in list)
  29.                     {
  30.                         builder.Append("{");
  31.                         if (lang == "en-us")
  32.                         {
  33.                             builder.AppendFormat("\"ProcessName\":\"{0}\",", publish.ProcessEnglishName);
  34.                         }
  35.                         else
  36.                         {
  37.                             builder.AppendFormat("\"ProcessName\":\"{0}\",", publish.ProcessName);
  38.                         }
  39.  
  40.                         builder.AppendFormat("\"ProcessID\":\"{0}\"", publish.ProcessID);
  41.                         builder.Append("},");
  42.                     }
  43.                 }
  44.             }
  45.             if (builder.ToString().EndsWith(","))
  46.             {
  47.                 builder = builder.Remove(builder.Length - , );
  48.             }
  49.             builder.Append("]");
  50.             base.Response.Write(builder.ToString());
  51.             base.Response.End();
  52.         }

RetrieveMDSService.aspx

5:html代码

  1.   <asp:HiddenField runat="server" ID="hidDropParProcessCategoryIds" />
  2.     <asp:HiddenField runat="server" ID="hidDropParProcessCategoryNames" />
  3.      <asp:HiddenField ID="hidSubProcessNames" runat="server" Value="" />
  4.      <asp:HiddenField ID="hidSubProcess" runat="server" Value="" />
  5.     <asp:HiddenField runat="server" ID="hidDropParProcessCategoryDataSource" />
  6.  
  7.   <td>
  8.                                                 <asp:TextBox ID="dropParProcessCategory" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu();"></asp:TextBox>
  9.                                                 →
  10.                                                 <asp:TextBox ID="dropSubProcess" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu2();"></asp:TextBox>
  11.  
  12.                                             </td>
  13.  
  14.     <%--流程类别多选--弹出层--开始--%>
  15.     <div id="menuProcessCategory" class="menuProcessCategory" style="display: none; position: absolute;">
  16.         <ul id="treeProcessCategory" class="ztree" style="margin-top: 0; width: 180px; height: 300px;"></ul>
  17.     </div>
  18.  
  19.     <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
  20.         <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 500px; height: 300px;"></ul>
  21.     </div>
  22.  
  23.     <%--流程类别多选--弹出层--结束--%>

html代码

6:后台代码

  1.     private void InitDropParProcessCategory(IList<IProcessCategory> list)
  2.         {
  3.  
  4.             //    { id: 1, pId: 0, name: "北京" },
  5.             //{ id: 2, pId: 0, name: "天津" },
  6.             //{ id: 3, pId: 0, name: "上海" },
  7.             //{ id: 6, pId: 0, name: "重庆" },
  8.             StringBuilder sb = new StringBuilder();
  9.             if (list != null && list.Count > )
  10.             {
  11.                 sb.Append("[");
  12.  
  13.                 for (int i = ; i < list.Count; i++)
  14.                 {
  15.  
  16.                     if (list[i] != list[list.Count - ])
  17.                     {
  18.                         sb.Append("{ id: " + list[i].ProcessCategoryID + ",  pId:  " + list[i].ParentCategoryID + ",  name: \"" + list[i].ProcessCategoryName.Replace(" └ ", "") + "\" },");
  19.  
  20.                     }
  21.                     else
  22.                     {
  23.                         sb.Append("{ id: " + list[i].ProcessCategoryID + ",  pId:  " + list[i].ParentCategoryID + ",  name: \"" + list[i].ProcessCategoryName.Replace(" └ ", "") + "\" , open:true}");
  24.                     }
  25.                 }
  26.                 sb.Append("] ");
  27.             }
  28.             hidDropParProcessCategoryDataSource.Value = sb.ToString();
  29.         }

创建一级目录数据源

步步为营103-ZTree 二级联动的更多相关文章

  1. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  2. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  3. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  4. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  5. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  6. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  7. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  8. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  9. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

随机推荐

  1. 百度统计api 关于搜索引擎返回参数问题

    当 post 的参数: 返回参数为: 很显然没有搜索引擎的相关名称返回,无法分辨相关引擎的数据量: 改:去掉 gran 参数 正常: 关于百度统计文档有很多模糊不清的地方,可以发邮件给官方了解,一般处 ...

  2. np.nonzero（）函数用法

    返回数组中不为0的元素的下标. 数组中元素可为布尔.整型和浮点型,返回值为元祖 一.一维数组 1.数组元素为布尔类型 a=np.array([True,False,True,False]) b=np. ...

  3. Delphi 三层框架 DataSnap 的服务器端设置

    elphi 三层框架 DataSnap 的服务器端设置: DataSnap 框架有三个模块:DataSnap Server,Server Module,DataSnap Client Module. ...

  4. InstallShield 静默安装

    可能先需要获取安装包参数,安装包参数获取/?或是/HELP InstallScrip工程 1. 在命令行窗口中使用 -R 参数(即record) 运行安装程序. 例如: Setup.exe -R or ...

  5. 无线桥接（WDS）如何设置？

    一.WDS使用介绍 无线桥接(WDS)可以将多台无线路由器通过无线方式互联,从而将无线信号扩展放大.无线终端在移动过程中可以自动切换较好的信号,实现无线漫游. 本文指导将TL-WR740N当作副路由器 ...

  6. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  7. Nginx和apache服务器中php运行方式

    PHP5的CGI方式的一大优势是内置了FastCGI的支持,只需指明绑定的地址和端口参数便可以以FastCGI的方式运行,如下: php-cgi -b 127.0.0.1:9000 配置Nginx的P ...

  8. 训练报告 (2014-2015) 2014, Samara SAU ACM ICPC Quarterfinal Qualification Contest

    Solved A Gym 100488A Yet Another Goat in the Garden   B Gym 100488B Impossible to Guess Solved C Gym ...

  9. httplib urllib urllib2 pycurl 比较

    最近网上面试看到了有关这方面的问题,由于近两个月这些库或多或少都用过,现在根据自己的经验和网上介绍来总结一下. httplib 实现了HTTP和HTTPS的客户端协议,一般不直接使用,在python更 ...

  10. input修改placeholder文字颜色

    少废话,上代码: <style> input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mo ...