说明：treegrid静态数据加载时数据结构是一棵树包含children节点集合，而采用动态加载数据时数据是List结构的具体项。

静态加载数据

test1.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>TreeGrid 树形表格</title>
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
  7.  
  8.     <script src="../../scripts/boot.js" type="text/javascript"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  10. </head>
  11. <body>
  12.     <h1>TreeGrid 树测试</h1>
  13.     <input type="button" value="测试" onclick="reload()"/>
  14.  
  15.      <!-- url="../data/xht_tree.json"   -->
  16. <div id="treegrid1"
  17.                    class="mini-treegrid"
  18.                    style="width:100%;height:580px;"
  19.                    showTreeIcon="false"
  20.                    treeColumn="NAME"
  21.                    idField="NSJGID"
  22.                    parentField="PARID"
  23.                    resultAsTree="false"
  24.                    allowResize="false"
  25.                    expandOnLoad="0"
  26.                 >
  27.              <div property="columns">
  28.                 <div width="160" field="NAME"  name="NAME" headerAlign="center" >巡护员</div>
  29.                 <div width="80" field="TOTAL_TIME" headerAlign="center" align="center">总时长(小时)</div>
  30.                 <div width="80" field="TOTAL_MILEAGE" headerAlign="center" align="center">总里程(公里)</div>
  31.                 <div width="80" field="TOTAL_DAY" headerAlign="center" align="center">总巡护天数</div>
  32.                 <div width="80" field="AVE_TIME" headerAlign="center" align="center">平均时长(小时/天)</div>
  33.                 <div width="80" field="AVE_MILEAGE" headerAlign="center" align="center">平均里程(公里/天)</div>
  34.             </div>
  35. </div>
  36.  <script type="text/javascript">
  37.  
  38.        function reload(){
  39.            var data={};
  40.            $.ajax({
  41.                 type: "POST",
  42.                 url: "../data/tree.json",
  43.                 async: false,
  44.                 success: function(results){
  45.                     data=results;
  46.                     alert("加载数据成功!"+data.length);
  47.                 }
  48.             });
  49.            mini.parse();
  50.            var treegrid = mini.get("treegrid1");
  51.          //  treegrid.url="../data/test.json?res="+Math.random();
  52.            var start=new Date().getTime();
  53.            console.info("reload....");
  54.            treegrid.loading();
  55.            treegrid.setData(data);
  56.            var node=treegrid.getRow(0);
  57.            treegrid.expandNode(node); 
  58.  
  59.            treegrid.unmask();
  60.            var end=new Date().getTime();
  61.            console.info("completed time:"+(end-start)+"ms");
  62.        }
  63.  
  64.   </script>
  65.  
  66. </body>
  67. </html>

tree.json

[
{"NSJGID":1,
"TOTAL_DAY":223,
"AVE_MILEAGE":0.7914999710188864,
"AVE_TIME":0.040091934389069994,
"TOTAL_TIME":0.5355633454124709,
"PARID":0,
"TOTAL_MILEAGE":0.8415077430050332,
"NAME":"吉林省林业厅",
"children":[
    {
    "NSJGID":2,
    "TOTAL_DAY":258,
    "AVE_MILEAGE":0.16720546220211374,
    "AVE_TIME":0.3054572618464366,
    "TOTAL_TIME":0.15767441897053913,
    "PARID":1,
    "TOTAL_MILEAGE":0.7267596682884472,
    "NAME":"长春市",
    "children":[
       {
        "NSJGID":4,
        "TOTAL_DAY":29,
        "AVE_MILEAGE":0.18433586150470693,
        "AVE_TIME":0.6731615601914614,
        "TOTAL_TIME":0.5114904176863102,
        "PARID":2,
        "TOTAL_MILEAGE":0.3031552872906973,
        "NAME":"九台区林业局"
        },
        {
        "NSJGID":5,
        "TOTAL_DAY":149,
        "AVE_MILEAGE":0.6341097095733379,
        "AVE_TIME":0.08594702941741394,
        "TOTAL_TIME":0.3096787251276627,
        "PARID":2,
        "TOTAL_MILEAGE":0.2505683920373972,
        "NAME":"德惠市林业局(国有林总场)"
        }
    ]
    },
    {
    "NSJGID":3,
    "TOTAL_DAY":263,
    "AVE_MILEAGE":0.11130711964075679,
    "AVE_TIME":0.21662236083462283,
    "TOTAL_TIME":0.8687790434592519,
    "PARID":1,
    "TOTAL_MILEAGE":0.18764004371946397,
    "NAME":"吉林市"
    },
    {
    "NSJGID":7,
    "TOTAL_DAY":167,
    "AVE_MILEAGE":0.9565925005085681,
    "AVE_TIME":0.8810752861214618,
    "TOTAL_TIME":0.609676187502881,
    "PARID":1,
    "TOTAL_MILEAGE":0.10950680097424559,
    "NAME":"延边朝鲜族自治州"
    },
    {
    "NSJGID":8,
    "TOTAL_DAY":139,
    "AVE_MILEAGE":0.8631024527400463,
    "AVE_TIME":0.007568156838012041,
    "TOTAL_TIME":0.6958378635477445,
    "PARID":1,
    "TOTAL_MILEAGE":0.2077248188731492,
    "NAME":"白山市林业局（国有林总场）"
    }
 ]
}
]

