欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 新车 > 将后台传来的数据,转成easyui-tree所需格式

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

2024/10/25 6:20:21 来源:https://blog.csdn.net/weixin_42217154/article/details/140873829  浏览:    关键词:将后台传来的数据,转成easyui-tree所需格式

easyui 中文文档

EasyUI Tree组件需要一个包含特定属性(如idtextchildren等)的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);

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com