jqgrid——treegrid动态异步加载数据

悠悠 2021-06-24 13:59 534阅读 0赞

jqgrid的treegrid插件，有两种数据结构：

第一种：可以实现动态加载数据

1.  \{  
2.      "total":11,  
3.      "page":1,  
4.      "records":11,  
5.      "rows":\[  
6.          \{ "id":1, "cell":\["第一級1",1,"地址1",0,**null**,**false**,**false**\]\},  
7.          \{ "id":3, "cell":\["第二級1",3,"地址2",1,1,**true**,**false**\]\},  
8.          \{ "id":2, "cell":\["第一級2",2,"地址3",0,**null**,**true**,**false**\]\}  
9.      \]  
10. \}

如果大量关联数据，最好在我们需要的时候再加载它，就是当点击父节点时才会加载子节点数据。初始化时只显示根元素，点击根元素时，grid自动检查是否存在子节点数据，没有就传递需要的参数到服务器加载需要信息，所以level\_field 和 isLeaf field 非常重要。

仔细观察在cell数组，我们只定义了4列，非treeGrid时我们返回4列就可以了

但是在adjacency方式我们需要在原本的4列数据之后再增加如下字段数据来支持TreeGrid

adjacency方式：

<table style="border:1px solid silver; border-collapse:collapse; color:rgb(35,35,35); font-family:Verdana,Arial,helvetica,sans-seriff; font-size:14px; line-height:25.2000007629395px; height:105px; width:342px"> 
 <tbody> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">列</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">解释</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">level_field&nbsp;</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">节点的级别，默认最高级为0</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">parent_id_field</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">该行数据父节点的id</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">leaf_field</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">是否为叶节点，为true时表示该节点下面没有子节点了</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">expanded_field</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">是否默认展开状态</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">loaded_field</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">是否已经加载过子节点（为false时点击节点会自动加载子节点）</td> 
  </tr> 
  <tr> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">icon_field</td> 
   <td style="border:1px solid silver; border-collapse:collapse; padding:3px">图标</td> 
  </tr> 
 </tbody> 
</table>

实例：

tree.jsp:

<html>
     <head>
      <title> ZTREE DEMO </title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" type="text/css" media="screen" href="treeGrid/css/jquery-ui-custom.css" />
      <link rel="stylesheet" href="<%=basePath%>treeGrid/css/jquery-ui.theme.min.css" />
      <link rel="stylesheet" type="text/css" media="screen" href="treeGrid/css/ui.jqgrid.css" />
      
      <script src="<%=basePath%>js/jquery-1.10.2.min.js" type="text/javascript"></script>
      <script src="<%=basePath%>treeGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
      <script src="<%=basePath%>treeGrid/js/jquery.jqGrid.src.js" type="text/javascript"></script>
      <script src="<%=basePath%>treeGrid/src/grid.treegrid.js" type="text/javascript"></script>
    	
      <script type="text/javascript">
    	$(document).ready(function() {
    		
    		
    		
    		jQuery("#list3").jqGrid({
                treeGrid: true,
                treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested
                ExpandColumn : 'name',
                url: '<%=basePath %>ajax/contract/treeJson1.action',
                datatype: 'json',
                //mtype: "POST",
                ExpandColClick: true, 
                colNames: ["姓名","id","地址"],  
                colModel: [
                    {name: 'name', index: 'name',width:110},
    				{name:'id',index: 'id',hidden:true},
                    {name: 'address', index: 'address',width:110}
                ], 	
                jsonReader: {  
                    root: "rows",
                    total: "total",  
                    repeatitems: true  
                },
    	    pager: "false",
                caption: "jqGrid 动态(异步)树表格",                
                height: "auto"    // 設为具體數值則會根據實際記錄數出現垂直滾動條              
            });
    	});
       </script>
    </head>
    <body>
    <div>
    	<table id="list2"></table>
     <div id="pager2"></div>
     <hr></hr>
     <table id="list3"></table>
    </div>
    </body>
    </html>

注：

1、ExpandColumn : 'name',必须是第一列(貌似是jqgrid的bug)；

2、cell中的内容：后四个属性是固定的分别是：level\_field、parent\_id\_field、leaf\_field、expanded\_field；前面的属性顺序要和columnModule的顺序一致。

action:

