使用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 ...
随机推荐
- AutoIT：为文件夹下面的文件批量改名
以前用Ruby脚本,对于中文,数字结合的文件名,修改名字也不是非常简单,需要修改字符集,可是用autoit来实现,也挺简单的,并且可以替换已有文件名中的汉字部分. $filepath = " ...
- CF 809 D Hitchhiking in the Baltic States —— 思路+DP(LIS)+splay优化
题目:http://codeforces.com/contest/809/problem/D 看题解,抄标程...发现自己连 splay 都快不会写了... 首先,题目就是要得到一个 LIS: 但与一 ...
- zabbix 监控ssdb
zabbix 的啥基础知识啥的,请看由本站大牛凉白开先生写的zabbix教程.这里说说如何监控ssdb.SSDB 是一个 C/C++ 语言开发的高性能 NoSQL 数据库, 支持 KV, list, ...
- python from import与import as 的含义
from os import makedirs, unlink, sep #从os包中引入 makedirs.unlink,sep类 from os.path import dirname, exis ...
- asp.net调用oracle存储过程
oracle内的存储过程是通过游标返回结果集的 DataTable dt = new DataTable(); OracleParameter[] paras = ]; paras[] = new O ...
- 【转载】SQL面试题
[本文转自]http://blog.csdn.net/u012467492/article/details/46790205 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name ...
- FZU 2020 组合 (Lucas定理)
题意:中文题. 析:直接运用Lucas定理即可.但是FZU好奇怪啊,我开个常数都CE,弄的工CE了十几次,在vj上还不显示. 代码如下: #pragma comment(linker, "/ ...
- P2479 [SDOI2010]捉迷藏
传送门 KDtree是个吼东西啊-- 枚举每一个点,然后求出离他距离最远和最近的点的距离,更新答案 然而为什么感觉KDtree只是因为剪枝才能跑得动呢-- //minamoto #include< ...
- shiro之SimpleAccountRealm
我使用的是maven构建的工程,junit测试 Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authe ...
- pycharm快捷键及一些常用设置（转载）
转载于:http://blog.csdn.net/wangtong95/article/details/51100872 在PyCharm /opt/pycharm-3.4.1/help目录下可以找到 ...