Question

javascript框架jquery ztree中的simpledata参数是什么意思？

Answer 1

1.首先在页面上有<ul/>标签

<ul id="tree" class="ztree"></ul>

2.定义ztree的配置参数
var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};

3.获得ztree所要绑定的数据,可以使用静态数据也可以使用ajax获取的数据
a)Ztree的数据有两种格式,标准格式如下:
标准的 JSON 数据需要嵌套表示节点的父子包含关系
例如：

var nodes = [

{
name: "父节点1",
open:true,
children: [
{name: "子节点1"},
{name: "子节点2"}
]
}
];

　　
b)简单数据格式如下(推荐使用):
简单模式的 JSON 数据需要使用 id/pId表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考setting.data.simple内各项说明
例如：

var nodes = [

{id:1, pId:0, name: "父节点1"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];

简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段。
在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式.

var setting = {

data: {
simpleData: {
enable: true
}
}
};
4.初始化ztree生成树

$.fn.zTree.init($("#tree"), setting, nodes);

第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.

Answer 2

1. 首先在页面上有<ul/>标签
   
   <ul id="tree" class="ztree"></ul>

2、定义ztree的配置参数

var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};

核心参数：zTreeNodes

zTree 

的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准
zTreeNodes 举例:
Js代码
var zTreeNodes = [
{"id":1, "name":"test1",
"nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111,
"name":"test111"}
]},
{"id":12, "name":"test12"}
]},
......

]; 

②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：
Js代码
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"},
......
];


【实例一】(Java代码)

①在页面引用zTree的js和css：
Html代码
<!-- ZTree树形插件
-->
<link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"
type="text/css">
<!-- <link rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css"
type="text/css"> -->
<script type="text/javascript"
src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>

②在script脚本中定义setting和zTreeNodes
Java代码
var setting = {

isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id",
//在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId",
//在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable
: true //每个节点上是否显示 CheckBox
};

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"},
];

③在进入页面时生成树结构：
Js代码
var zTree;
Js代码
$(function() {
zTree =
$("#tree").zTree(setting, treeNodes);
});

Answer 3

1.首先在页面上有<ul/>标签

<ul id="tree" class="ztree"></ul>

2.定义ztree的配置参数
var setting = {
//check属性放在data属性之后，复选框不起作用
check: {
enable: true
},
data: {
simpleData: {
enable: true
},
}
};

3.获得ztree所要绑定的数据,可以使用静态数据也可以使用ajax获取的数据
a)Ztree的数据有两种格式,标准格式如下:
标准的 JSON 数据需要嵌套表示节点的父子包含关系。