说明：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. mac 下enable mysql的load data in file

    1)使用root用户登录mysql 2)将 local_infile 变量设置为true SET GLOBAL local_infile = true; 3)重启数据库 在系统偏好设置中找到MySql ...

  2. 2013.6.26 - OpenNER第六天

    今例会的时候看CRF,突然感觉到ANN模型可能没有问题了,问题出在评价函数,不能接过好就说好,或者说收敛方法有问题,并不是打得对就答得好.还有就是我们应该让他能够根据需要而自己产生问题,问我们,然后我 ...

  3. docer安装之pure-ftp

    https://hub.docker.com/r/stilliard/pure-ftpd Docker Pure-ftpd Server https://hub.docker.com/r/stilli ...

  4. Kotlin对象表达式要点与Lambda表达式

    Kotlin对象表达式要点揭密: 在上一次https://www.cnblogs.com/webor2006/p/11352421.html中学习了Kotlin的对象表达式,它主要是解决Java中匿名 ...

  5. linux系统编程之进程(三)

    今天继续学习进程相关的东东,继上节最后简单介绍了用exec函数替换进程映像的用法,今天将来深入学习exec及它关联的函数,话不多说,正式进入正题: exec替换进程映象:   对于fork()函数,它 ...

  6. 手写Java的字符串简单匹配方法IndexOf()

    简单的字符串模式匹配算法,可使用KMP进行优化 /** * @param s1 母串 * @param s2 子串 * @return */ public static int myIndexOf(S ...

  7. JAVA对象结构

    对象的内存布局 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header),实例数据(Instance Data)和对象填充(Padding). 实例数据:对象真正存储的 ...

  8. P1311 选择客栈[模拟]

    题目描述 丽江河边有nn家很有特色的客栈,客栈按照其位置顺序从 11到nn编号.每家客栈都按照某一种色调进行装饰(总共 kk 种,用整数 00 ~k-1k−1 表示),且每家客栈都设有一家咖啡店,每家 ...

  9. 一 创建一个springboot项目之(微信点餐系统的设计与开发)

    第一步:收到项目需求,进行数据库表的设计. 1.角色的划分: 卖家:  订单,类目 买家:  商品列表 2.功能模块的划分: 商品:商品列表 订单:  订单创建,订单查询,订单取消 类目:基于管理的功 ...

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

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