教你用JSON轻松实现Kendo UI Treeview序列化

原创|使用教程|编辑:郝浩|2013-08-27 10:44:24.000|阅读 3583 次

概述:本文教你用JSON轻松实现Kendo UI treeview 序列化的方法,将大大提升你的开发效率。

Treeview是界面设计中经常要用到的控件,那你是否想过将界面开发工具 Kendo UI 中的treeview序列化呢?将它存储之后就可以随时加载调用,可以大大提升你的开发效率。本文将为你展示如何用一段jQuery代码轻松将 treeview 序列化。

注:Kendo UI Telerik 推出的基于jQuery HTML5UI开发框架,提供数据可视化和服务器封装解决方案,开发面向桌面、移动设备的应用程序,以其优良的性能深受国内外开发人员喜爱。>>免费下载

下面这个例子将一列复选框以treeview控件展示层级数据。用户通过点击复选框选择数据项,并将选项保存为优先设置的一部分。这些选项被保存之后,我们仍然需要从数据中进行加载。

KendoUI,treeview,JSON ,序列化

Treeview 的div部分:

<body>
  <div id="treeview"></div>
</body>

jQuery代码也相当简单:

var ds = new kendo.data.HierarchicalDataSource({
    data: [{"text":"Item 1","id":"1","expanded":true,
      "checked":true,"items":[{"text":"Item 1.1",
      "id":"2","checked":true},{"text":"Item 1.2",
      "id":"3","checked":true},{"text":"Item 1.3",
      "id":"4","checked":true}]},{"text":"Item 2",
      "id":"5","expanded":true,"items":[{"text":"Item 2.1",
      "id":"6","checked":true},{"text":"Item 2.2",
      "id":"7"},{"text":"Item 2.3","id":"8",}]},
      {"text":"Item 3","id":"9"}]
});

var tv = $("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },
    dataSource: ds
}).data("kendoTreeView");


function treeToJson(nodes) {

    return $.map(nodes, function(n, i) {
    
        var result = { text: n.text, id: n.id, expanded: n.expanded, checked: n.checked };
    
        

        if (n.hasChildren)
            result.items = treeToJson(n.children.view());

        return result;
    });
}

var json = treeToJson(tv.dataSource.view()); 
console.log(JSON.stringify(json));

需要说明的一点是,函数 treetoJson()将遍历所有树节点并以JSON的形式返回数据数组。你可以在JS Bin中测试以上代码,但是要确保通过"Add Library"将"Kendo UI"加进去。



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


慧都网友 2015-12-28 11:49:18.000
0

动态的获取后台 没有数据格式啊 访问的是你们自己的远程 下载的demo也没有数据格式 怎么绑定


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat