ztree使用心得

一个很好用的Jquery树形控件

官网：http://www.ztree.me/v3/main.php#_zTreeInfo

我主要引用的文件为：

//最新版的JS压缩包
 <script src="../Script/jquery-1.11.1.min.js" type="text/javascript"></script> 
//Ztree样式
 <link href="../CSS/zTreeStyle.css" rel="stylesheet" type="text/css" />
 <script src="../Script/jquery.ztree.core-3.5.js" type="text/javascript"></script>
 <script src="../Script/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>

View Code

 

根据项目需要主setting设置如下：

 var setting1 = {
            check: {
                enable: true,
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            data: {
                simpleData: {
                    enable: true

                }
            }

        };  

var setting = {
            check: {
                enable: true,
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            async: {
                enable: true, // 设置 zTree是否开启异步加载模式  加载全部信息
                url: "", // Ajax 获取数据的 URL 地址  
                autoParam: ["id"]    // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1   
            },
            data: { // 必须使用data  
                simpleData: {
                    enable: true,
                    idKey: "id", // id编号命名 默认  
                    pIdKey: "pId", // 父id编号命名 默认   
                    rootPId: 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值  
                }
            },
            // 回调函数  
            callback: {
                //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
                onAsyncError: zTreeOnAsyncError,
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var name = $("#<%=hdfValue.ClientID%>").val();

                    if (name != undefined && name != "") {
                        //默认选中
                        $.ajax({
                            //设置同步
                            type: "POST",
                            async: false,
                            url: '',
                            data: { type: '', name: name },
                            dataType: 'json',

                            success: function (data) {
                                //对于获取的数据执行相关的操作，如：绑定、显示等
                                var treeObj = $.fn.zTree.getZTreeObj('Tree1');
                              
                                for (var i = 0; i < data.length; i++) {
                                    var node = treeObj.getNodeByParam("id", data[i].id, null);
                                    treeObj.checkNode(node);
                                }
                            }
                        });

                   
                        //学校信息
                        $.ajax({
                            type: "POST",
                            async: false,//同步
                            url: 'CategoryHandler.ashx',
                            data: { type: 'search', name: name },
                            dataType: 'json',

                            success: function (data) {
                                //对于获取的数据执行相关的操作，如：绑定、显示等
                                //专业信息;eval将字符串转换为JSON串/
                                //可以使用http://www.bejson.com/ 检查是否自己的Json串正确与否
                                $.fn.zTree.init($("#Tree2"), setting1, eval(data[0].Specialty));
                            }
                        });
                    }

                },
                onRename: zTreeOnRename
            }
        };

  // 加载错误提示  
        function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            alert("加载错误：" + XMLHttpRequest);
        };

        function beforeRemove(e, treeId, treeNode) {
            return confirm("你确定要删除吗？");
        }
        function onRemove(e, treeId, treeNode) {
            if (treeNode.isParent) {
                var childNodes = zTree.removeChildNodes(treeNode);
                var paramsArray = new Array();
                for (var i = 0; i < childNodes.length; i++) {
                    paramsArray.push(childNodes[i].id);
                }
                alert("删除父节点的id为：" + treeNode.id + "\r\n他的孩子节点有：" + paramsArray.join(","));
                return;
            }
            alert("你点击要删除的节点的名称为：" + treeNode.name + "\r\n" + "节点id为：" + treeNode.id);
        }


        function zTreeOnRename(event, treeId, treeNode, isCancel) {
            //可以自定义属性，然后根据这些属性来完成操作
            alert(treeNode.id + ",重命名过后的回调函数 " + treeNode.name);

            //1.ajax更新数据库
        }

       //必备的在ztree加载方法
      $(document).ready(function () {
            $.fn.zTree.init($("#Tree1"), setting);
            $.fn.zTree.init($("#Tree2"), setting1);
                 });

//将在ztree1中选中的信息填到ztree2
 function OnclickRight() {
            var treeObj = $.fn.zTree.getZTreeObj('Tree1');
            var nodes = treeObj.getCheckedNodes(true);
            var checkedValues = '';
            var a = [];
            for (var i = 0; i < nodes.length; i++) {
                var obj = {};
                obj.id = nodes[i].id;
                obj.pId = nodes[i].pId;
                obj.name = nodes[i].name;
                a.push(obj);
            }
            if (a.length > 0) {
                $.fn.zTree.init($("#Tree2"), setting1, a);
            }
        }

  //清除选中的tree2节点
        function OnclickLeft() {
            var treeObj = $.fn.zTree.getZTreeObj("Tree2");
            var nodes = treeObj.getCheckedNodes(true);

            for (var i = 0, l = nodes.length; i < l; i++) {
                if (nodes[i].check_Child_State == 2) {
                    treeObj.removeNode(nodes[i]);
                } else if (nodes[i].check_Child_State == -1 && !(nodes[i].isParent)) {
                    treeObj.removeNode(nodes[i]);
                } else {
                    treeObj.checkNode(nodes[i], false, false);
                }
            }
        }

View Code

 

附带这个页面的其他几个问题：

<asp:DropDownList ID="ddlB" runat="server"> </asp:DropDownList>

获取此下拉框数据：   YJSEnglish = $("#ContentPlaceHolder1_ddlB").find("option:selected").val();

 <asp:CheckBoxList ID="cblCategory" runat="server" RepeatDirection="Horizontal"> </asp:CheckBoxList>

获取多选框数据：

 $("[id*=cblCategory] input:checked").each(function () {

                Values += $(this).val() + ",";

            });

 

因为我传递到后台的数据有中文信息，所以我的Ajax如下：

 

 var obj = {};

obj结构如下

//组织ID
obj.OrgId = OrgId;

 $.ajax({
                url: "Ajaxahsx/CategoryHandler.ashx?action=Save",
                data: obj,
                type: 'POST',
                dataType: "json",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (data) {
                    alert("成功");
                    window.location.href = 'SearchIndex.aspx';
                },
                error: function (data) {
                    alert("程序出错");
                }
            })
        }

View Code