使用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 ...
随机推荐
- POJ - 1459 Power Network（最大流）（模板）
1.看了好久,囧. n个节点,np个源点,nc个汇点,m条边(对应代码中即节点u 到节点v 的最大流量为z) 求所有汇点的最大流. 2.多个源点,多个汇点的最大流. 建立一个超级源点.一个超级汇点,然 ...
- 关于使用kafka时对于大数据消息体是遇到的问题
kafka对于消息体的大小默认为单条最大值是1M. 但是在我们应用场景中, 常常会出现一条消息大于1M, 如果不对kafka进行配置. 则会出现生产者无法将消息推送到kafka或消费者无法去消费kaf ...
- 我的JSP中文编码解决方案
虽然以前就知道编码问题,但是一直没有遇到问题,以前用asp.net和php的时候,感觉很自然地写程序,没怎么特别处理编码问题,这回改用java写,真心被恶心到了. 进行了一番查阅学习后,终于搞明白了一 ...
- null、undefined和NaN的简洁比较
Null 类型也只有一个值,即null.null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象.Undefined 类型只有一个值,即undefined.当声明的变量还未被初始化时,变 ...
- bzoj 4822: [Cqoi2017]老C的任务【扫描线+树状数组+二维差分】
一个树状数组能解决的问题分要用树套树--还写错了我别是个傻子吧? 这种题还是挺多的,大概就是把每个矩形询问差分拆成四个点前缀和相加的形式(x1-1,y1-1,1)(x2.y2,1)(x1-1,y2,- ...
- （6）css盒子模型（基础下）
一.理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着. html与DOM的关系 详情了解“DOM” :ht ...
- Centos 7 chrome
share from https://www.cnblogs.com/lenmom/p/9195581.html 1. 下载Chrome浏览器的rpm包 https://www.chrome64bit ...
- spring源代码下载并导入eclipse技巧
环境:mac 安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install ...
- Qt对象模型之一：信号和槽
一.信号和槽机制概述 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目 ...
- 暴力(判凸四边形) FZOJ 2148 Moon Game
题目传送门 题意:给了n个点的坐标,问能有几个凸四边形 分析:数据规模小,直接暴力枚举,每次四个点判断是否会是凹四边形,条件是有一个点在另外三个点的内部,那么问题转换成判断一个点d是否在三角形abc内 ...