MiniUI treeGrid 动态加载数据与静态加载数据的区别

说明：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":"延边朝鲜族自治州"}]

原文地址：https://www.cnblogs.com/boonya/p/11041752.html

时间： 2024-08-02 03:43:59

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

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

JAVA中的静态加载类是编译时刻加载类  动态加载类指的是运行时刻加载类 二者有什么区别呢 举一个例子  现在我创建了一个类  实现的功能假设为通过传入的参数调用具体的类和方法 class office { public static void main(String args[]) { if("word".equals(args[0]) { word w=new word(); word.run(); } if("excel".equals(args[0]) {

Android Fragment生命周期及静态加载

一个Fragment必须总是被嵌入到一个Activity中,它的生命周期直接被其所属的宿主Activity生命周期影响,它的状态会随宿主的状态变化而变化. 要创建一个Fragment 必须创建一个Fragment的子类,或者继承自另一个已经存在的Fragment的子类.并重写onCreateView()方法加载UI. 静态加载两个Fragment,左边显示三个Button,右边显示一个TextView 1 <LinearLayout xmlns:android="http://schema

动态加载vs静态加载

动态加载: 1:灵活,可以在需要的时候用LoadLibrary进行加载,在不需要的时候用FreeLibrary进行卸载,这样可以不必占用内存. 2:可以在没有dll时候发现,而不致程序报错. 3:加载程序中有条件才运行的库. 4:热更新,在不停止程序的前提下进行更新. 5:复杂一些,需要显示获得函数地址. 6:dll没有对应的lib文件,此时只能进行动态加载. 静态加载: 1:简单方便 2:没有dll时,系统报错 3:加载运行很久的库 4:dll必需有相应的lib文件 加载方法: 1.确保有a.

Android学习笔记之fragment的静态加载和动态加载

1.xml布局文件: main.xml 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="match_parent" 3 android:layout_height="match_parent" > 4 5 <LinearLayout 6 android:id="@+i

Java反射之静态加载和动态加载举例小记

静态加载: package com.imooc.加载类; public class Office_Static { public static void main(String[] args) { //new 创建对象,是静态加载类,在编译时刻就需要加载所有的可能使用到的类 if("Word".equals(args[0])){ Word w = new Word(); w.start(); } if("Excel".equals(args[0])){ Excel

include的静态加载和动态加载

动态加载是jsp解析时就生成两个Servlet文件,静态加载是在jsp解析时生成一个Servlet文件. 两个Servlet之间可以传值,所以动态加载的时候可以传值. 静态加载的时候不能传值.

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

下面以Delphi调用触摸屏动态库xtkutility.dll为例子,说明如何静态加载DLL和动态加载DLL. 直接上代码. 1.静态加载示例 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls; type TForm1 = class(TForm) btnEnableTouch: TButton; btnDi

C++之DLL的动态加载与静态加载初尝试

[环境:VS2019] [编写一个DLL并导出函数] 1.新建动态链接库:V_BJZ [framework.h] #pragma once #define WIN32_LEAN_AND_MEAN // 从 Windows 头文件中排除极少使用的内容 // Windows 头文件 #include <windows.h> extern "C" _declspec(dllexport) int ReturnSum(int a, int b); //导出声明,_declspec(

基于jq和json数据实现异步加载动态网页

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="css/iconfont.css"/><link rel="stylesheet" ty