public void treeJson1() {
    		JSONObject jo =null;
    		Long nodeId = getLongParameter("nodeid");
    		Long level = getLongParameter("n_level");
    		        try {
    		        
    		        jo = getData1(nodeId,level);
    		        } catch (Exception e) {
    		            logger.error("合同查询失败，" + e);
    		        }
    		        
    		        super.renderJson(jo);
    	}
    
    	private JSONObject getData1(Long nodeId,Long level) {
    		JSONObject jo = new JSONObject();
    		if (nodeId == null) {//首次
    			JSONArray ja = new JSONArray();
    			ja.add("{\"id\":1, \"cell\":[\"-第一級1\",1,\"sdf\",0,null,false,false]}");
    			//ja.add("{\"id\":2, \"cell\":[\"-第一級2\",2,\"sdf\",1,1,true,false]}");
    			ja.add("{\"id\":3, \"cell\":[\"-第二級1\",3,\"sdf\",0,null,true,false]}");
    	
    			jo.put("total", 2);
    			jo.put("page", 1);
    			jo.put("records", 2);
    			jo.put("rows", ja);
    		} else {
    			if (nodeId == 1) {
    				JSONArray ja = new JSONArray();
    				ja.add("{\"id\":4, \"cell\":[\"-第一級2\",4,\"sdf\",1,1,false,false]}");
    				ja.add("{\"id\":2, \"cell\":[\"-第一級3\",2,\"sdf\",1,1,true,false]}");
    		
    				jo.put("total", 2);
    				jo.put("page", 1);
    				jo.put("records", 2);
    				jo.put("rows", ja);
    			} else if (nodeId == 4) {
    				JSONArray ja = new JSONArray();
    				ja.add("{\"id\":5, \"cell\":[\"-第一級5\",5,\"sdf\",2,4,true,false]}");
    		
    				jo.put("total", 1);
    				jo.put("page", 1);
    				jo.put("records", 1);
    				jo.put("rows", ja);
    			}
    		}
    	
    		return jo;
    	}

第二种：只能实现同步加载数据，无法实现异步动态加载数据

var lastsel;  
jQuery("\#list2").jqGrid(\{  
                treeGrid: true,  
                treeGridModel: 'adjacency', //treeGrid模式，跟json元數據有關 ,adjacency/nested  
                ExpandColumn : 'username',  
                scroll: "true",  
                url: 'mydata.json',  
                datatype: 'json',  
                colNames:\['編號','姓名','密碼','年齡','地址','出生日期'\],  
                colModel:\[  
                    \{name:'id',index:'id', width:90,sorttype:"int",hidden:true\},  
                    \{name:'username',index:'username', width:110,sorttype:"int",editable: false\},  
                    \{name:'password',index:'password', width:80,editable: true\},  
                    \{name:'age',index:'age', width:80,editable: true\},  
                    \{name:'address',index:'address', width:80,editable: true\},  
                    \{name:'time',index:'time', width:80,sorttype:"date",editable: true\}  
                \],  
onSelectRow: function(id)\{  
if(id && id!==lastsel)\{  
jQuery('\#list2').jqGrid('restoreRow',lastsel);  
jQuery('\#list2').jqGrid('editRow',id,true);  
lastsel=id;  
\}  
\},  
                pager: "false",  
                sortname: 'id',  
                sortorder: "desc",  
  
  
                jsonReader: \{  
                    root: "dataRows",  
                    repeatitems : false  
                \},  
                treeReader : \{  
                    level\_field: "level",  
                    parent\_id\_field: "parent",  
                    leaf\_field: "isLeaf",  
                    expanded\_field: "expanded"  
                \},  
                caption: "jqGrid test",  
                mtype: "POST",  
                height: "auto",    // 設为具體數值則會根據實際記錄數出現垂直滾動條  
                rowNum : "-1",     // 顯示全部記錄  
                shrinkToFit:false  // 控制水平滾動條  
            \});

mydata.json:

\[  
\{"id":0,"username":"王三","level":0,"address":"USA","isLeaf":false,"age":20,"expanded":true,"password":"123","time":11111\},  
\{"id":1,"username":"王三","level":1,"address":"USA","isLeaf":false,"age":21,"parent":0,"expanded":true,"password":"123","time":11111\},  
\{"id":2,"username":"王三","level":2,"address":"USA","isLeaf":true,"age":22,"parent":1,"expanded":true,"password":"123","time":11111\}  
\]