1:添加引用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%--流程类别多选--引用js和css文件--开始--%> <link rel="stylesheet" href="../css/zTreeStyle/demo.css?version=<%=VersionNo %>>" type="text/css"> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css"> <%--流程类别多选--引用js和css文件--结束--%>
2:js脚本
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%--流程类别多选--引用js脚本--开始--%> <script type="text/javascript"> <!-- var setting = { check: { enable: true, chkboxType: { "Y": "s", "N": "ps" } }, view: { dblClickExpand: false }, data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick, onCheck: onCheck } }; var zNodes; var selectIds = ""; function beforeClick(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function onCheck(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory"), nodes = zTree.getCheckedNodes(true), v = ""; selectIds = ""; for (var i = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; selectIds += nodes[i].id + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); if (selectIds.length > 0) { selectIds = selectIds.substring(0, selectIds.length - 1); } var cityObj = $("#dropParProcessCategory"); cityObj.attr("value", v); //给隐藏域赋值 setHidDropParProcessCategoryIds(v, selectIds); selProcessCatergoryChange(); //清空二级树 clearSubProcess(); } function showMenu() { var cityObj = $("#dropParProcessCategory"); var cityOffset = $("#dropParProcessCategory").offset(); $("#menuProcessCategory").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown); checkedNodesByProcessCategoryIds(); } function hideMenu() { $("#menuProcessCategory").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "dropParProcessCategory" || event.target.id == "menuProcessCategory" || $(event.target).parents("#menuProcessCategory").length > 0)) { hideMenu(); } } $(document).ready(function () { zNodes = eval("(" + $("#<%=hidDropParProcessCategoryDataSource.ClientID %>").val() + ")"); $.fn.zTree.init($("#treeProcessCategory"), setting, zNodes); $.fn.zTree.init($("#treeDemo"), setting2, zNodes2); }); function setHidDropParProcessCategoryIds(v, selectIds) { $("#<%=hidDropParProcessCategoryNames.ClientID %>").val(v, selectIds); $("#<%=hidDropParProcessCategoryIds.ClientID %>").val(selectIds); } </script> <script type="text/javascript"> var setting2 = { check: { enable: true, chkboxType: { "Y": "", "N": "" } }, view: { dblClickExpand: false }, data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick2, onCheck: onCheck2 } }; var zNodes2 = []; var selectIds2 = ""; function beforeClick2(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.checkNode(treeNode, !treeNode.checked, null, true); return false; } function onCheck2(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getCheckedNodes(true), v = ""; selectIds2 = ""; for (var i = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; selectIds2 += nodes[i].id + ","; } if (v.length > 0) { v = v.substring(0, v.length - 1); } if (selectIds2.length > 0) { selectIds2 = selectIds2.substring(0, selectIds2.length - 1); } var cityObj = $("#dropSubProcess"); cityObj.attr("value", v); //给隐藏域赋值 SetValueToHidd(v, selectIds2) } function showMenu2() { var cityObj = $("#dropSubProcess"); var cityOffset = $("#dropSubProcess").offset(); $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast"); $("body").bind("mousedown", onBodyDown2); checkedNodesBySubProcessIds(); } function hideMenu2() { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown2); } function onBodyDown2(event) { if (!(event.target.id == "menuBtn" || event.target.id == "dropSubProcess" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) { hideMenu2(); } } //清空二级树 function clearSubProcess() { $("#<%=hidSubProcessNames.ClientID %>").val(""); $("#<%=hidSubProcess.ClientID %>").val(""); $("#<%=dropSubProcess.ClientID %>").val(""); } </script> <%--流程类别多选--引用js脚本--结束--%>
3:页面刷新后状态保持
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%> <script type="text/javascript"> function checkedNodesByProcessCategoryIds() { var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory"); if (zTree == null) { return; } var processCategoryIds = $("#<%=hidDropParProcessCategoryIds.ClientID %>").val() var ids = processCategoryIds.split(','); for (var i = 0; i < ids.length; i++) { var node = zTree.getNodeByParam("id", ids[i], null); if (node != null) { node.checked = true; zTree.updateNode(node); } } }; function checkedNodesBySubProcessIds() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); if (zTree==null) { return; } var subProcessIds = $("#<%=hidSubProcess.ClientID %>").val() var ids = subProcessIds.split(','); for (var i = 0; i < ids.length; i++) { var node = zTree.getNodeByParam("id", ids[i], null); if (node != null) { node.checked = true; zTree.updateNode(node); } } }; </script> <%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>
4:二级联动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function selProcessCatergoryChange() { $.ajax({ type: "GET", url: "/Services/RetrieveMDSService.aspx", dataType: "json", cache: true, data: { RetrieveType: "SetParProcessCategorySelectChangeZTree", strId: $("#<%=hidDropParProcessCategoryIds.ClientID %>").val() }, success: function (returnValue) { var vhtml = new Array(); var jsonList = returnValue; for (var i = 0; i < jsonList.length; i++) { //{id:3, pId:0, name:"上海"}, if (jsonList[i].ProcessID != "undefined" && jsonList[i].ProcessID != "") { var eJson = '{id: ' + jsonList[i].ProcessID + ', pId:0, name:"' + jsonList[i].ProcessName + '"}'; vhtml.push(eval("(" + eJson + ")")); } } zNodes2 = vhtml; $.fn.zTree.init($("#treeDemo"), setting2, zNodes2); }, error: function (data, textStatus, errorThrown) { } }); } function SetValueToHidd(v, subProcessIDs) { document.getElementById("<%= hidSubProcessNames.ClientID%>").value = v; document.getElementById("<%= hidSubProcess.ClientID%>").value = subProcessIDs; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
private void SetParProcessCategorySelectChangeZTree() { //20140610 Eva Add:设置多语言 string lang = this.GetCurrentLanguage(); StringBuilder builder = new StringBuilder(); builder.Append("["); builder.Append("{"); if (lang == "en-us") { builder.AppendFormat(""ProcessName":"{0}",", "All"); } else { builder.AppendFormat(""ProcessName":"{0}",", "全部"); } builder.AppendFormat(""ProcessID":"{0}"", ""); builder.Append("},"); if ((base.Request.QueryString["strId"] != null) && (base.Request.QueryString["strId"].Trim() != "")) { string strIds = base.Request.QueryString["strId"].Trim(); 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 where a.ProcessCategoryID in ({0}) and a.isAvailable =1 Order by b.OrderNo,a.sort", strIds); List<IProcessPublish> list = WFModelManager.ProcessPublishDAO.RetrieveListByWhereNoOrder(whereStr); if ((list != null) && (list.Count > 0)) { foreach (IProcessPublish publish in list) { builder.Append("{"); if (lang == "en-us") { builder.AppendFormat(""ProcessName":"{0}",", publish.ProcessEnglishName); } else { builder.AppendFormat(""ProcessName":"{0}",", publish.ProcessName); } builder.AppendFormat(""ProcessID":"{0}"", publish.ProcessID); builder.Append("},"); } } } if (builder.ToString().EndsWith(",")) { builder = builder.Remove(builder.Length - 1, 1); } builder.Append("]"); base.Response.Write(builder.ToString()); base.Response.End(); }
5:html代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<asp:HiddenField runat="server" ID="hidDropParProcessCategoryIds" /> <asp:HiddenField runat="server" ID="hidDropParProcessCategoryNames" /> <asp:HiddenField ID="hidSubProcessNames" runat="server" Value="" /> <asp:HiddenField ID="hidSubProcess" runat="server" Value="" /> <asp:HiddenField runat="server" ID="hidDropParProcessCategoryDataSource" /> <td> <asp:TextBox ID="dropParProcessCategory" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu();"></asp:TextBox> → <asp:TextBox ID="dropSubProcess" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu2();"></asp:TextBox> </td> <%--流程类别多选--弹出层--开始--%> <div id="menuProcessCategory" class="menuProcessCategory" style="display: none; position: absolute;"> <ul id="treeProcessCategory" class="ztree" style="margin-top: 0; 180px; height: 300px;"></ul> </div> <div id="menuContent" class="menuContent" style="display: none; position: absolute;"> <ul id="treeDemo" class="ztree" style="margin-top: 0; 500px; height: 300px;"></ul> </div> <%--流程类别多选--弹出层--结束--%>
6:后台代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
private void InitDropParProcessCategory(IList<IProcessCategory> list) { // { id: 1, pId: 0, name: "北京" }, //{ id: 2, pId: 0, name: "天津" }, //{ id: 3, pId: 0, name: "上海" }, //{ id: 6, pId: 0, name: "重庆" }, StringBuilder sb = new StringBuilder(); if (list != null && list.Count > 0) { sb.Append("["); for (int i = 0; i < list.Count; i++) { if (list[i] != list[list.Count - 1]) { sb.Append("{ id: " + list[i].ProcessCategoryID + ", pId: " + list[i].ParentCategoryID + ", name: "" + list[i].ProcessCategoryName.Replace(" └ ", "") + "" },"); } else { sb.Append("{ id: " + list[i].ProcessCategoryID + ", pId: " + list[i].ParentCategoryID + ", name: "" + list[i].ProcessCategoryName.Replace(" └ ", "") + "" , open:true}"); } } sb.Append("] "); } hidDropParProcessCategoryDataSource.Value = sb.ToString(); }