<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/jquery.ztree.core.js" type="text/javascript"></script>
<script src="js/jquery.ztree.excheck.js" type="text/javascript"></script>
<script type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true, //简化代码开启
pIdKey: "pID" //父级用这个代替
}
},
view: {
showLine: true, //连接线
//showIcon:showIcon //控制图标的显示情况
fontCss: fontcss,
nameIsHtml: true
},
check: {
enable: true,
chkboxType: { "Y": "ps", "N": "ps" }, //复选框的联动关系
nocheckInherit: false,
chkDisabledInherit: true
}
};
function fontcss(treeId, treeNode) {
return treeNode.font ? treeNode.font : {}
}
function createTree() {
var zNodes;
$.ajax({
url: "henl.txt",
type: "get",
dataType: "json",
ContentType: "application/json; charset=utf-8",
async: false,
success: function (data) {
// zNodes = new Array(data.length);
// for (var i = 0; i < data.length; i++) {
// zNodes[i] = { id: data[i].id, name: data[i].name, pID: data[i].pID, nocheck: data[i].nocheck, isParent: data[i].isParent, open: data[i].open };
//使用遍历的方法展示树结构
zNodes = data;
zNodes = eval(zNodes); //序列化json数据
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化树
},
error: function () {
alert("zNodes");
}
});
};
$(document).ready(function () {
createTree(); //调用createTree();的方法
});
</script>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
后台txt的json数据：
[
{"id":"1","name":"icon-add","pID":"0","nocheck":"true","open":"true"},
{"id":"11","name":"icon-add1","pID":"1","open":"true"},
{"id":"111","name":"icon-add","pID":"11","nocheck":"true","open":"true"},
{"id":"1111","name":"icon-add1","pID":"111","open":"true"},
{"id":"11111","name":"icon-add","pID":"1111","nocheck":"true","open":"true"},
{"id":"111111","name":"icon-add1","pID":"11111","open":"true"},
{"id":"1111111","name":"icon-add","pID":"111111","nocheck":"true","open":"true"},
{"id":"11111111","name":"icon-add1","pID":"1111111","isParent":"true","open":"true"}
]