当前位置：首页 > news >正文

将后台传来的数据，转成easyui-tree所需格式

news 来源：原创 2024/9/20 9:13:11

easyui 中文文档

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);