Ztree創(chuàng)建帶有復(fù)選框的樹

一本正經(jīng)地胡鬧 2019-05-23

展開全文

需要增加的屬性

check: {
    enable: true
}

封裝的工具代碼

function createTree(url, treeId) {
    var zTree; //用于保存創(chuàng)建的樹節(jié)點
    var setting = { //設(shè)置
        check: {
            enable: true
        },
        view: {
            showLine: true, //顯示輔助線
            dblClickExpand: true,
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid",
                rootPId: 0
            }
        }
    };
    $.ajax({ //請求數(shù)據(jù),創(chuàng)建樹
        type: 'GET',
        url: url,
        dataType: "json", //返回的結(jié)果為json  
        success: function(data) {
            zTree = $.fn.zTree.init($(treeId), setting, data); //創(chuàng)建樹
        },
        error: function(data) {
            alert("創(chuàng)建樹失敗!");
        }
    });
}

創(chuàng)建帶有復(fù)選框的樹

頁面需要引入的元素

<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調(diào)用代碼

$(document).ready(function() {
    createTree("jsonData.json", "#treeDemo"); //創(chuàng)建
    $("#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); //獲取選中節(jié)點的值
    });
});

HTML的頁面元素

<body>
<div style="margin-left: 50px;margin-top: 10px;">
    name:<input id="myData" type="text" placeholder="選中的內(nèi)容" />
    <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數(shù)據(jù)

[
    {
        "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"
    }
]