Tree:加载列表数据

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/

时间: 2024-10-16 23:51:13

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

数据更新+加载列表+删除数据

此项目实例为springMVCDB 一.数据检索更新 分析:要实现的效果是在第一个页面文本框中输入一个数值,点击检索,然后在第二个页面的文本框中显示.然后在这个文本框中输入新数据,点击更新按钮,数据库中的文件及文本框中的数据被改写.需要注意的是此操作是检索的userid,而要更新的则是它对应的username的值. 功能实现思路: 先实现数据更新,即在控制中用searchUser的方法实例化一个存放结果集的bean.然后是进行数据改写,就是实例化一个update的方法,将结果给bean.并用一个

WP8_GestureListener实现列表向下滑动加载新数据

利用GestureListener的OnDragCompleted事件,实现列表向下滑动时,加载新的数据: (不建议使用 Touch.FrameReported+=Touch_FrameReported; 此事件是全局的,如果没有注销事件,在离开页面后仍会得到响应,而这不是希望的效果) 前台代码: <Border> <!- 此处放置ScrollViewer或 ListBox--> <ScrollViewer/>   <toolkit:GestureService.

虚拟列表控件---加载大数据行

虚拟列表控件---加载大数据行 平常所用到的列ListView/ListCtrl控件,都是只有行至几百行数据,直至今日,在项目中遇到了上10W量级数据条,终于感觉到普通加载的艰辛,遂到网上乱找一通,发现大同小异,转载了这篇比较详细的,后面代码所用到的m_Items,为存放的列表的数据结构列表, 这篇文章虽详尽,改日做一个DEMO, Demo 一.什么是虚拟列表控件 虚拟列表控件是指带有LVS_OWNERDATA风格的列表控件.. 二.为什么使用虚拟列表控件 我们知道,通常使用列表控件CListC

Android数据分批加载-滑动到底部自动加载列表

Android数据分批加载-滑动到底部自动加载列表 2014年5月9日 本博文介绍如何进行数据分批加载,在应用开发当中会经常使用到ListView,点击更多加载数据是我们经常简单,为了提供用户体验,当用户将列表滚动到底部自动加载数据,这样的形式用得比较多. 下面给大家提供的例子是,每次模拟20条数据,滑动到底部时再请求20条数据直到请求到限定页数为止 具体代码实现: /08_Datapageload/src/com/wwj/datapageload/MainActivity.java packa

asp.net:easyui tree控件加载url数据

easyui tree控件加载url数据 建表 CREATE TABLE [dbo].[OrganizationStructure]( [Id] [int] IDENTITY(1,1) NOT NULL, [OwnerId] [int] NOT NULL, [Name] [nvarchar](100) NOT NULL, [Type] [int] NULL, CONSTRAINT [PK_OrganizationStructure] PRIMARY KEY CLUSTERED ( [Name]

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

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

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

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

1.四种加载React数据的技术对比(Meteor 转) : https://sanwen8.cn/p/31e4kdE.html 2. Meteor + Appolo   TelescopeJS/Telescope    https://github.com/TelescopeJS/Telescope/tree/devel http://nova-docs.telescopeapp.org/architecture.html

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

首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dataType: "json", data:{ filter: "test", pageNumber: 1, pageSize: 5 }, success: function(data){ // do something }, complete: function(XMLH