步步为营103-ZTree 二级联动

1:添加引用

   <%--流程类别多选--引用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文件--结束--%>

1 添加引用

2:js脚本

    <%--流程类别多选--引用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 = , l = nodes.length; i < l; i++) {
            v += nodes[i].name + ",";
            selectIds += nodes[i].id + ",";
        }
        if (v.length > ) v = v.substring(, v.length - );
        if (selectIds.length > ) {
            selectIds = selectIds.substring(, selectIds.length - );
        }
        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 > )) {
            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 = , l = nodes.length; i < l; i++) {
                v += nodes[i].name + ",";
                selectIds2 += nodes[i].id + ",";
            }
            if (v.length > ) { v = v.substring(, v.length - ); }
            if (selectIds2.length > ) {
                selectIds2 = selectIds2.substring(, selectIds2.length - );
            }
            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 > )) {
                hideMenu2();
            }
        }
        //清空二级树
        function clearSubProcess() {
            $("#<%=hidSubProcessNames.ClientID %>").val("");
            $("#<%=hidSubProcess.ClientID %>").val("");
            $("#<%=dropSubProcess.ClientID %>").val("");
        }
    </script>
    <%--流程类别多选--引用js脚本--结束--%>

设置两个js脚本

3:页面刷新后状态保持

     <%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>
    <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 = ; 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 = ; i < ids.length; i++) {
                var node = zTree.getNodeByParam("id", ids[i], null);
                if (node != null) {
                    node.checked = true;
                    zTree.updateNode(node);
                }
            }
        };

    </script>

     <%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>

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

4:二级联动

     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 = ; 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;
        }

构建2级联动

    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 > ))
                {
                    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 - , );
            }
            builder.Append("]");
            base.Response.Write(builder.ToString());
            base.Response.End();
        }

RetrieveMDSService.aspx

5:html代码

  <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; width: 180px; height: 300px;"></ul>
    </div>

    <div id="menuContent" class="menuContent" style="display: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 500px; height: 300px;"></ul>
    </div>

    <%--流程类别多选--弹出层--结束--%>

html代码

6:后台代码

    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 > )
            {
                sb.Append("[");

                for (int i = ; i < list.Count; i++)
                {

                    if (list[i] != list[list.Count - ])
                    {
                        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();
        }

创建一级目录数据源