ztree 使用小结 (两级联动)

Html 页

<div class="fGpsSearch">
     <label>组织</label><select name="FControlUnitID" id="FControlUnitID" sel="sel"></select>
     <ul id="tree" class="ztree" style="width: 150px; height: 150px; background-color: #fff;">
     </ul>
</div>
<div class="fGpsSearch">
     <label>车组</label><select name="Group" id="Group" sel="sel"></select>
     <ul id="tree2" class="ztree" style="width: 150px; height: 150px; background-color: #fff;">
     </ul>
</div>

 

JS

<script type="text/javascript">
        $(function () {
            var FControlUnitTree = null;
            var GroupTree = null;

            function nodeClick(event, treeId, treeNode) {
                $('#FControlUnitID').combo('setValue', treeNode.CODE_VALUE).combo('setText', treeNode.CODE_TEXT);
                initGroupTree(treeNode.CODE_VALUE);
                var GroupNode = GroupTree.getNodes()[0];
                if (GroupNode) {
                    $('#Group').combo('setValue', GroupNode.CODE_VALUE).combo('setText', GroupNode.CODE_TEXT);
                }
                //选中节点后，隐藏下拉框
                $('.panel').hide();
            }

            function GroupNodeClick(event, treeId, treeNode) {
                $("#Group").combo('setValue', treeNode.CODE_VALUE).combo('setText', treeNode.CODE_TEXT);
                //选中节点后，隐藏下拉框
                $('.panel').hide();
            }
            //绑定组织结构
            function initFControlUnitTree() {
                var setting = {
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "CODE_VALUE",
                            pIdKey: "ParentId"
                        }, key: {
                            name: "CODE_TEXT"
                        }
                    },
                    view: {
                        selectedMulti: false
                    },
                    async: {
                        enable: true,
                        url: "/Monitoring/bindFControlUnitTree"
                    },
                    callback: {
                        onClick: nodeClick
                    }
                };
                $.fn.zTree.init($("#tree"), setting); //实例化部门树
                FControlUnitTree = $.fn.zTree.getZTreeObj("tree");
            }
            //绑定车组
            function initGroupTree(id) {
                var setting = {
                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "CODE_VALUE",
                            pIdKey: "ParentId"
                        }, key: {
                            name: "CODE_TEXT"
                        }
                    },
                    view: {
                        selectedMulti: false
                    },
                    async: {
                        enable: true,
                        url: "/Monitoring/bindGroupTree?FControlUnitID=" + id

                    },
                    callback: {
                        onClick: GroupNodeClick
                    }
                };
                $.fn.zTree.init($("#tree2"), setting); //实例化部门树
                GroupTree = $.fn.zTree.getZTreeObj("tree2");
            }
            initFControlUnitTree();
            //初始化树形下拉框
            $("select[sel=sel]").combo({ editable: false, width: 180 });
            $('#tree').appendTo($('#FControlUnitID').combo('panel'));
            //组织机构默认选中第一个节点并显示
            var defaultNode = FControlUnitTree.getNodes()[0];
            if (defaultNode) {
                $('#FControlUnitID').combo('setValue', defaultNode.CODE_VALUE).combo('setText', defaultNode.CODE_TEXT);
                initGroupTree(defaultNode.CODE_VALUE);

                var defaultgroupNode = GroupTree.getNodes()[0];
                if (defaultgroupNode) {
                    $('#Group').combo('setValue', defaultgroupNode.CODE_VALUE).combo('setText', defaultgroupNode.CODE_TEXT);
                }
            }
            //车组
            $('#tree2').appendTo($('#Group').combo('panel'));
            $("#proname").val(jQuery.url.param("keywords"));
            $("#pbegin").val(jQuery.url.param("begin"));
            $("#pend").val(jQuery.url.param("end"));
            $("#orderby option[value='" + jQuery.url.param("orderby") + "']").attr("selected", "selected");
            $("#pstatus option[value='" + jQuery.url.param("status") + "']").attr("selected", "selected");
            $("#pshow option[value='" + jQuery.url.param("showtype") + "']").attr("selected", "selected");
          })

       
    </script>

后台（controller）
       

bindTree:

返回JSON数据

"[{\"Children\":null,\"isParent\":false,\"IsLeaf\":false,\"ParentId\":\"1\",\"open\":false,\"CODE_VALUE\":\"sw24\",\"CODE_TEXT\":\"sw24\",\"IsSelect\":false,\"MODEFY_COLUMNS\":null,\"Row\":null,\"BUTTON_RIGHT\":null}]"