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

静态加载数据

test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>TreeGrid 树形表格</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/boot.js" type="text/javascript"></script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <h1>TreeGrid 树测试</h1>

    <input type="button" value="测试" onclick="reload()"/>

     <!-- url="../data/xht_tree.json"   -->

<div id="treegrid1"

                   class="mini-treegrid"

                   style="width:100%;height:580px;"

                   showTreeIcon="false"

                   treeColumn="NAME"

                   idField="NSJGID"

                   parentField="PARID"

                   resultAsTree="false"

                   allowResize="false"

                   expandOnLoad="0"

                >

             <div property="columns">

                <div width="160" field="NAME"  name="NAME" headerAlign="center" >巡护员</div>

                <div width="80" field="TOTAL_TIME" headerAlign="center" align="center">总时长(小时)</div>

                <div width="80" field="TOTAL_MILEAGE" headerAlign="center" align="center">总里程(公里)</div>

                <div width="80" field="TOTAL_DAY" headerAlign="center" align="center">总巡护天数</div>

                <div width="80" field="AVE_TIME" headerAlign="center" align="center">平均时长(小时/天)</div>

                <div width="80" field="AVE_MILEAGE" headerAlign="center" align="center">平均里程(公里/天)</div>

            </div>

</div>

 <script type="text/javascript">

       function reload(){

           var data={};

           $.ajax({

                type: "POST",

                url: "../data/tree.json",

                async: false,

                success: function(results){

                    data=results;

                    alert("加载数据成功!"+data.length);

                }

            });

           mini.parse();

           var treegrid = mini.get("treegrid1");

         //  treegrid.url="../data/test.json?res="+Math.random();

           var start=new Date().getTime();

           console.info("reload....");

           treegrid.loading();

           treegrid.setData(data);

           var node=treegrid.getRow(0);

           treegrid.expandNode(node); 

           treegrid.unmask();

           var end=new Date().getTime();

           console.info("completed time:"+(end-start)+"ms");

       }

  </script>

</body>

</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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>TreeGrid 树形表格</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/boot.js" type="text/javascript"></script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <h1>TreeGrid 树测试</h1>

   <input type="button" value="测试" onclick="reload()"/> 

     <!-- url="../data/xht_tree.json"   -->

<div id="treegrid1"

                   class="mini-treegrid"

                   style="width:100%;height:580px;"

                   showTreeIcon="false"

                   treeColumn="NAME"

                   url="../data/test.json"

                   idField="NSJGID"

                   parentField="PARID"

                   resultAsTree="false"

                   allowResize="false"

                   expandOnLoad="0"

                >

             <div property="columns">

                <div width="160" field="NAME"  name="NAME" headerAlign="center" >巡护员</div>

                <div width="80" field="TOTAL_TIME" headerAlign="center" align="center">总时长(小时)</div>

                <div width="80" field="TOTAL_MILEAGE" headerAlign="center" align="center">总里程(公里)</div>

                <div width="80" field="TOTAL_DAY" headerAlign="center" align="center">总巡护天数</div>

                <div width="80" field="AVE_TIME" headerAlign="center" align="center">平均时长(小时/天)</div>

                <div width="80" field="AVE_MILEAGE" headerAlign="center" align="center">平均里程(公里/天)</div>

            </div>

</div>

 <script type="text/javascript">

      function reload(){

           var data={};

           mini.parse();

           var treegrid = mini.get("treegrid1");

           treegrid.url="../data/test.json?res="+Math.random();

           var start=new Date().getTime();

           console.info("reload....");

           treegrid.loading();

           treegrid.load();//https://cloud.tencent.com/info/72c043cb7f55b767583b15166c4a1b1c.html

           //treegrid.setData(data);

           var node=treegrid.getRow(0);

           treegrid.expandNode(node);

           treegrid.unmask();

           var end=new Date().getTime();

           console.info("completed time:"+(end-start)+"ms");

       } 

  </script>

</body>

</html>

test.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":"吉林省林业厅"},{"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. 更改jupyter-notebook启动时的默认目录

    1.找到jupyter_notebook_config.py: 默认Windows: C:\Users\USERNAME\.jupyter\jupyter_notebook_config.py 2.找 ...

  2. mysql 压力测试工具sysbench

    2.1 只读示例 ./bin/sysbench --test=/usr/share/sysbench/tests/include/oltp_legacy/oltp.lua --mysql-host=1 ...

  3. 迷你商城后台管理系统————stage1需求分析

    PS:迷你商城后台管理系统---需求分析.docx下载~click me 迷你商城后台管理系统-- 需求分析 1． 引言 作为互联网热潮的崛起,消费者们的普遍差异化,实体商城要想在互联网的浪潮中继续发 ...

  4. oracle添加序列

    原文地址 http://blog.itpub.net/24099965/viewspace-1116923/ 1.创建.删除 create sequence seq_newsId increment ...

  5. new 运算符的原理

    关于 new 运算符的原理: 1.红宝书上解释: (1)创建一个新对象 (2)将构造函数的作用域赋给新对象 (3)执行构造函数中的代码 (4)返回新对象 2.MDN上的解释: (1)一个继承自 Foo ...

  6. POJ2282 The Counting Problem

    题意 Language:DefaultEspañol The Counting Problem Time Limit: 3000MS Memory Limit: 65536K Total Submis ...

  7. POJ3709 K-Anonymous Sequence

    题意 Language:Default K-Anonymous Sequence Time Limit: 4000MS Memory Limit: 65536K Total Submissions: ...

  8. 二.protobuf3数据类型

    定义数据类型 首先让我们看一个非常简单的例子.假设您想要定义搜索请求消息格式,其中每个搜索请求都有一个查询字符串.您感兴趣的特定结果页面以及每页的结果数量.这是用来定义消息类型的.proto文件. s ...

  9. [NgRx] NgRx Entity Adapter Configuration - Understanding sortComparer and selectId

    import { Course, compareCourses } from "../model/course"; import { EntityState, createEnti ...

  10. mysql 5.7.21, for Linux (i686) 权限配置

    配置权限参数: GRANT语法: GRANT 权限 ON 数据库.* TO 用户名@'登录主机' IDENTIFIED BY '密码' 权限: ALL,ALTER,CREATE,DROP,SELECT ...