<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zTree</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
</head>
<link rel="stylesheet" href="${ctx}/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctx}/zTree_v3/js/jquery.ztree.excheck.js"></script>
<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>
<script>
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("创建树失败!");
}
});*/
zTree = $.fn.zTree.init($(treeId), setting, url); //创建树
}
$(document).ready(function() {
var data=[
{
"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"
}
];
createTree(data, "#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); //获取选中节点的值
});
});
</script>
</body>
</html>
