标准数据格式
- 可以参考《JQuery-Ztree 下载-入门》
- 《JQuery-Ztree 下载-入门》中用的就是如下的标准数据格式
- 这种格式采用Json数组形式，然后其每个元素又可以嵌套Json数组，语义上虽然更加清晰，但实际上却不符合后台的面向对象
- 所以在实际开发中更适合用文件(josn,xml,txt)来直接保存数据，如果用数据库保存，则需要额外转换成此种格式才行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标准数据格式</title> <link rel="stylesheet" href="../css/demo.css" type="text/css"> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.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"> var setting = { }; /**标准数据格式*/ var zNodes =[ { name:"父节点1 - 展开", open:true, children: [ { name:"父节点11 - 折叠", children: [ { name:"叶子节点111"}, { name:"叶子节点112"}, { name:"叶子节点113"}, { name:"叶子节点114"} ]}, { name:"父节点12 - 折叠", children: [ { name:"叶子节点121"}, { name:"叶子节点122"}, { name:"叶子节点123"}, { name:"叶子节点124"} ]}, { name:"父节点13 - 没有子节点", isParent:true} ]}, { name:"父节点2 - 折叠", children: [ { name:"父节点21 - 展开", open:true, children: [ { name:"叶子节点211"}, { name:"叶子节点212"}, { name:"叶子节点213"}, { name:"叶子节点214"} ]}, { name:"父节点22 - 折叠", children: [ { name:"叶子节点221"}, { name:"叶子节点222"}, { name:"叶子节点223"}, { name:"叶子节点224"} ]}, ]}, { name:"父节点3 - 没有子节点", isParent:true} ]; $(document).ready(function(){ /**为容器初始化数据*/ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html>
简单数据格式
- 其余不清楚的，请可以参考《JQuery-Ztree 下载-入门》
- 这种格式则纯Json数组，数组中Json不再嵌套，更适合面向对象的数据库保存
编码格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单数据格式</title> <link rel="stylesheet" href="../css/demo.css" type="text/css"> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.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"> /**简单数据格式时，必须设置下面的data.simpleData.enable为true * 标准数据格式时之所以没设值，因为它默认为false*/ var setting = { data: { simpleData: { enable: true } } }; /**简单数据格式*/ var zNodes =[ { id:1, pId:0, name:"父节点1 - 展开", open:true,url:"jyy"}, { id:11, pId:1, name:"父节点11 - 折叠"}, { id:111, pId:11, name:"叶子节点111"}, { id:112, pId:11, name:"叶子节点112"}, { id:113, pId:11, name:"叶子节点113"}, { id:114, pId:11, name:"叶子节点114"}, { id:12, pId:1, name:"父节点12 - 折叠"}, { id:121, pId:12, name:"叶子节点121"}, { id:122, pId:12, name:"叶子节点122"}, { id:123, pId:12, name:"叶子节点123"}, { id:124, pId:12, name:"叶子节点124"}, { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true}, { id:2, pId:0, name:"父节点2 - 折叠"}, { id:21, pId:2, name:"父节点21 - 展开", open:true}, { id:211, pId:21, name:"叶子节点211"}, { id:212, pId:21, name:"叶子节点212"}, { id:213, pId:21, name:"叶子节点213"}, { id:214, pId:21, name:"叶子节点214"}, { id:22, pId:2, name:"父节点22 - 折叠"}, { id:221, pId:22, name:"叶子节点221"}, { id:222, pId:22, name:"叶子节点222"}, { id:223, pId:22, name:"叶子节点223"}, { id:224, pId:22, name:"叶子节点224"}, { id:23, pId:2, name:"父节点23 - 折叠"}, { id:231, pId:23, name:"叶子节点231"}, { id:232, pId:23, name:"叶子节点232"}, { id:233, pId:23, name:"叶子节点233"}, { id:234, pId:23, name:"叶子节点234"}, { id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true} ]; $(document).ready(function(){ /**为容器初始化数据*/ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </body> </html>
参数说明
setting.data.simpleData.enable
概述[ 依赖 jquery.ztree.core 核心 js ]
确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
默认值：false
Boolean 格式说明
true / false 分别表示 使用 / 不使用 简单数据模式
如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
setting 举例
1. 使用简单 Array 格式的数据
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......
setting.data.simpleData.enable
概述[ 依赖 jquery.ztree.core 核心 js ]
确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
默认值：false
Boolean 格式说明
true / false 分别表示 使用 / 不使用 简单数据模式
如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
setting 举例
1. 使用简单 Array 格式的数据
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
......