第一次写文章，关于这两天做的关于zTree插件的一些内容，不足之处希望各位见谅：
http://www.ztree.me/v3/main.php#_zTreeInfo zTree官网地址
zTree插件还是很强大的，操作灵活，界面也漂亮，做web的应该都了解的
代码附上
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Style/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../Script/ztree/jquery-1.4.4.min.js"></script>
<script src="../Script/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
var zNodes;
var treeNodes;
var childCount;
var setting = {
async: {
dataFilter: function (treeId, parentNode, responseData) { //这里的内容为异步提交后 ，获取的数据进行处理，点击节点，去后台获取节点下的子节点，更新树结构
for (var i = 0; i < responseData.length; i++) { //这里循环操作数据 把节点效果全部改成父节点样式
var F_PARENT_ID = responseData[i].F_RAD_ID;
$.ajax({
type: ‘get‘,
async: false,
url: ‘../ASHX/SelectChildCount.ashx?F_PARENT_ID=‘+F_PARENT_ID,
success: function (data) {
if (data!=null || data!="0") {
chiliCount = "1";
responseData[i].isParent = true;
} else {
chiliCount = "0";
responseData[i].isParent = false;
}
}
});
}
return responseData;//更新树结构
},
dataType: "json",
enable: true,
},
check: {
enable: false,
},
view: {
showLine: true
},
callback: {
beforeExpand: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.setting.async.url = "../ASHX/TestData.ashx?ajaxMethod=AnsyData&F_RAD_ID=" + treeNode.F_RAD_ID;
}
},
data: {
key: {
name: "F_CHINESE"
},
simpleData: {
enable: true,
idKey: "F_RAD_ID",
pIdKey: "F_PARENT_ID",
rootId: 0
}
}
};
//初始化ztree树
$(document).ready(function () {
//配置静态的根节点
var zNodes2 = [{ "F_RAD_ID": 1, "F_PARENT_ID": 0, "F_CHINESE": "Radlex实体本体论", isParent: true }];
$.fn.zTree.init($("#treeDemo"), setting, zNodes2);
});
</script>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
时间： 2025-01-01 21:20:00