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. 简单说一个IOCP不好的地方

    感谢rulary的指正!博文中我对IOCP的理解是有误的,正确的方式请见评论区rulary的回复! 由于项目实际设计的需要,最终IO事件处理没有采用IOCP,而是采用了NT6.0引入的WSAPoll, ...

  2. python 获取html源代码里标签之间的文本用get_text()

    例: 输出<span class="w-txt">分享</span>中的文本"分享" contents = bsObj.find_all ...

  3. Java实验五

    20145113 Java实验五 网络编程及安全 实验内容 对于客户端与服务器端:修改原代码,使其可以实现连续的传消息,并且传送文件. 对于加解密部分: 对于原先的加密只加密"hello w ...

  4. ArrayList集合 、特殊集合

    一.ArrayList集合 集合内可以放不同类型的元素 另:object类型为所有数据类型的基类 添加元素:.add(); 清空集合:al.clear(); 克隆集合:.clone(); 判断是否包含 ...

  5. aes rsa加密

    aes在加密时,若加密字符串的长度不是16,则会在后面加0x00补足16位,所以在解密后还应该去除0x00 小于16字节的原文会得到16字节长度的密文,小于32字节的原文会得到32字节长度的密文,大于 ...

  6. OSX下Python模块安装常见问题解决

    he following error occurred while trying to add or remove files in theinstallation directory: [Errno ...

  7. 解决oracle服务器重启之后连接报错的问题

    DB服务器重启之后再连接报错如下: 原因是重启之后listener.ora被还原成初始文件,sid被清空. 解决步骤: 1.查看监听服务和数据库服务: 由此找到listener.ora文件的路径:D: ...

  8. LEETCODE —— Unique Paths II [动态规划 Dynamic Programming]

    唯一路径问题II Unique Paths II Follow up for "Unique Paths": Now consider if some obstacles are ...

  9. linux修改mysql密码

    以root为列. 查看文件安装路径whereis mysql   查询运行文件所在路径(文件夹地址) which mysql /usr/bin/mysqld_safe: line 178: 5930 ...

  10. 如何用ABBYY FineReader识别图片中的文本

    ABBYY FineReader 12是一款OCR光学字符识别软件,能够快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的文本,让电脑处理更具效率,摆脱从前的烦恼,告别耗时费力 ...