在使用ztree的时候遇到的一个坑;
看解决方案可以直接跳到最后
首先参数配置:
按照API里面描述可以直接用,
我贴一下我的代码:
html:
js:
function setFontCss(treeId, treeNode) {
return treeNode.level == 1 ? {color: "red"} : {};
};
var setting = {
check: {
enable: true//启动多选框记得导入jquery.ztree.excheck-3.4.js
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,//如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。
idKey: "id",
pIdKey: "pId",
rootPId: ''
}
},
view: {
showLine: false,//显示连接线
showIcon: true,//显示节点图片
//fontCss: {color:"red"}
fontCss: setFontCss//节点颜色
},
callback: {
// beforeClick: zTreeBeforeClick,
onAsyncSuccess: zTreeOnAsyncSuccess
}
};
$(function ($) {
var result = '[{"id":1,"pId":0,"name":"父节点一"},{"id":2,"pId":0,"name":"父节点二"},{"id":11,"pId":1,"name":"子节点一"},{"id":12,"pId":1,"name":"子节点二"},{"id":13,"pId":2,"name":"子节点三"},{"id":14,"pId":2,"name":"子节点四"}]';
var treeObj = $.fn.zTree.init($("#treeDemo"), setting,result).expandAll(false);
});
function zTreeOnClick() {
alert('加载树成功');
}
function zTreeOnAsyncSuccess() {
//alert('加载树成功');
var treeObj = $.fn.zTree.getZTreeObj("#treeDemo");
treeObj.expandAll(true);
}
function showPanel(stitle, urlpath) {
//alert(urlpath); 子节点请求路径
if ($('#ttab').tabs('exists', stitle)) {
$('#ttab').tabs('select', stitle);
} else {
$('#ttab').tabs('add', {
title: stitle,
content: '
然后报这个错:
点进去看一下:
问题出在这里,
我以为是我忘了在页面里面加id为 treeDemo 的dom
但是看了之后发现其实我加了,那是为啥,
看下源码吧,几千行,头皮发麻;
算了,后来看了下我的JSON,因为是写Demo,没写后台,所以比较尴尬,JSON写错了:
原来的:
{"id":1,"pId":0,"name":"父节点一"},{"id":2,"pId":0,"name":"父节点二"},{"id":11,"pId":1,"name":"子节点一"},{"id":12,"pId":1,"name":"子节点二"},{"id":13,"pId":2,"name":"子节点三"},{"id":14,"pId":2,"name":"子节点四"}
少了这个[]
加上之后:
[{"id":1,"pId":0,"name":"父节点一"},{"id":2,"pId":0,"name":"父节点二"},{"id":11,"pId":1,"name":"子节点一"},{"id":12,"pId":1,"name":"子节点二"},{"id":13,"pId":2,"name":"子节点三"},{"id":14,"pId":2,"name":"子节点四"}]
还是一样的错,
百度了一下,说是id/pid啥的要加上引号,回头一看自己也加了
因为之前用过zTree,还写了个自以为有点东西的博客:https://blog.csdn.net/SELECT_BIN/article/details/81181890
后来换成了自己原来用过的配置,
然并卵;
已经纠结一上午了,
难受~!!!
这里要传一个对象,没错,就是对象;
入参把JSON转成对象,就可以了:
result = JSON.parse(result);
效果:
正常的js:
function setFontCss(treeId, treeNode) {
return treeNode.level == 1 ? {color: "red"} : {};
};
var setting = {
check: {
enable: true//启动多选框记得导入jquery.ztree.excheck-3.4.js
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,//如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。
idKey: "id",
pIdKey: "pId",
rootPId: ''
}
},
view: {
showLine: false,//显示连接线
showIcon: true,//显示节点图片
//fontCss: {color:"red"}
fontCss: setFontCss//节点颜色
},
callback: {
// beforeClick: zTreeBeforeClick,
onAsyncSuccess: zTreeOnAsyncSuccess
}
};
$(function ($) {
var result = '[{"id":1,"pId":0,"name":"父节点一"},{"id":2,"pId":0,"name":"父节点二"},{"id":11,"pId":1,"name":"子节点一"},{"id":12,"pId":1,"name":"子节点二"},{"id":13,"pId":2,"name":"子节点三"},{"id":14,"pId":2,"name":"子节点四"}]';
result = JSON.parse(result);
var treeObj = $.fn.zTree.init($("#treeDemo"), setting,result).expandAll(false);
});
function zTreeOnClick() {
alert('加载树成功');
}
function zTreeOnAsyncSuccess() {
//alert('加载树成功');
var treeObj = $.fn.zTree.getZTreeObj("#treeDemo");
treeObj.expandAll(true);
}
function showPanel(stitle, urlpath) {
//alert(urlpath); 子节点请求路径
if ($('#ttab').tabs('exists', stitle)) {
$('#ttab').tabs('select', stitle);
} else {
$('#ttab').tabs('add', {
title: stitle,
content: '
附上API:http://www.treejs.cn/v3/api.php