Ztree创建带有复选框的树

一本正经地胡闹 2019-05-23

展开全文

需要增加的属性

check: {
    enable: true
}

封装的工具代码

function createTree(url, treeId) {
    var zTree; //用于保存创建的树节点
    var setting = { //设置
        check: {
            enable: true
        },
        view: {
            showLine: true, //显示辅助线
            dblClickExpand: true,
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: 0
            }
        }
    };
    $.ajax({ //请求数据,创建树
        type: 'GET',
        url: url,
        dataType: "json", //返回的结果为json  
        success: function(data) {
            zTree = $.fn.zTree.init($(treeId), setting, data); //创建树
        },
        error: function(data) {
            alert("创建树失败!");
        }
    });
}

创建带有复选框的树

页面需要引入的元素

<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>

JavaScript调用代码

$(document).ready(function() {
    createTree("jsonData.json", "#treeDemo"); //创建
    $("#myButton").click(function() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getCheckedNodes(true);
        if(0 === nodes.length) {
            alert("请选择!");
            return;
        }
        var dataNodes = "";
        for(var i = 0; i < nodes.length; i++) {
            dataNodes += nodes[i].name + ",";
        }
        alert(dataNodes); //获取选中节点的值
    });
});

HTML的页面元素

<body>
<div style="margin-left: 50px;margin-top: 10px;">
    name:<input id="myData" type="text" placeholder="选中的内容" />
    <ul id="treeDemo" class="ztree" style="margin-top: 10px; width: 200px; height: 150px;">
    </ul>
    <button id="myButton" style="margin-top: 10px;">选中的元素</button>
</div>
</body>

使用的JSON数据

[
    {
        "id": 1,
        "pid": 0,
        "name": "pNode 1",
        "open": true,
        "attr": "id1"
    }, {
        "id": 11,
        "pid": 1,
        "name": "pNode 11",
        "attr": "id11"
    }, {
        "id": 111,
        "pid": 11,
        "name": "leaf node 111",
        "attr": "id111"
    }, {
        "id": 112,
        "pid": 11,
        "name": "leaf node 112",
        "attr": "id112"
    }, {
        "id": 12,
        "pid": 1,
        "name": "pNode 12",
        "attr": "id12"
    }, {
        "id": 2,
        "pid": 0,
        "name": "pNode 2",
        "attr": "id2"
    }, {
        "id": 21,
        "pid": 2,
        "name": "pNode 21",
        "open": true,
        "attr": "id21"
    }
]