zTree树形组件异步加载数据
最近公司项目中要用到树形组件，开始用的layui，后来发现layui的树形组件不支持异步加载，在网上查发现实现起来很复杂。而公司项目中也有ztree的css，js,于是就选择了ztree。
先来个普通的，总结分4步（引入js,css就不说了）
1，在body里给个实体
<ui id="tree" class="ztree"></ui>
2，配置setting(setting是什么先不管，反正一定要配)
var setting = { check: { enable: true }, };
3，准备父节点的数据
//isParent 为true 代表这个为父节点，可以把这个去掉或者改为false看看效果
var zNodes=[
{"name":"长沙","id":1,isParent:true},
{"name":"常德","id":2,isParent:true},
{"name":"株洲","id":3,isParent:true}
];
4，实例化
//在整个页面执行完后 实例化
$(function(){
//三个值，第一步的id 第二步的setting ,第三步的zNodes,注意不要写错了
$.fn.zTree.init($("#tree"),setting,zNodes)
})
5，整个代码
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<!--看这里 引入下面这个后就不是默认的皮肤了--> <link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/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> <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--> <SCRIPT type="text/javascript"> var setting = { check: { enable: true }, }; $(function(){ $.fn.zTree.init($("#demo"),setting,zNodes) }) var zNodes=[ {"name":"长沙","id":1,isParent:true}, {"name":"常德","id":2,isParent:true}, {"name":"株洲","id":3,isParent:true} ]; </SCRIPT> </HEAD> <BODY> <ui id="demo" class="ztree"></ui> </BODY> </HTML>
6，效果
没有加<link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/css">是这个效果 这个样式是ztree给的
加了是这个效果
重点来了 异步加载 在普通的基础上加了 2个回调函数
1，准备父节点的数据，先要给一级的父节点一个初始值(这里就是前面的3 4 步)
$.ajax({
url : 你的url,
type : "post",
data : {你的参数},
dataType : "json",
success : function(data){
for(var i=0;i<data.data.length;i++){
//因为后台没有带 isParent这个参数，而一级节点肯定是父节点就加了给参数
data.data[i].isParent=true;
};
//这里直接传参实列化
$.fn.zTree.init($("#tree"), setting, data.data);
},error:function(err) {
}
});
2，配置setting
var setting = {
//异步加载需要做的设置
async:{
enable:true,
//异步请求服务器地址
url: ,
//向服务器传参
//这里有个坑 我找了好久 首先这个id是父节点有的，例如 父节点id:1
//如果服务器接数据 数url?id=? 的话就直接
//autoParam:["id"],
//而如果接据是 url?parentNum=?
//其实这个parentNum的值就是父节点id的值就用下面这种方式
autoParam:["id=parentNum"],
//下这个回调函数一定要加，相当于 ajax的 success{}方法
//从这个回调得带服务器返回的数据
dataFilter: ajaxDataFilter
},
check: {
//true / false 分别表示 显示 / 不显示 复选框或单选框
enable: true,
autoCheckTrigger: true,
//勾选框类型(checkbox 或 radio）checkbox：为复选 radio单选
//单选为什么要用复选了
chkStyle: "radio",
chkboxType : { "Y": "ps", "N": "ps" }
},
//回调函数，取选中的值
callback:{
//选中或取消选中触发的事件
onCheck:zTreeOnClick
}
};
3，相当于ajax的回调函数 dataFilter: ajaxDataFilter
//zTree异步加载回调函数
function ajaxDataFilter(treeId, parentNode, responseData) {
//可以打印这几个数据就明白了
//如果返回的数据有值
if (responseData.data) {
for(var i =0; i < responseData.data.length; i++) {
//不等于三 代表是父类 一样拼接isParent
// 这里做了个校验，因为公司数据就三个节点 所以只让前面2个为父节点
if(parentNode.level!=1){responseData.data[i].isParent = true;
}
}
}
//这个return 的数据 就是直接注入到异步加载时 子节点的数据
return responseData.data;
};
4，事件回调取值 点击事件触发的函数，不会知道是什么数据 打印就完事了
function zTreeOnClick(event, treeId, treeNode) { //第二步
console.log(treeNode);
var treeObj = $.fn.zTree.getZTreeObj("tree"),
nodes = treeObj.getCheckedNodes(true),
v = "";
for (var i = 0; i < nodes.length; i++) {
console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
}
}
5，完整代码
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/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>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<script >
$(function(){
var setting = {
//异步加载需要做的设置
async:{
enable:true,
//异步请求服务器地址
url: ,
//向服务器传参
//这里有个坑 我找了好久 首先这个id是父节点有的，例如 父节点id:1
//如果服务器接数据 数url?id=? 的话就直接
//autoParam:["id"],
//而如果接据是 url?parentNum=?
//其实这个parentNum的值就是父节点id的值就用下面这种方式
autoParam:["id=parentNum"],
//下这个回调函数一定要加，相当于 ajax的 success{}方法
//从这个回调得带服务器返回的数据
dataFilter: ajaxDataFilter
},
check: {
//true / false 分别表示 显示 / 不显示 复选框或单选框
enable: true,
autoCheckTrigger: true,
//勾选框类型(checkbox 或 radio）checkbox：为复选 radio单选
//单选为什么要用复选了
chkStyle: "radio",
chkboxType : { "Y": "ps", "N": "ps" }
},
//回调函数，取选中的值
callback:{
//选中或取消选中触发的事件
onCheck:zTreeOnClick
}
};
//zTree异步加载回调函数
function ajaxDataFilter(treeId, parentNode, responseData) {
if (responseData.data) {
for(var i =0; i < responseData.data.length; i++) {
//不等于三 代表是父类
if(parentNode.level!=1){responseData.data[i].isParent = true;
}
}
}
return responseData.data;
};
function zTreeOnClick(event, treeId, treeNode) { //第二步
console.log(treeNode);
var treeObj = $.fn.zTree.getZTreeObj("tree"),
nodes = treeObj.getCheckedNodes(true),
v = "";
for (var i = 0; i < nodes.length; i++) {
$("#hiddeInput").val(nodes[i].name);
// console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
}
}
window.getChoseId=function () {
return $("#hiddeInput").val();
}
$.ajax({
url : 你的url,
type : "post",
data : {你的参数},
dataType : "json",
success : function(data){
for(var i=0;i<data.data.length;i++){
data.data[i].isParent=true;
};
$.fn.zTree.init($("#tree"), setting, data.data);
},error:function(err) {
}
});
})
</script>
</HEAD>
<BODY>
<input id="hiddeInput" type="hidden" value=""/>
<ui id="tree" class="ztree"></ui>
</BODY>
</HTML>
最后 API 地址： http://www.treejs.cn/v3/main.php#_zTreeInfo
