使用ztree的心得

来源：互联网发布：内网渗透端口转发编辑：程序博客网时间：2024/05/22 01:50

引用的文件什么的，就不记录了，在官网文档都可以看到，官网打不开百度一下也可以找到大中国的其他程序员的对此的相关文章。

现在想记下来的是，如何让tree节点只能选中一个。

var setting = {        view: {            showIcon: function (treeId, treeNode) {                return !treeNode.isParent;            },            selectedMulti: false//只能选中一个        },        data: {            simpleData: {                enable: true            }        },        callback: { //回调函数            onClick: function (event, treeId, treeNode) {                if (treeNode.id.toString() == "-1") {                    classID = "0";                } else {                    classID = treeNode.id;                }            }        }    };

另外，如何加载的时候如何默认选中某ID节点。（这里是选中tree的第一个节点）

var Nodedata = eval(Nodes);//Nodes：ajax返回来的数据treeClass = $.fn.zTree.init($("#questionClass"), setting, Nodedata);if (treeClass.getNodes().length > 0) {    treeClass.selectNode(treeClass.getNodes()[0]);}

上面的selectNode选中一个节点的方法是对其他节点互斥的，即此Node被选中之后，其他所有的节点都被取消选中。

当要同时选中多个Node的时候怎么办？使用selectNode(node,true);——PS：ztree还有一个调皮的功能，就是按Ctrl键再去点击的时候，不过设置了selectedMulti: false之后就不能多选了。

拖拽

function GetTree() {    var setting = {        edit: {            enable: true,            showRemoveBtn: false,            showRenameBtn: false        },        view: {            showIcon: function (treeId, treeNode) {                return !treeNode.isParent;            },            selectedMulti: false        },        data: {            simpleData: {                enable: true            }        },        callback: { //回调函数            onClick: function(event, treeId, treeNode) {                classID = treeNode.id;                className = treeNode.name;                $("#btnLianXiEdite").show();                $("#btnMove").show();                $("#btnLianXiDelete").show();            },            beforeDrag: beforeDrag,            beforeDrop: beforeDrop        }    };    //拽起来的时候    function beforeDrag(treeId, treeNodes) {        for (var i = 0, l = treeNodes.length; i < l; i++) {            if (treeNodes[i].drag === false) {                return false;            }        }        return true;    }    //拖到目的地    function beforeDrop(treeId, treeNodes, targetNode, moveType) {        $("#btnLianXiEdite").show();        $("#btnMove").show();        $("#btnLianXiDelete").show();        return targetNode ? targetNode.drop !== false : true;    }    //题目类型tree    $.ajax({        url: 'demo.ashx',        type: 'POST',        async: true,        data: {            "key": "getClass","Type": "normal"        },        dataType: 'text',        timeout: 8000,        beforeSend: function () {            $("#questionType").html("<li>正在加载分类信息……</li>");        },        success: function(Nodes) {            if (Nodes != "-1") {                var Nodedata = eval(Nodes);                treeClass = $.fn.zTree.init($("#questionType"), setting, Nodedata);                //treeClass.setting.edit.drag.inner = false;                  //加上这一句则表示拖拽只能上下拖动，禁止拖动到节点内                //在什么时候回这样用？在编辑列表顺序的时候可以这么做。                GetJsonData();            }         }    });}

另外，tree还提供删除的功能，这个很方便，如果有需要可以去官网看一下文档和demo。不过今天看到官网很慢有的页面还打不开，祝我好运。

0 0