Tree控件,需要提供一个树形的JSON数据,才能正常显示。

通常,开发者在后台可以这样做:
1)从数据库查询出一个列表数据
2)在后台,将列表数据转换为树形数据
3)通过JSON方式返回
在前台页面,可以给Tree设置url地址,或者调用load方法加载树形数据。

后台的“列表转树形”是一个相对有点小难度的实现。
针对这个情况,MiniUI Tree提供了一种直接加载列表数据,Tree内部进行数据转换的方式。
1)从数据库查询出一个列表数据
2)通过JSON方式返回
省略了原来的第2个步骤。

如何实现呢?
只需要给Tree设置3个属性:valueField、parentField、resultAsTree。

valueField通常是id,表示节点对象的唯一标识符。
parentField通常是pid,表示父节点属性。
resultAsTree是关键,要设置成"false",这样Tree通过url加载数据后,就会得知需要做一些“列表转树形”的处理,从而正确显示。

参考示例:
    列表数据生成Tree:http://miniui.com/demo/tree/list2tree.html

网站:http://www.miniui.com/demo/

Tree:加载列表数据的更多相关文章

  1. ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  2. WPF DataGrid 性能加载大数据

    WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系 ...

  3. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  4. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  5. 四种加载React数据的技术对比(Meteor 转)

    1.四种加载React数据的技术对比(Meteor 转) : https://sanwen8.cn/p/31e4kdE.html 2. Meteor + Appolo   TelescopeJS/Te ...

  6. JQuery加载列表实现动画滚动(自上而下挤)

    这个例子是jquery动态加载列表,并通过定时刷新,实现其循环滚动效果的一个例子. 1.HTML代码: <div class="fake-table"> <li ...

  7. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  8. WinForm ListView不分页加载大量数据

    WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...

  9. Jquery.ajax 详细解释 通过Http请求加载远程数据

    首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...

随机推荐

  1. 页面无法加载main.css

    html应该用append,不是html,会覆盖掉文件

  2. 用eclipse碰到的一些错误,然后自己去网上找的解决办法

    错误一: [Please check logcat output for more details.Launch canceled! 解决办法:在配置文件:AndroidManifest.xml加入如 ...

  3. printf函数

    printf函数的格式及含义 d                    以十进制带符号的形式输出整数(对正数不输出符号) o                    以八进制无符号的形式输出整数(不输出 ...

  4. 编写中断例程7ch:计算word型数据的平方

    实现计算一个word型数据的平方. 这是安装程序. assume cs:code code segment start: mov ax, cs mov ds, ax mov si, offset sq ...

  5. 【IOS学习】1.IOS框架

    1.框架概述 iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa ...

  6. Matlab 进阶学习记录

    最近在看 Faster RCNN的Matlab code,发现很多matlab技巧,在此记录: 1. conf_proposal  =  proposal_config('image_means', ...

  7. Linux-磁盘及网络IO工作方式解析

    PIO与DMA 有必要简单地说说慢速I/O设备和内存之间的数据传输方式. PIO我们拿磁盘来说,很早以前,磁盘和内存之间的数据传输是需要CPU控制的,也就是说如果我们读取磁盘文件到内存中,数据要经过C ...

  8. 国内最新Unity3D视频教程合辑

    麦子学院最新Unity3D视频教程上线啦,此为现目前国内最全.最新Unity3D教程,分享给广大小伙伴,希望对大家学习Unity3D有帮助: 第一阶段:Unity3D概要及入门 零基础学C#开发 Un ...

  9. Android学习十一:高德地图使用

    写这篇文章主要有三个目的: 1.使用高德地图api定位 2.获取天气数据 3.编程练手 文件结构 清单文件信息说明: <?xml version="1.0" encoding ...

  10. 微信上传文章素材—ASP.NET MVC从View层传数据到Controller层

    View层: $('#btnNews').click(function() { if (!confirm('确定要提交吗?')) { return; } var frontViewData = []; ...