MiniUI treeGrid difference between dynamic and static loading data loading data

Others 2019-06-18 01:20:17 views: null

Description: treegrid static data loading data structure is a tree comprising a set of children nodes, while dynamic loading specific data items List structure.

Static load data

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"rangers>= "Center"headerAlign= "NAME"  name </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"</total number of days patrol>= "Center"align = leftdiv > 
                < div width = "80" Field = "AVE_TIME" headerAlign = "Center" align = left = "Center" > The average time (hours / day) </ div > 
                < div width = "80" Field = "AVE_MILEAGE" headerAlign = "Center" align = left = "Center" > average mileage (km / day) </ div > 
            </ div > 
</ div > 
 < Script of the 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": .007568156838012041,
    "TOTAL_TIME": 0.6958378635477445,
    "PARID": 1,
    "TOTAL_MILEAGE": 0.2077248188731492,
    "NAME": "Baishan City Forestry Bureau (total field of state-owned forest)"
    }
 ]
}
]

 

Dynamic load data

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"  > rangers </ div > 
                < div width = "80" Field = "TOTAL_TIME" headerAlign = "Center" align = left = "Center" > total length (h) </ div > 
                < div width = " 80 " Field =" TOTAL_MILEAGE " headerAlign =" Center " align = left =" Center " > total mileage (km) </ div > 
                < div width =" 80 " field="TOTAL_DAY" headerAlign="center" align= "Center" > the total number of patrol days </ div > 
                < div width = "80" Field = "AVE_TIME" headerAlign = "Center" align = left = "Center" > The average time (hours / day) </ div > 
                < div width = "80" Field = "AVE_MILEAGE" headerAlign = "Center" align = left = "Center" > average mileage (km / day) </ 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":"延边朝鲜族自治州"}]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":"延边朝鲜族自治州"}]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":"延边朝鲜族自治州"}]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":"延边朝鲜族自治州"}]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":"延边朝鲜族自治州"}]0.08594702941741394, "TOTAL_TIME": 0.3096787251276627, "PARID": 2, "TOTAL_MILEAGE": 0.2505683920373972, "NAME": "Dehui City Forestry Bureau (total field of state-owned forest)"}, { "NSJGID": 7, "TOTAL_DAY": 167, "AVE_MILEAGE": 0.9565925005085681, "AVE_TIME": 0.8810752861214618, "TOTAL_TIME": 0.609676187502881, "PARID": 1, "TOTAL_MILEAGE": 0.10950680097424559, "NAME": "Yanbian"}]0.08594702941741394, "TOTAL_TIME": 0.3096787251276627, "PARID": 2, "TOTAL_MILEAGE": 0.2505683920373972, "NAME": "Dehui City Forestry Bureau (total field of state-owned forest)"}, { "NSJGID": 7, "TOTAL_DAY": 167, "AVE_MILEAGE": 0.9565925005085681, "AVE_TIME": 0.8810752861214618, "TOTAL_TIME": 0.609676187502881, "PARID": 1, "TOTAL_MILEAGE": 0.10950680097424559, "NAME": "Yanbian"}]"NAME": "Yanbian"}]"NAME": "Yanbian"}]

 

Guess you like

Origin www.cnblogs.com/boonya/p/11041752.html
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com