EasyUI Tree组件需要一个包含特定属性(如id
, text
, children
等)的JSON对象数组来初始化。
而后台返回的数据,它可能不是我们直接能拿来用的。
方式一:使用loadFilter函数处理来自Web Services的JSON数据。
$('#ManageAuthTree').tree({
checkbox: true,
url: '/mapmanage/tuceng_tree',
method: "get",
onBeforeLoad: function (node, param) {
param.dep_id = ParentID;
},
formatter: function(node){
return node.name;
},
loadFilter: function (data) {
let newData = formatForEasyUITree(data.data);
console.log(newData)
return newData;
},
onSelect: function (node) {
},
onLoadSuccess: function (node, data) {
// var setChecked = function(nodes){console.log(nodes)
// for(var i=0; i<nodes.length; i++){console.log(nodes[i],nodes[i].checkState)
// if (nodes[i].dep_checked||nodes[i].dep_checked==[true]) {
// $('#ManageAuthTree').tree('check', nodes[i].target);
// }
// if (nodes[i].children && nodes[i].children.length > 0) {
// setChecked(nodes[i].children);
// }
// }
// };
// setChecked(data); // 递归设置节点的选中状态
}
});
function formatForEasyUITree(nodes) {
return nodes.map(node => ({
// ...node,
id: node.id,
text: node.name,
checked: node.dep_checked,
children: node.children ? formatForEasyUITree(node.children) : undefined
}));
}
方式二:使用 data
选项初始化 Tree
$.ajax({
method: "get",
url: '/mapmanage/tuceng_tree',
dataType: 'json',
data: { 'dep_id': ParentID },
async: false,
success: function (data) {
if (data.code == 0) {
let newData = formatForEasyUITree(data.data);
console.log(newData)
$('#ManageAuthTree').tree({
// 这里可以配置 Tree 组件的其他选项
checkbox: true,
data: newData
});
} else {
$.messager.alert('错误', data.msg, 'error');
}
}
});
方式三:使用 loadData
方法将这个数据加载到组件
// 假设你的 Tree 组件的 ID 是 'tt'
$('#tt').tree({
// 这里可以配置 Tree 组件的其他选项
// ...
onLoadSuccess: function(node, data){
// 加载数据成功后的回调函数(可选)
// 注意:这个回调是 `loadData` 方法不直接提供的,但你可以通过其他方式实现
}
});
// 使用 loadData 方法加载数据
var treeData = [
// ... 这里是上面提到的 JSON 数据
];
$('#tt').tree('loadData', treeData);