zTree 优秀的jquery树插件

Posted 2020-10-18 York

zTree 优秀的jquery树插件,文档详细，渲染快

使用方法：

1、引用zTree的js和css文件　　

<link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.exedit.min.js"></script>

2、ztree的html为

<ul id="treeInfo" class="ztree"></ul>

　　需加Class：ztree；

3、初始化树

　

        var setting = {

            async: {
                enable: true,
                url: "",//后台接口地址
                autoParam: ["id", "nextType"],//异步加载子节点时自动传入的参数
                type: "get",
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "", "N": "" }
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
        };

        $.fn.zTree.init($("#treeCarInfo"), setting);


   

后台接口返回数据示例：

4、加入鼠标移动到显示的自定义按钮

　　

function addHoverDom(treeId, treeNode) {
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#callBtn_" + treeNode.id).length > 0) return;
            var editStr = "<span id=\'callBtn_space_" + treeNode.id + "\' > </span>"
                + "<button type=\'button\' class=\'btn callbtn\'  id=\'callBtn_" + treeNode.id
                + "\' title=\'" + treeNode.name + "\' onfocus=\'this.blur();\'>按钮</button>";
            aObj.append(editStr);
            var btn = $("#callBtn_" + treeNode.id);
            if (btn) btn.bind("click", function () {
                //按钮点击事件
            });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#callBtn_" + treeNode.id).unbind().remove();
        $("#callBtn_space_" + treeNode.id).unbind().remove();
    };    

 

5、文档地址 http://www.treejs.cn/v3/api.php