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 = {}; // 构建maptempData.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});

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

特此记录，下次不迷路!

Kendo UI 刷新数据源信息相关推荐

Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
jQuery Mobile 和 Kendo UI 的比较（转）
jQuery Mobile 和 Kendo UI 的比较转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...
Kendo UI 框架 HTML5
Kendo UI是一个强大的框架用于快速HTML5 UI开发.基于最新的HTML5.CSS3和JavaScript标准. Kendo UI包含了开发现代JavaScript,JQuery框架开发所需要 ...
Telerik Kendo UI 那点事【2】中文化（汉化）
CSDN上有一个引路蜂软件的博客,里面有kendo ui的一般用法.它那里讲过的我这里就不再继续重复. 由于框架设计的需要,后台使用spring,前台使用kendo ui构建页面.为了加快快发速度以及 ...
Kendo UI Web教程分享
2019独角兽企业重金招聘Python工程师标准>>> Kendo UI Web是著名软件开发商Telerik的产品,包含数百个创建HTML5 web app的必备元素,包括UI组件 ...
聚合函数的计算机控件,使用Kendo UI MVC Grid包装器的聚合函数
眼镜剑道:2012.3.1114 .Net:4.5 MVC:4.0 问题我使用DataTable作为模型绑定我的网格,我需要有聚合值.如果我使用下面的代码作为我的基础(取自Kendo UI代码库) ...
Kendo UI Validator 概述
Kendo UI Validator 概述 Kendo UI Validator 支持了客戶端校驗的便捷方法,它基於 HTML 5 的表單校驗功能,支持很多內置的校驗規則,同時也提供了自定義規則的便捷 ...
在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

Kendo UI 刷新数据源信息

Kendo UI Treeview 刷新数据源

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

Kendo UI 刷新数据源信息相关推荐

最新文章

热门文章