Kendo UI 刷新数据源信息

Kendo UI Treeview 刷新数据源

在开发过程中，使用KendoUI的treeview时遇到了一个问题：需要从后台重新查询数菜单数据，然后刷新菜单树，显示出刚刚新增的节点信息。本身Kendo UI国内用的就不算很多，文档还是英文文档，为了以防万一，记录一下

1.首先去后台查询树形数据

基本格式是：

我是在js中将这些数据转换成层次数据，类似这种

转换的代码为

var listToMap = function (tempData) {
            // 删除所有的children,以防止多次调用
            var treeDatas = [];
            tempData.forEach(function (item) {
                delete item.children;
            });
            tempData.map(item => {
                item.label = item.label;
                item.text = item.text;
                if (item.hasChildren == 0) {
                    item.hasChildren = true;
                } else {
                    item.hasChildren = false;
                }
            });
            let map = {}; // 构建map
            tempData.forEach(i => {
                map[i.label] = i; // 构建以label为键 当前数据为值
            });
            let treeData = [];
            tempData.forEach(child => {
                const mapItem = map[child.parent]; // 判断当前数据的pid是否存在map中
                if (mapItem) {
                    // 存在则表示当前数据不是最顶层的数据
                    // 注意： 这里的map中的数据是引用了tempData的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点
                    (mapItem.items || (mapItem.items = [])).push(child); // 这里判断mapItem中是否存在child
                } else {
                    // 不存在则是顶层数据
                    treeData.push(child);
                }
            });
            var tree = {
                hasChildren:true,
                icon:"folder",
                items:treeData,
                label:"0",
                text : "指标库"
            };
            treeDatas.push(tree);
            return treeDatas;
        };

将数据转换之后，后面就简单了，只需一个操作

var dataSource = { data : mapData };
$("#tree01").data("kendoTreeView").setDataSource(dataSource);

将转换后的数据mapData放进dataSource里面，再通过菜单树的对象将值放进去即可。因为之前不确定树能不能用浪费了贼多时间，看网上很多人是这样操作的

$("#treeview").kendoTreeView({
        checkboxes: true,
        dataSource: dataSource
    });

但是我自己用的时候用不了，菜单树那里会一直显示加载中，然后我就不太懂了，果然还是简单粗暴来的好使。

特此记录，下次不迷路!