码迷,mamicode.com
首页 > Web开发 > 详细

z-tree结合ajax的调用展示树结构

时间:2016-06-13 13:15:03      阅读:426      评论:0      收藏:0      [点我收藏+]

标签:

<!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"}

]

 

z-tree结合ajax的调用展示树结构

标签:

原文地址:http://www.cnblogs.com/firstdata/p/5580011.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!