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

avatar
作者
猴君
阅读量:0

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

    广告一刻

    为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!