EazyUI TreeGrid paging, query, eazyuitreegrid

EazyUI TreeGrid paging, query, eazyuitreegrid

When I switched from ligerui, I found that the treegrid of eazyui was disgusting, in ligerui, you only need to set the id-pid-treefIle fields to automatically display the tree table, in eazyui, only fileID can be set in id-pid. Pid cannot be set. Only the default _ parentid is supported, the id-pid on my side is a string type of guid. An int example is provided, and the page is disgusting. Each page must have a root node, for example, if there are 11 sub-accounts for each of the 10 sub-pages, the 10 and 11 sub-accounts cannot be seen on the second page, and the chider mode can only be spelled out in the end.

First

 

First, we should drop the entire layout, that is, html code.

<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 

 
In fact, the main thing is this div
<Div id = "dg"> </div>
 
Because json data needs to be manually spliced, the following initialization should be done: href request data is killed, and manual management of paging events is the one on the previous page
Below are all js Code
$ (Function () {// load the log list $ ('# dg '). treegrid ({idField: 'id', treeField: 'title', pageNumber: 1, Title: 'menu list', pageList: [10, 20, 30, 40, 50], striped: true, iconCls: 'icon-list', pagination: true, rownumbers: true, singleSelect: true, method: 'post', fitColumns: true, fit: true, // url: '/Menu/getMenu', loadMsg: 'loading data. Please wait ...... ', Columns: [{field: 'iconurl', title:' icon ', width: 40, align: 'center'}, {field: 'title', Title: 'title', width: 200, align: 'left'}, {field: 'url', title: 'path', width: 240, align: 'left '}, {field: 'state', title: 'state', width: 40, align: 'center', formatter: function (value, row, index) {if (row. state = 0) {return "normal";} if (row. state = 1) {return "disabled";} return row. state ;},{ field: 'order', tit Le: 'display sequence ', width: 40, align: 'center'}, {field: 'createname', title: 'creator ', width: 80, align: 'center'}, {field: 'createtime', title: 'creation time', width: 80, align: 'center'}]}); $ ("# dg "). treegrid ('getpager '). pagination ({onSelectPage: function (pageNum, pageSize) {loadTree (pageNum, pageSize); // All paging-related events on the page control, as long as this is done }}); loadTree (-1,-1); // find $ ('# btnsearch '). bind ('click', function () {loadTree (-1,-1 ); }); // Clear the search box $ ('# btnclear '). bind ('click', function () {$ ("# txtTitle "). textbox ("setValue", ""); $ ("# txtRequestUrl "). textbox ("setValue", ""); $ ("# txtState "). combobox ("setValue", "-1"); $ ("# txtCreateUser "). textbox ("setValue", "") ;}); function loadTree (page, rows) {var param ={}; param. flag = new Date (); if (page =-1 & rows =-1) {var options = $ ("# dg "). treegrid ("options"); param. page = options. pageNumber; param. rows = op Tions. pageSize;} else {param. page = page; param. rows = rows;} param. title = $. trim ($ ("# txtTitle "). textbox ('getvalue'); param. url = $. trim ($ ("# txtRequestUrl "). textbox ('getvalue'); param. state = $ ("# txtState "). combobox ('getvalue') = "-1 "? "": $ ("# TxtState "). combobox ('getvalue'); param. uname = $. trim ($ ("# txtCreateUser "). textbox ('getvalue'); $ ("# dg "). treegrid ("loading"); // The waiting prompt for loading is displayed. $ ("# dg "). treegrid ('getpager '). pagination ("loading"); $. post ("/Menu/getMenu", param, function (data) {var rows = arrayToTree (data. rows, "ID", "PID"); data. rows = rows; $ ("# dg "). treegrid ("loadData", data); $ ("# dg "). treegrid ('getpager '). pagination ("loaded"); $ ("# dg "). treegrid ("loaded ");});}

Finally, convert the json = [] array to the id-pid childer mode method.
// Convert the data format ID and ParentID to the tree format function arrayToTree (data, id, pid) {if (! Data |! Data. length) return []; var targetData = []; // container for storing data (return) var records ={}; var itemLength = data. length; // The number of data sets for (var I = 0; I <itemLength; I ++) {var o = data [I]; records [o [id] = o ;}for (var I = 0; I <itemLength; I ++) {var currentData = data [I]; var parentData = records [currentData [pid]; if (! ParentData) {targetData. push (currentData); continue;} parentData. children = parentData. children | []; parentData. children. push (currentData);} return targetData ;}

 
Then the data returned by the background
 
public void getMenu(){int page = getParaToInt("page");int rows = getParaToInt("rows");String title=getPara("title");String uname=getPara("uname");String url=getPara("url");String state=getPara("state");StringBuffer sql=new StringBuffer();List<Object> paramObj=new ArrayList<Object>();if(!title.equals("")){sql.append(" and a.Title like ?");paramObj.add("%"+title+"%");}if(!url.equals("")){sql.append(" and a.Url like ?");paramObj.add("%"+url+"%");}if(!state.equals("")){sql.append(" and a.State = ?");paramObj.add(state);}if(!uname.equals("")){sql.append(" and b.`Name` like ?");paramObj.add("%"+uname+"%");}sql.append(" ORDER BY `Order` ASC");IMenu menuBusiness = BusinessFactory.CreateMenuBusiness();Page<Menu> logInfo = menuBusiness.GetPageList(page, rows,sql.toString(), paramObj);Map<String, Object> map =new HashMap<String, Object>();map.put("total",logInfo.getTotalRow()); map.put("rows",logInfo.getList()); renderJson(JsonKit.toJson(map));}

 
Finished
 
 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.