动态加载数据

test2.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>TreeGrid 树形表格</title>
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
  7.  
  8.     <script src="../../scripts/boot.js" type="text/javascript"></script>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  10. </head>
  11. <body>
  12.     <h1>TreeGrid 树测试</h1>
  13.    <input type="button" value="测试" onclick="reload()"/> 
  14.  
  15.      <!-- url="../data/xht_tree.json"   -->
  16. <div id="treegrid1"
  17.                    class="mini-treegrid"
  18.                    style="width:100%;height:580px;"
  19.                    showTreeIcon="false"
  20.                    treeColumn="NAME"
  21.                    url="../data/test.json"
  22.                    idField="NSJGID"
  23.                    parentField="PARID"
  24.                    resultAsTree="false"
  25.                    allowResize="false"
  26.                    expandOnLoad="0"
  27.                 >
  28.              <div property="columns">
  29.                 <div width="160" field="NAME"  name="NAME" headerAlign="center" >巡护员</div>
  30.                 <div width="80" field="TOTAL_TIME" headerAlign="center" align="center">总时长(小时)</div>
  31.                 <div width="80" field="TOTAL_MILEAGE" headerAlign="center" align="center">总里程(公里)</div>
  32.                 <div width="80" field="TOTAL_DAY" headerAlign="center" align="center">总巡护天数</div>
  33.                 <div width="80" field="AVE_TIME" headerAlign="center" align="center">平均时长(小时/天)</div>
  34.                 <div width="80" field="AVE_MILEAGE" headerAlign="center" align="center">平均里程(公里/天)</div>
  35.             </div>
  36. </div>
  37.  <script type="text/javascript">
  38.  
  39.       function reload(){
  40.            var data={};
  41.            mini.parse();
  42.            var treegrid = mini.get("treegrid1");
  43.            treegrid.url="../data/test.json?res="+Math.random();
  44.            var start=new Date().getTime();
  45.            console.info("reload....");
  46.            treegrid.loading();
  47.            treegrid.load();//https://cloud.tencent.com/info/72c043cb7f55b767583b15166c4a1b1c.html
  48.            //treegrid.setData(data);
  49.            var node=treegrid.getRow(0);
  50.            treegrid.expandNode(node);
  51.            treegrid.unmask();
  52.            var end=new Date().getTime();
  53.            console.info("completed time:"+(end-start)+"ms");
  54.        } 
  55.  
  56.   </script>
  57.  
  58. </body>
  59. </html>

test.json

  1. [{"NSJGID":1,"TOTAL_DAY":223,"AVE_MILEAGE":0.7914999710188864,"AVE_TIME":0.040091934389069994,"TOTAL_TIME":0.5355633454124709,"PARID":0,"TOTAL_MILEAGE":0.8415077430050332,"NAME":"吉林省林业厅"},{"NSJGID":2,"TOTAL_DAY":258,"AVE_MILEAGE":0.16720546220211374,"AVE_TIME":0.3054572618464366,"TOTAL_TIME":0.15767441897053913,"PARID":1,"TOTAL_MILEAGE":0.7267596682884472,"NAME":"长春市"},{"NSJGID":3,"TOTAL_DAY":263,"AVE_MILEAGE":0.11130711964075679,"AVE_TIME":0.21662236083462283,"TOTAL_TIME":0.8687790434592519,"PARID":1,"TOTAL_MILEAGE":0.18764004371946397,"NAME":"吉林市"},{"NSJGID":4,"TOTAL_DAY":29,"AVE_MILEAGE":0.18433586150470693,"AVE_TIME":0.6731615601914614,"TOTAL_TIME":0.5114904176863102,"PARID":2,"TOTAL_MILEAGE":0.3031552872906973,"NAME":"九台区林业局"},{"NSJGID":5,"TOTAL_DAY":149,"AVE_MILEAGE":0.6341097095733379,"AVE_TIME":0.08594702941741394,"TOTAL_TIME":0.3096787251276627,"PARID":2,"TOTAL_MILEAGE":0.2505683920373972,"NAME":"德惠市林业局(国有林总场)"},{"NSJGID":7,"TOTAL_DAY":167,"AVE_MILEAGE":0.9565925005085681,"AVE_TIME":0.8810752861214618,"TOTAL_TIME":0.609676187502881,"PARID":1,"TOTAL_MILEAGE":0.10950680097424559,"NAME":"延边朝鲜族自治州"}]

