Eazyui Treegrid Paging, querying

Source: Internet
Author: User

Say just from Ligerui turn over when found Eazyui Treegrid good disgusting said, in Ligerui City Treegrid only need to set id-pid-treefile three fields will automatically help you appear tree table, and in Eazyui Id-pid can only be set Fileid can not set PID only with the default _parentid the most disgusting place is only supported by the type of the id-pid mode, and my side of the id-pid is the string type of the GUID, finally made an int example, and found that pagination is disgusting Each page must have a root node, such as 10 per page A followed by 11 children, on the second page can not see the 10 and 11 children, there is no way to finally can only spell Chider mode.

First on

First, throw the entire layout, which is the HTML code.

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><%string path = Request.getcontextpath () ; String basepath = request.getscheme () + "://" + request.getservername () + ":" + request.getserverport () + path + "/";%&GT;&L t;! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >


Actually, the main thing is this div.

<div id= "DG" ></div>

Because of the need to manually splicing JSON data, so the following initialization of the HREF request data to kill, and manually manage paging events that is the next page of God Horse

Here is all the JS code

$ (function () {///load 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: ' POS T ', Fitcolumns:true,fit:true,//url: '/menu/getmenu ', loadmsg: ' Data loading please later ... ', columns: [[{field: ' IconUrl ', t               Itle: ' Icon ', width:40,align: ' Center '}, {field: ' title ', Title: ' title ', Width:200,align: ' Left '}, {field: ' Url ', title: ' Path ', width:240,align: ' Left '}, {field: ' state ', title: ' Status ', Width:40,alig N: ' Center ', formatter:function (value,row,index) {if (row.                state==0) {return "normal"; } if (row.             State==1) {return "disabled"; } return row.              State; }}, {field: ' Order ', Title: ' Display Order ', Width:40,align: ' Center '}, {field: ' Createname ', title : ' Create people ', 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 paging control, as long as this is good}); Loadtree ( -1,-1);//Find $ (' #btnSearch '). Bind (' click ', Function () {loadtree ( -1,-1);});    Empty the Lookup box $ (' #btnClear '). Bind (' click ', Function () {$ ("#txtTitle"). TextBox ("SetValue", "" ");    $ ("#txtRequestUrl"). TextBox ("SetValue", "" ");    $ ("#txtState"). ComboBox ("SetValue", "1"); $ ("#txtCreateUser"). TextBox ("SetValue", "" "); });}); function Loadtree (page,rows) {var param={};p aram.flag=new Date (); if (page==-1&&rows==-1) {var options=$ ("#dg" ). Treegrid ("Options");p aram.page=options.pagenumber;param.rows=options.pagesize;} Else{param.page=page;param.rows=rows;} Param.title=$.trim ($ ("#txtTitle"). TextBox (' GetValue '));p aram.url= $.trim ($ ("#txtRequestUrl"). TextBox (' GetValue ') ));p aram.state= $ ("#txtState"). ComboBox (' getValue ') = = "-1"? "": $ ("#txtStatE "). ComboBox (' GetValue ');p aram.uname= $.trim ($ (" #txtCreateUser "). TextBox (' GetValue ')); $ (" #dg "). Treegrid (" Loading ");//Displays the waiting prompt (" #dg ") that is being loaded. Treegrid (' Getpager '). Pagination (" Loading "); $.post ("/menu/getmenu ", Param, function (data) {var rows=arraytotree (data.rows, "ID", "PID");d ata.rows=rows;$ ("#dg"). Treegrid ("LoadData", data); $ (" #dg "). Treegrid (' Getpager '). Pagination (" loaded "); $ (" #dg "). Treegrid (" Loaded ");});}


Finally, the json=[] array is turned into a id-pid Childer mode method

Convert the data format of ID, parentid to 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 in 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 NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Eazyui Treegrid Paging, querying

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.