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