需要增加的屬性
check: { enable: true}
封裝的工具代碼
function createTree(url, treeId) { var zTree; //用于保存創(chuàng)建的樹節(jié)點(diǎn) 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é)點(diǎn)的值 });});
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" }]
生成的樹
