ZTree控件的简单使用

来源：互联网发布：照片数字识别软件编辑：程序博客网时间：2024/05/16 17:07

首先引用必须的文件

  <link rel="stylesheet" href="zTreeStyle.css" type="text/css" />    <script src="jquery.js"></script>    <script src="jquery.ztree.core-3.5.js"></script>    <script src="DeviceInfoTree_JS.js"></script>

然后把封装好的函数直接复制过去，并修改里面的小部分配置内容

(function ($) {    $.fn.CreateTree = function () {        var DataSouceTrees = $.fn.CreateTree.DataSouce.GetDataSource();        $.fn.CreateTree.init.treeInit(DataSouceTrees);    };    $.fn.CreateTree.DataSouce = {             GetDataSource: function () {            var strTreeData;              $.ajaxSettings.async = false;            $.ajax({                type: "get",                url: "DeviceInfoTree.aspx?Func=BindDeviceTree",                data: {                    PrjID: $("#ProjectInfo").val()                },                success: function (data) {                    strTreeData = data.data;                    console.log(strTreeData);                }            });            return strTreeData;  //（该内容是树控件所展示的数据  以上ajax 可以修改,注意改ajax 不能使用异步。）        }    };    $.fn.CreateTree.init = {        enable: false,        config: function () {            //开始：树配置信息说明            var treeConfig = {                view: {                    dblClickExpand: false, //双击节点时，是否自动展开父节点的标识                },                data: {                    simpleData: {                        enable: true,     // 使用简单数据模式                        idKey: "ID",      //（该内容是当前节点，可以修改）                        pIdKey: "PID",    //（该内容是父节点，可以修改）                        rootPId: "-100"     //（该内容为根节点，根据自己需求更改）                    }, key: {                        name: "DeviceTypeName"                    }                },                callback: {                    onClick: this.treeClick,  //树节点单击事件                    onExpand: this.treeExpand                }            };            return treeConfig;        },        treeClick: function (event, treeId, treeNode) {            console.log(treeId);        },        SelectNode: function (textId, isValue) {            var j = 1;            var zTree = $.fn.zTree.getZTreeObj(textId),               nodes = zTree.getNodes();//获取全部节点数据            nodesDT = zTree.transformToArray(nodes);//转换成数组集合            for (var i = 0, l = nodesDT.length; i < l; i++) {                if (!nodesDT[i].isParent) {//判断是否为子节点                    zTree.selectNode(nodesDT[i]);                    zTree.setting.callback.onClick(null, zTree.setting.treeId, nodesDT[i]);                    if (j >= isValue)                        return;                    j++                }            }        },//--默认选择第一个子节点，isValue默认选中几个        treeInit: function (DataSourceTrees) {            console.log($("#Device_Tree"));            $.fn.zTree.init($("#Device_Tree"), this.config(), DataSourceTrees);   //（修改这里的 $("#Device_Tree") 表示 ul 标签，将树放在这里ul 里面）        },        //结束：树自定义图标、加载数据后重新勾选一次、默认选择第一个子节点        changeTreeInco: function (treeId) {            var zTree = $.fn.zTree.getZTreeObj(treeId),            nodes = zTree.getNodes();   //获取全部节点数据            nodesDT = zTree.transformToArray(nodes);  //转换成数组集合            for (var i = 0, l = nodesDT.length; i < l; i++) {                if (nodesDT[i].isParent) {  //判断是否为父级                    nodesDT[i].iconSkin = nodesDT[i].iconSkin ? null : "pIcon01";//父级图标                } else {                    nodesDT[i].iconSkin = "icon08";//最后节点图标                }                zTree.updateNode(nodesDT[i]); //更新            }        },        getTreeFirstSubNodeLevel: function (treeId) {            var zTree = $.fn.zTree.getZTreeObj(treeId),            nodes = zTree.getNodes();   //获取全部节点数据            nodesDT = zTree.transformToArray(nodes);  //转换成数组集合            if (nodesDT.length > 1) {                var treeNodeID = nodesDT[1].id;                if (treeNodeID != null && treeNodeID != "") {                    var pNodeInfor = Mng_Regions.GetContent(treeNodeID).value;                    var currentLevel = "1";                    if (pNodeInfor != null && pNodeInfor != "" && pNodeInfor.split("@").length > 0) {                        currentLevel = pNodeInfor.split("@")[2];                    }                    return currentLevel;                }            }            return 0;        }    };})(jQuery);

以上准备工作做完以后，开始在事件里面初始化Tree

 $.fn.CreateTree();    //初始化 $.fn.zTree.getZTreeObj("Device_Tree").expandAll(true);  //展开树，树默认是不展开的  Device_Tree 是 ul 标签的ID

阅读全文

0 0