jQuery -- zTree

今天药忘吃喽~ 2024-04-18 08:55 61阅读 0赞

# 简介 #

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 是开源免费的软件（MIT 许可证）

# 使用 #

导入css及js文件

在html页面创建ztree Div

初始化ztree

var setting = {
            view: {
                dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
                selectedMulti: true //设置是否允许同时选中多个节点
            },
            check:{
                //chkboxType: { "Y": "ps", "N": "ps" },
                chkboxType: { "Y": "", "N": "" },
                chkStyle: "checkbox",//复选框类型
                enable: true //每个节点上是否显示 CheckBox
            },
            edit:{
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn : true,
                showRenameBtn : true,
                removeTitle : "remove",
                renameTitle : "rename"
            },
            data: {
                simpleData: {//简单数据模式
                    enable:true,
                    idKey: "id",
                    pIdKey: "IPARENTID",
                    rootPId: null
                }
            },
            callback: {
                beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
            }
        };
    zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree);

ztree增删改以及选中的代码

/**
     * 添加节点
     * @param obj
     */
    function addZTreeNode(obj) {
        var treeObj = $.fn.zTree.getZTreeObj("regionZTree");
        var parentZNode = treeObj.getSelectedNodes(); //获取父节点
        var newNode = obj;
        newNode.nodeFlg = 1;  // 可以自定义节点标识
        newNode = treeObj.addNodes(parentZNode[0], newNode,true);
    }
    /**
     * 修改子节点
     * @param obj
     */
    function editZTreeNode(obj) {
        var zTree = $.fn.zTree.getZTreeObj("regionZTree");
        var nodes = zTree.getSelectedNodes();
        for(var i = 0;i<nodes.length;i++)
        {
            nodes[i].name = obj;
            zTree.updateNode(nodes[i]);
        }
    }
     
    /**
     *  删除子节点 --选中节点
     * @param obj
     */
    function removeZTreeNodeBySelect() {
        var zTree = $.fn.zTree.getZTreeObj("regionZTree");
        var nodes = zTree.getSelectedNodes(); //获取选中节点
        for (var i=0;i<nodes.length; i++) {
            zTree.removeNode(nodes[i]);
        }
    }
     
    /**
     *  删除子节点 --勾选节点
     * @param obj
     */
    function removeZTreeNodeByChecked() {
        var zTree = $.fn.zTree.getZTreeObj("regionZTree");
        var nodes =  zTree.getCheckedNodes(true); //获取勾选节点
        for (var i=0;i<nodes.length; i++) {
            zTree.removeNode(nodes[i]);
        }
    }
     
    /**
     *  根据节点id 批量删除子节点
     * @param obj
     */
    function removeZTreeNodebPi(obj) {
        var idnodes = obj.split(",");
        var zTree = $.fn.zTree.getZTreeObj("regionZTree");
        var nodes = zTree.getSelectedNodes();
        for (var i=0;i<nodes.length; i++) {
            var nodes = zTree.getNodeByParam("id", nodes[i]);
            zTree.removeNode(nodes);
        }
    }
    /**
     * 选择节点
     * @param obj
     */
    function selectzTreeNode(obj) {
        var zTree = $.fn.zTree.getZTreeObj("regionZTree");
        var node = zTree.getNodeByParam("id",obj);
        if(node!=null) {
            zTree.selectNode(node, true);//指定选中ID的节点
        }
    }

###  参考 ###

[详细文档][Link 1]

[Link 1]: http://www.treejs.cn/v3/demo.php#_113