使用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 ...
随机推荐
- shinx索引部分源码分析——过程：连接到CSphSource对应的sql数据源，通过fetch row取其中一行，然后解析出field，分词，获得wordhit，最后再加入到CSphSource的Hits里
CSphSource 数据源 CSphSource_XMLPipe2-XML文件获取数据 CSphSource_SQL-SQL(MySQL)获取数据 CSphIndex 索引器 派生类CSphInde ...
- C#函数3递归
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...
- ssh 无密码互通
节点n1 n2 n3 互通 第一步:n1->n2互通 admin@n1 > ssh-keygen -d
- 杂项：WebRTC
ylbtech-杂项:WebRTC WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌20 ...
- 解决Linux主机上的 远程MySQL客户端无法连接的问题
无法连接到 MySQL 数据库可能的原因有: 1. PHP 无法连接 MySQL 可能是 PHP 配置不正确,没加上连接 MySQL 的功能. 2. MySQL 软件包升级,但没有升级数据库,或安装 ...
- 07_传智播客iOS视频教程_#import指令
mac切换中英文输入法默认是Ctrl+空格键. 预处理指令的执行时机是在编译之前.在编译之前执行预处理指令. #import指令是包含文件,将指定的文件的内容在预编译的时候拷贝到写指令的地方. #im ...
- Java多线程系列九——Atomic类
参考资料:https://fangjian0423.github.io/2016/03/16/java-AtomicInteger-analysis/http://www.cnblogs.com/54 ...
- ubuntu 12.04 alt+tab无法切换窗口的问题（转载）
转自:http://www.2cto.com/os/201209/153282.html ubuntu 12.04 alt+tab无法切换窗口的问题 安装cpmpiz配置管理程序. sudo ...
- ThinkPHP3.2.3学习笔记4---统计ThinkPHP3.2.3加载的文件
将ThinkPHP3.2.3的入口文件index.php加入一个函数getIncludeFiles,文件内容变成如下所示: <?php // +------------------------- ...
- Linux 常用命令十三 kill
一.kill命令 kill命令用来删除执行中的程序或工作.kill可将指定的信息送至程序.预设的信息为SIGTERM(15),可将指定程序终止.若仍无法终止该程序,可使用SIGKILL(9)信息尝试强 ...