使用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的值一定不能重复,要不然可能加载时,数据层次结构会错位.

转载于:https://www.cnblogs.com/JimmySeraph/p/10322830.html

使用JQuery MiniUI,json数据构建TreeGrid(树图)相关推荐

jQuery读取JSON数据（jQuery调用JSON数据学习第二天）
在初步了解JSON数据格式之后,接下来学习jQuery框架下,如何读取一个JSON数据. 由于JSON格式是JavaScript的原生态格式,因此,使用jQuery访问JSON数据时十分方便的,只需要 ...
深入分析jquery解析json数据
我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...
JQuery解析JSON数据
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script&g ...
jquery ajax json 数据的遍历
需求:进行ajax请求后,后台传递回来以下json数据 { "data":[ {"id":"1","name":&quo ...
Jquery解析Json数据，实现级联菜单
首先这里需要用到jquery,简单的说,jquery就是javascript的一些库,极大的简化了js的代码.我用到的是jquery-3.3.1.min.js这个版本的jq,大家可以去官网下载,jso ...
jQuery获取json数据
出自---小瓶子编辑 $.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值. ...
jquery中json数据转换为字典
首先在前台页面中的json数据为 var recipe = {};recipe["name"] = $("#name").val();recipe[" ...
JQuery处理json数据实例（map和数组）
2019独角兽企业重金招聘Python工程师标准>>> var testMap="{\"districtId\":{\"上海\":{ ...
json数据解析与JAVA对象转换以及在JQUERY中的使用
JSON基础了解 JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小 ...

使用JQuery MiniUI,json数据构建TreeGrid(树图)

使用JQuery MiniUI,json数据构建TreeGrid(树图)相关推荐

最新文章

热门文章