说明：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. springboot集成redis 附redis基本操作类

    1 pom.xml添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  2. Spring Boot+STOMP解决消息乱序问题

    当我们使用Spring Boot+websocket进行前后端进行通信时,我们需要注意:服务器可以随时向客户端发送消息.默认的情况下,不保证:服务器发送的消息与到达客户端的消息的顺序是一致的.可能先发 ...

  3. Something is already running on port 3000. Would you like to run the app on another port instead?

    查看端口sudo lsof -i :3000 删除进程 sudo kill -9 12297[pid]  

  4. redis的过期策略都有哪些？内存淘汰机制都有哪些？手写一下LRU代码实现？

    redis的过期策略都有哪些? 设置过期时间: set key 的时候,使用expire time,就是过期时间.指定这个key比如说只能存活一个小时?10分钟?指定缓存到期就会失效. redis的过 ...

  5. LG4213 【模板】杜教筛（Sum）和 BZOJ4916 神犇和蒟蒻

    P4213 [模板]杜教筛(Sum) 题目描述 给定一个正整数$N(N\le2^{31}-1)$ 求 $$ans_1=\sum_{i=1}^n\varphi(i)$$ $$ans_2=\sum_{i= ...

  6. 神经网络(10)--有助于对神经网络Backpropagation算法的理解

    为了更好的理解backpropagation,先来了解一下forward propagation的内部 我们在forward propagation中计算Z1(3)的方法与在back propagat ...

  7. 做vue项目时，收集的一些有意思的功能

    1. element-ui dialog组件添加可拖拽位置 可拖拽宽高 https://segmentfault.com/a/1190000012940145

  8. Django示例演示--？

    引用自:https://blog.csdn.net/weixin_42950386/article/details/83143293 定义模型类 模型类被定义在"应用/models.py&q ...

  9. http和https 握手过程

    这几天测试打印机一直出现打印延迟或者不打印的BUG.找了几天也没有发现为啥没有打印或者打印延迟.然后今天公司的研发大佬过来找问题,并开个会,瞬间所有的问题都找出了并且知道怎么解决了.大佬果然还是大佬. ...

  10. C++ error C2015: too many characters in constant

    错误原因:字符常量中的字符太多了. 错误分析: 单引号表示字符型常量. 一般的,单引号中必须有,也只能有一个字符(使用转义符时,转义符所表示的字符当作一个字符看待),如果单引号中的字符数多于4个,就会 ...