说明：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. Intel虚拟化技术——EPT、VPID

    背景 内存用于暂存CPU将要执行的指令和数据,所有程序的运行都必须先载入到内存中才可以,内存的大小及其访问速度也直接影响整个系统性能.在平台虚拟化技术中,Guest的运行也需要依赖内存.和运行在真实物 ...

  2. FastJSON JSONObject 字段排序 Feature.OrderedField

    package cn.tongdun.robot.web; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.TypeRefe ...

  3. HDU-4190-Number Sequence-容斥原理+多重集和的r组合

    HDU-4190-Number Sequence-容斥原理+多重集和的r组合 [Problem Description] 给你\(n\)个数\(b_i\),问有多少个长度为\(n\)序列\(a_i\) ...

  4. 让Jupyter Notebook个性化

    Win下更改jupyter主题 Themes地址 本人环境  Win+Conda 开始使用pip 安装,发现无法使用pip,修改环境变量,将D:\Program Files\Conda\Scripts ...

  5. 适用于在线服务的A/B测试方法论

    适用于在线服务的A/B测试方法论 简介: 这篇文章旨在介绍适用于为在线服务进行A/B测试(A/B Test)的方法论.中文网络中目前还缺乏全面的入门级介绍. 我将首先讨论在线服务业进行A/B测试所考虑 ...

  6. 《AlwaysRun!》第七次作业：团队项目设计完善&编码

    项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nwnu-daizh/   这个作业的要求在哪里 https://www.cnblogs.com/nwnu-da ...

  7. 超实用的JQuery小技巧

    JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程. 今天我们总结了下平常项目中用到的一些小技巧,仅供参考. 1.替换元素 //替换元素 $(docume ...

  8. [Flutter] Create a Customer widget

    For example, we want to have to button, looks similar to FloatingActionButton: But in the doc, it sa ...

  9. Jmeter批量调用web service，发送message到tibco JMS queue

    [转载]Jmeter使用CSV Data Set Config参数化数据不重复的多次循环执行https://blog.csdn.net/qq_35123018/article/details/7877 ...

  10. 【转】跟我一起写 Makefile

    概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makefi ...