MiniUI treeGrid 动态加载数据与静态加载数据的区别的更多相关文章

  1. java动态加载类和静态加载类笔记

    JAVA中的静态加载类是编译时刻加载类  动态加载类指的是运行时刻加载类 二者有什么区别呢 举一个例子  现在我创建了一个类  实现的功能假设为通过传入的参数调用具体的类和方法 class offic ...

  2. Android Fragment生命周期及静态加载

    一个Fragment必须总是被嵌入到一个Activity中,它的生命周期直接被其所属的宿主Activity生命周期影响,它的状态会随宿主的状态变化而变化. 要创建一个Fragment 必须创建一个Fr ...

  3. 动态库DLL加载方式-静态加载和动态加载

    静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...

  4. 动态链接库dll的 静态加载 与 动态加载

    dll 两种链接方式  : 动态链接和静态链接(链接亦称加载) 动态链接是指在生成可执行文件时不将所有程序用到的函数链接到一个文件,因为有许多函数在操作系统带的dll文件中,当程序运行时直接从操作系统 ...

  5. 动态加载vs静态加载

    动态加载: 1:灵活,可以在需要的时候用LoadLibrary进行加载,在不需要的时候用FreeLibrary进行卸载,这样可以不必占用内存. 2:可以在没有dll时候发现,而不致程序报错. 3:加载 ...

  6. JAVA类的静态加载和动态加载以及NoClassDefFoundError和ClassNotFoundException

    我们都知道Java初始化一个类的时候可以用new 操作符来初始化, 也可通过Class.forName()的方式来得到一个Class类型的实例,然后通过这个Class类型的实例的newInstance ...

  7. Delphi静态加载DLL和动态加载DLL示例

    下面以Delphi调用触摸屏动态库xtkutility.dll为例子,说明如何静态加载DLL和动态加载DLL. 直接上代码. 1.静态加载示例 unit Unit1; interface uses W ...

  8. vc静态加载dll和动态加载dll

    如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib, &quo ...

  9. linux驱动动态与静态加载

    在Linux中驱动的加载方式有动态加载和静态加载.动态加载,即驱动不添加到内核中,在内核启动完成后,仅在用到这一驱动时才会进行加载静态加载,驱动编译进内核中,随内核的启动而完成驱动的加载.添加字符驱动 ...

随机推荐

  1. 【Flask】 python学习第一章 - 创建与运行参数

    windos 创建环境 sudo pip install virtualenv   # 安装virtualenv virtualenv -p python dir_name cd dir_name p ...

  2. MongoDB/聚合/MR

    管道与Aggregation: 文档结构如下: { "_id" : 1, "item" : "abc", "price" ...

  3. springboot学习笔记（一）

    springboot案例(一) Application.java package com.xdr.spring; import org.springframework.boot.SpringAppli ...

  4. Failed to bind properties under 'logging.level' to java.util.Map<java.lang.String, java.lang.String>

    org.springframework.boot.context.properties.bind.BindException: Failed to bind properties under 'log ...

  5. vbs读取TXT每一行并赋值到变量a

    vbs代码: Dim fso,f,a Set fso = CreateObject("Scripting.FileSystemObject") Set f=fso.OpenText ...

  6. mysql-proxy读写分离笔记

    1.MySQL的安装与配置 --省略 版本:Server version: 5.6.35 1.1 系统版本: [root@centos7-67 package]# lsb_release -a LSB ...

  7. Nmap扫描工具实验报告

    实验报告 实验内容 通过ping进行操作系统探测 利用Zenmap/Nmap进行TCP connet扫描.TCP SYN扫描和操作系统扫描 实验目的 了解扫描的一般步骤 熟练使用ping命令并能够进行 ...

  8. django模型类

    模型类 ORM django中内嵌了ORM框架,ORM框架可以将类和数据表进行对应起来,只需要通过类和对象就可以对数据表进行操作. 在Django中主要是设计类:模型类. ORM另外一个作用:根据设计 ...

  9. Linux命令基础6-mkdir命令

    mkdir是英文单词make directory的缩写.mkdir就是用来创建路径,一般就是用来创建文件夹的. 语法 mkdir (选项)(参数) 选项 -Z:设置安全上下文,当使用SELinux时有 ...

  10. 常见的C语言编程规范

    头文件: 1.头文件中适合放置接口的声明,不适合放置实现. 2.头文件应向稳定的方向包含,产品依赖于平台,平台依赖于标准库. 3. .c/.h文件禁止包含用不到的头文件. 4.每一个.c文件应有一个同 ...