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表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考settingdatasimple内各项说明
例如：
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生成树
$fnzTreeinit($("#tree"), setting, nodes);
第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据
AngularJS
功能虽然非常强大，但UI上提供的插件不像JQuery那么多，而且只能通过directive定义扩展的UI插件，虽然国外已经提供了一些基于
directive的Tree功能实现，但毕竟不像ZTree那样强大，而且Tree是做项目中很长用的一个基本功能。
因此，花了一点时间做了一个例子将ZTree应用到AngularJS中。
zTree和后台数据的交互
首先，肯定是在页面中引入Angularjs的相关脚本，例如模块(eg appjs)、控制器(eg controllerjs)、Angularjs的脚本并进行相关标记的使用，然后引入zTree的样式包和zTreed 脚本，可以参看一下代码：
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<meta >
你好!!!
问题应该出在你的json数据上!!
{ name:"儿童饼干", isParent:true,children:[
{}
]
}
上面的这种写法，就会出现你截图中的现象，如果节点下无子节点，省略children该属性或设置该属性为空数组即可，如下：
{ name:"儿童饼干", isParent:true, children:[] }
或
{ name:"儿童饼干", isParent:true }
query ztree 当前父节点下增加子节点问题_点击事件增加子节点
一、功能描述：利用jQuery ztree31版本插件做导航树形菜单时，页面打开先加载二级菜单，通过点击事件，异步加载的方式，在添加当前父节点的子节点。
二、初始步骤：
1按照文档要求，导入jquery包，ztree插件包31版本；
2编写相应的jsp页面代码
三、遇到问题：
1、通过chrome调试的时候，提示：addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。
2、经过很长时间的摸索，开始把ztree-corejs插件换成高版本的，结果addNodes好用了，但是没有了菜单的图标，而且所有的都是异步加载。
四、解决问题：
原因：最后在32版本更新日志中，发现这么一句话：
修改代码结构，将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内。
最终领悟，原来32版本之前的addNodes。。。等一些方法在ztreeexeditjs中，而且在31文档中，方法前也有E字母标识。
所以只要引入jqueryztreeexedit-31js 包，即可解决这个问题。
五、总结
粗心浪费了好多时间，注意API中的小细节。
这是jqueryztree 各个版本的URL：>
// 异步返回后执行的函数可以这么写
function(childNodes) {
var treeObj = $fnzTreegetZTreeObj("tree");// 传入参数为ul的id
var parentNode = treeObjgetNodeByParam("id", childNodes[0]pId);// 也可以用其他方式获得父节点
treeObjaddNodes(parentNode, childNodes);
}
以上就是关于javascript框架jquery ztree中的simpledata参数是什么意思全部的内容，包括:javascript框架jquery ztree中的simpledata参数是什么意思、如何在angularjs中使用jquery的ztree插件、zTree -- jQuery 树插件的问题，了解的朋友求指点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）