最近在使用tree显示权限信息时,发现我写的后台程序返回来的json数据属性与Tree节点属性不匹配,无法正常的显示。解决该问题有两种方法,一是到后台修改,二是在前端修改。
但是我其它地方用到了该json数据,因此,只能在前端进行修改,为此,我网上查询了好久,最终才解决,用到的是tree中提供的loadFilter属性,它能帮助我们对数据进行过滤,返回标准树的数据格式。
下面是我的实现代码
<body>
<ul id="tt"></ul>
</body>
//递归遍历json数据,重新组合成标准树的数据格式
function json(treeData,arrayTree){
for(var i = 0;i<treeData.length;i ++){
var tree = {}; //对象表达式
tree.id = treeData[i].action_id;
tree.text = treeData[i].action_name;
tree.state = treeData[i].state;
tree.checked = treeData[i].checked;
if(treeData[i].children != null){ //判断该节点是否有子节点
var childrens = [];
tree.children = json(treeData[i].children,childrens);
}
arrayTree.push(tree);
}
return arrayTree;
}
var arrayTree = [];
$('#tt').tree({
url:'data/action.json',
animate:true,
//对响应的数据进行过滤,返回标准树的数据格式
loadFilter:function (data) {
return json(data,arrayTree)
},
});