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

最新推荐文章于 2022-09-16 16:14:05 发布
最新推荐文章于 2022-09-16 16:14:05 发布
阅读量292 收藏 1
点赞数
分类专栏： JavaScript/JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tm772665493/article/details/99911075
版权

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

ラピスラズリ(Dawn)
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
树状图JQuery.ztree插件的使用
weixin_44484452的博客
06-08 1309
一、 树状图，顾名思义就是树形状的图，想必大家对它也不陌生，而且天天都在用的。就比如文件资源管理器里面左侧功能，它就是一个树状图，使用树状图可以很方便快捷地找到所需要的文件，而且对于文件的管理也是非常方便的，因为它有层级关系，不同种类或类别的东西可以分类放在树状图里面，这样对于文件的操作是非常高效和便捷的。 二、 但是这东西是怎么做出来的呢，因为我做的项目里面就有用到这个树状图，刚开始尝试着自己打...
树形图jQuery插件jOrgChart
07-10
jOrgChart插件，用于在页面中动态生成树形图结构，具体的使用方法，可见https://blog.csdn.net/rhx_1989/article/details/80982428
jQuery MiniUI 开发教程 树形控件 创建树：本地JSON（三）
iteye_4698的博客
11-29 399
[b]创建树：本地JSON[/b] 参考示例：[url=http://www.miniui.com/demo/tree/createtree.html]创建树：本地JSON[/url] [b]创建Tree[/b] 没有设置url。 [b]Javascript设置数据[/b] var tree3 = mini.get("tree3"); tree3.l...
025_Tree树形控件
aihiao的专栏
02-27 1881
1. Tree树形控件 1.1. Tree树形控件用清晰的层级结构展示信息, 可展开或折叠。 1.2. Tree树形控件内部使用了Node类型的对象来包装用户传入的数据, 用来保存目前节点的状态。 1.3. Attributes 参数 说明 类型 可选值 默认值 data 展示数据 array 无
miniui学习笔记（一）treegrid
weixin_30342209的博客
07-09 953
　　首先是创建一个树形表格。主要代码如下： 1 <div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;" 2 url="../data/tasks.txt" showTreeIcon="true" 3 treeColumn="taskname" idFie...
jQuery MiniUI 开发教程 表单控件 TreeSelect：树形选择框（十三）
iteye_4698的博客
10-19 2408
[b]TreeSelect：树形选择框[/b] [img]http://www.miniui.com/docs/api/images/treeselect.gif[/img] 参考示例： [url=http://www.miniui.com/demo/treeselect/treeselect.html]TreeSelect：树形选择框[/url] [b]创建TreeSelect[/...
JQ树状图
山外小楼
05-24 1810
html 部分 <link rel="stylesheet" type="text/css" href="{{staticsUrl}}/js/ztree/zTreeStyle/zTreeStyle.css"> <input type="text" name="" value="请选择搜索点位" id="locationName" class="form-cont...
jQuery Easyui datagrid/treegrid 清空数据
10-21
主要介绍了jQuery Easyui datagrid/treegrid 清空数据的相关资料
jquery插件treegrid树状表格的使用方法详解（.Net平台）
10-20
jQuery TreeGrid为.Net开发者提供了构建树形表格的强大工具，通过合理的数据结构和前端配置，可以实现复杂的数据展示和交互。结合.Net平台的后端服务，可以构建出高效、易用的管理界面，提升用户体验。在实际开发中...
jQuery EasyUI API 中文文档 – TreeGrid 树表格使用介绍
01-19
依赖 datagrid 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).treegrid({ url:’treegrid_data.json’, treeField:’name’, columns:[[ {title:’Task Name’,field:’name’,width:180}, {field:’...
jquery easyui treegrid demo 详解
10-03
在这个"jquery easyui treegrid demo 详解"中，我们将深入探讨如何使用 TreeGrid 实现增删改查功能。 首先，让我们理解 TreeGrid 的基本概念。TreeGrid 结构上是一个表格，但每一行都可以展开或折叠，显示子级数据...
JQ ztree树状图基础使用
山外小楼
12-07 1152
html 部分:  &lt;div class="tree-content" id="menuContent"&gt;                                 &lt;ul class="ztree pcc-tree" id="positionTree"&gt;&lt;/ul&gt;                             &lt;/
js svg 获取长度 宽度_使用 SVG 和 Vue.Js 构建动态树图
weixin_39887386的博客
11-20 411
原文地址：Building a Dynamic Tree Diagram with SVG and Vue.Js原文作者：Krutie Patel译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/building-a-dynamic-tree-diagram-with-svg-and-vue-js.md译者...
d3+jQuery横向树图，可展开
weixin_43085797的博客
04-17 2080
效果图 实现： <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gqct.css"> <title>d3+jQuery横向树图</title&gt...
miniUI 框架 input的简单使用
liufeifeinanfeng的博客
06-15 6019
//如何获取miniUI框架文本框的值，默认我们documnent.getElementbyId 先获取控件，然后根据value 属性获取里面的值，后来发现给 input 添加 class = "mini-textbox" 后 用document 就失效了，原因是 miniUI框架对input 进行了处理。 <input id="txtName" class="mini-textbox" ...
jquery 树形框 横_jQuery横向树枝结构图布局特效代码下载
weixin_32242475的博客
12-24 702
特效描述：横向树枝 结构图布局。jQuery基于svg绘制横向树枝结构图，公司控股集团股份结构图，企业内部分支结构图，树状结构图ui布局特效。支持自定义设置结构图数据内容列表。代码结构1. 引入CSS2. 引入JS3. HTML代码var container;var zoom;var rootData;var depthInfo;var rootName;//根节点名称jQuery(documen...
d3+jQuery横向树图结构分解
ICode联盟
09-16 189
d3+jQuery横向树图结构分解，类似组织机构和拓扑图。
html树状图前加复选框,jQuery复选框树形控件wdTree
weixin_39605894的博客
06-04 273
wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点，可以配置节点属性。 var userAgent = window.navigator.userAgent.toLowerCase();$.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);$.browser.msi...
jqgrid 4.6 treeReader 构建本地JSON 加载数据
最新发布
06-06
以下是一个简单的本地 JSON 数据的 jqGrid 4.6 的 demo： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqGrid 4.6 TreeReader Demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/free-jqgrid/4.15.5/css/ui.jqgrid.min.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.bootcss.com/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script> <script> var mydata = [ {id: "1", name: "Node 1", parent: "0", level: "0", isLeaf: false, expanded: true}, {id: "2", name: "Node 2", parent: "1", level: "1", isLeaf: true, expanded: false}, {id: "3", name: "Node 3", parent: "1", level: "1", isLeaf: false, expanded: true}, {id: "4", name: "Node 4", parent: "3", level: "2", isLeaf: true, expanded: false}, {id: "5", name: "Node 5", parent: "3", level: "2", isLeaf: true, expanded: false}, {id: "6", name: "Node 6", parent: "0", level: "0", isLeaf: false, expanded: true}, {id: "7", name: "Node 7", parent: "6", level: "1", isLeaf: true, expanded: false}, {id: "8", name: "Node 8", parent: "6", level: "1", isLeaf: true, expanded: false}, {id: "9", name: "Node 9", parent: "0", level: "0", isLeaf: true, expanded: false} ]; $(function () { $("#list").jqGrid({ data: mydata, datatype: "local", colModel: [ {name: "id", width: 50}, {name: "name", width: 150}, {name: "parent", width: 100, hidden: true} ], treeGrid: true, treeGridModel: "adjacency", ExpandColumn: "name", ExpandColClick: true, caption: "jqGrid 4.6 TreeReader Demo", height: "auto", rowNum: 10000, jsonReader: { repeatitems: false, root: function (obj) { return obj; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { return obj.length; } }, treeReader: { parent_id_field: "parent", level_field: "level", leaf_field: "isLeaf", expanded_field: "expanded" } }); }); </script> </head> <body> <table id="list"></table> </body> </html> ``` 上述示例中，我们构建了一个包含简单树形结构数据的 `mydata` 数组。每个节点都包含了 `id`、`name`、`parent`、`level`、`isLeaf` 和 `expanded` 属性。其中 `id` 用于表示节点的唯一标识，`name` 用于显示节点的名称，`parent` 用于表示节点的父节点 ID，`level` 用于表示节点的层级，`isLeaf` 用于表示节点是否为叶子节点，`expanded` 用于表示节点是否展开。 在 jqGrid 的配置中，我们使用 `data` 和 `datatype` 来指定加载本地数据，并使用 `colModel` 来定义表格的列模型。使用 `treeGrid` 和 `treeGridModel` 来启用 jqGrid 的树形功能，并使用 `ExpandColumn` 和 `ExpandColClick` 来使树形结构可以展开和收缩。`jsonReader` 和 `treeReader` 分别用于解析 JSON 数据和树形结构的数据。 在 `jsonReader` 中，我们将 `root` 属性设置为返回整个 JSON 数据，将 `records` 属性设置为返回 JSON 数组的长度，而其他属性则按默认值设置即可。 在 `treeReader` 中，我们使用了 `parent_id_field`、`level_field`、`leaf_field` 和 `expanded_field` 来指定树形结构中每个节点的父节点 ID、层级、是否为叶子节点和是否展开。这些属性的值需要在 `mydata` 数组中提供。 你可以根据需要修改 `mydata` 数组的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值