使用JQuery MiniUI,json数据构建TreeGrid(树图)
index.html直接上代码.
需要引用MiniUI的boot.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tree大数据量:10000</title>
<script src="scripts/boot.js" type="text/javascript"></script>
<style type="text/css"> </style>
</head>
<body>
<h1>Tree大数据量:10000</h1>
<div id="treegrid1" class="mini-treegrid"
style="width: 100%; height: 350px;"
treeColumn="taskname" idField="UID"
parentField="ParentTaskUID" resultAsTree="false"
>
<div property="columns">
<div type="indexcolumn">序号</div>
<div name="taskname" field="Name" width="200">任务名称
<input type="text" property="editor"
class="mini-textbox"
style="width: 100%;"
minHeight="80"
/>
<input type="text" property="filter"
class="mini-textbox"
style="width: 100%;"
minHeight="80"
/>
</div>
<div field="Duration" width="100">工期</div>
<div field="PercentComplete" width="100">进度</div>
<div field="Start" width="100" dateFormat="yyyy-MM-dd">开始日期</div>
<div field="Finish" width="100" dateFormat="yyyy-MM-dd">完成日期</div>
</div>
</div>
<script type="text/javascript"> var dataArr = [{
"UID": "1",
"ParentTaskUID": "0",
"Name": "项目范围规划1",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "2",
"ParentTaskUID": "1",
"Name": "项目范围规划2",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "3",
"ParentTaskUID": "2",
"Name": "项目范围规划3",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "4",
"ParentTaskUID": "3",
"Name": "项目范围规划4",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "5",
"ParentTaskUID": "0",
"Name": "项目范围规划5",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "10",
"ParentTaskUID": "4",
"Name": "项目范围规划10",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "6",
"ParentTaskUID": "0",
"Name": "项目范围规划6",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "123",
"ParentTaskUID": "0",
"Name": "项目范围规划123",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "256",
"ParentTaskUID": "0",
"Name": "项目范围规划256",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "177",
"ParentTaskUID": "123",
"Name": "项目范围规划177",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "888",
"ParentTaskUID": "1",
"Name": "项目范围规划888",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "666",
"ParentTaskUID": "1",
"Name": "项目范围规划666",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "1666",
"ParentTaskUID": "0",
"Name": "项目范围规划1666",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
},{
"UID": "1888",
"ParentTaskUID": "0",
"Name": "项目范围规划1888",
"Duration": 5,
"Start": "2007-01-01T00:00:00",
"Finish": "2007-01-05T23:23:59",
"PercentComplete": 0,
"Summary": 1,
"Critical": 0,
"Milestone": 0,
"PredecessorLink": []
}]; mini.parse();
var dataArr2 = [];
loadTree();
var tree = mini.get("treegrid1");
tree.setData(dataArr2); function loadTree(){
for(var i = 0; i < dataArr.length; i++){
recursive(i);
}
} function recursive(index){
console.log("index:" + index);
var currentObj = dataArr[index];
var parentObj = !currentObj ? null : getObjByUID(currentObj.ParentTaskUID);
if(index >= dataArr.length){
return;
}else if(parentObj == null){
if(!dataArr2.contains(currentObj)){
dataArr2.push(currentObj);
}
}else{
if(!parentObj.children){
parentObj.children = [];
}
if(!parentObj.children.contains(currentObj)){
parentObj.children.push(currentObj);
}
index++;
recursive(index);
}
} function getObjByUID(UID){
var obj = null;
for(var i = 0; i < dataArr.length; i++){
if(dataArr[i].UID == UID){
obj = dataArr[i];
break;
}
}
return obj;
} </script>
</body>
</html>
好了,使用浏览器就可以看效果了.
浏览器效果图如下:
注意:treecolumn的值一定不能重复,要不然可能加载时,数据层次结构会错位.
使用JQuery MiniUI,json数据构建TreeGrid(树图)的更多相关文章
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- 使用原生javascript和jQuery解析json数据
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...
- Jquery 返回json数据在IE浏览器中提示下载的问题
Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...
- json数据的格式，JavaScript、jQuery读取json数据
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...
- 使用jQuery解析JSON数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: {"comments&quo ...
- jsp通过jQuery返回json数据到页面
1.首先要导入json的包,自己去网站找,总共6个jar包! 2. 在servlet里的写法(仅共参考) JSONObject json = new JSONObject(); String a = ...
- 使用jQuery解析JSON数据（由ajax发送请求到php文件处理数据返回json数据，然后解析json写入html中呈现）
在上一篇的Struts2之ajax初析中,我们得到了comments对象的JSON数据,在本篇中,我们将使用jQuery进行数据解析. 我们先以解析上例中的comments对象的JSON数据为例,然后 ...
- jQuery操作json数据
json是一种轻量级数据交换格式,简单的json格式为[{"key1":"value1"},{"key2":"value2&quo ...
随机推荐
- CSYZDay2模拟题解
T1.rotate [问题描述] ZYL有N张牌编号分别为1, 2,……,N.他把这N张牌打乱排成一排,然后他要做一次旋转使得旋转后固定点尽可能多.如果第i个位置的牌的编号为i,我们就称之为固定点.旋 ...
- Scanner类nextLine()和next()的区别和使用方法
next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后输入的 ...
- appcompat_v7 引起的新建Android工程编译不过的问题 （转载）
转自:http://blog.csdn.net/zhao7134/article/details/34449641 eclipse adt 上新建基于Android4.4(kk)的Android项目时 ...
- 哈理工OJ P2320：OX
题目链接:OX 题意 :给出一个3X3的黑白棋棋盘,棋盘上有若干黑白子,再给出下一个下的人,问下一个下的人能否赢 分析:考虑到只有39种状态,故用一个数保存目前棋盘的状态,记为value,再枚举空位D ...
- python 面向对象六 类属性和实例属性
一.实例属性 Python是动态语言,根据类创建的实例可以任意绑定属性. >>> class Student(object): ... def __init__(self, name ...
- php安装的扩展php -m可以看到，但是phpinfo()看不到，php-fpm关闭了重新打开还是不行？
问答 问答详情 php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行? centos apache linux html php 3.2k 次浏 ...
- CentOS 6.5使用：[3]使用xftp传递文件
先检查CentOS系统是否安装了FTP服务 [root@centos ~]# rpm -qa | grep vsftpd 如果有内容输出,那么恭喜你,你的系统已经安装了ftp服务 如果没有那么按照 ...
- 一个页面通过iframe，获取另一个页面的form
document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit(); var z ...
- AJPFX关于Java Object类常用方法小总结
java.lang.Object java.lang包在使用的时候无需显示导入,编译时由编译器自动导入. Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类. Object类 ...
- Maximum Subsequence Sum 最大子序列和的进击之路
本文解决最大子序列和问题,有两个题目组成,第二个题目比第一个要求多一些(其实就是要求输出子序列首尾元素). 01-复杂度1 最大子列和问题 (20分) 给定KK个整数组成的序列{ N1, N2 ...