Go语言视频零基础入门到精通

admin

由于项目原因，用了jquery EasyUI 感觉界面不错，皮肤样式少点，可是官网最近打不开了，资料比较少，给的demo没有想要的效果，今天在用datagrid 做分页显示的时候，折腾了半天，网上的资料也比较少，后自己动手，终于解决，废话不说，开始：
datagrid分页 有一个附加的分页控件，只需后台获取分页控件自动提交的两个参数rows每页显示的记录数和page;//当前第几页
然后读取相应页数的记录，和总记录数total一块返回即可 界面如下：


1、下边是datagrid的显示对话框，我直接用table把列头显示出来，感觉比用js写要易于阅读

1. <table id="list_data" cellspacing="0" cellpadding="0">  
2.     <thead>  
3.         <tr>  
4.             <th field="fldAppDept" width="100">部门</th>  
5.             <th field="fldAppNode" width="100">网站</th>  
6.             <th field="fldAppName" width="100">名称</th>  
7.             <th field="fldAppMgr" width="100">管理员</th>  
8.             <th field="fldAppNote" width="100">注释</th>  
9.             <th field="fldAppType" width="100">类型</th>  
10.             <th field="fldTelphone" width="100">电话</th>  
11.             <th field="fldAppImg" width="100">职务</th>  
12.             <th field="fldAppMonitor" width="100">启用监测</th>  
13.             <th field="fldAppLevel" width="100">要重级别</th>  
14.         </tr>  
15.     </thead>  
16. </table>  

复制代码

2、js代码，用于构建datagrid
注意 要想显示分页控件，pagination属性必须为true

1. //datagrid初始化  
2.     $("#list_data").datagrid({  
3.         title:"应用系统列表",  
4.         iconCls:"icon-edit",//图标  
5.         width: 700,  
6.         height: "auto",  
7.         nowrap: false,  
8.         striped: true,  
9.         border: true,  
10.         collapsible:false,//是否可折叠的  
11.         fit: true,//自动大小  
12.         url:"listApp.action",  
13.         //sortName: "code",  
14.         //sortOrder: "desc",  
15.         remoteSort:false,   
16.         idField:"fldId",  
17.         singleSelect:false,//是否单选  
18.         pagination:true,//分页控件  
19.         rownumbers:true,//行号  
20.         frozenColumns:[[  
21.             {field:"ck",checkbox:true}  
22.         ]],  
23.         toolbar: [{  
24.             text: "添加",  
25.             iconCls: "icon-add",  
26.             handler: function() {  
27.                 openDialog("add_dialog","add");  
28.             }  
29.         }, "-", {  
30.             text: "修改",  
31.             iconCls: "icon-edit",  
32.             handler: function() {  
33.                 openDialog("add_dialog","edit");  
34.             }  
35.         }, "-",{  
36.             text: "删除",  
37.             iconCls: "icon-remove",  
38.             handler: function(){  
39.                 delAppInfo();  
40.             }  
41.         }],  
42.     });  
43.     //设置分页控件  
44.     var p = $("#list_data").datagrid("getPager");  
45.     $(p).pagination({  
46.         pageSize: 10,//每页显示的记录条数，默认为10  
47.         pageList: [5,10,15],//可以设置每页记录条数的列表  
48.         beforePageText: "第",//页数文本框前显示的汉字  
49.         afterPageText: "页    共 {pages} 页",  
50.         displayMsg: "当前显示 {from} - {to} 条记录   共 {total} 条记录",  
51.         /*onBeforeRefresh:function(){
52.             $(this).pagination("loading");
53.             alert("before refresh");
54.             $(this).pagination("loaded");
55.         }*/  
56.     });  

复制代码

3、后台我是通过struts2处理的数据 返回json串

1. private JSONObject result;//返回的json  
2.       
3.     private String rows;//每页显示的记录数  
4.       
5.     private String page;//当前第几页  
6.   
7.         private AppServiceInter appService;  
8.   
9.     public JSONObject getResult() {  
10.         return result;  
11.     }  
12.     public void setResult(JSONObject result) {  
13.         this.result = result;  
14.     }  
15.     public void setAppService(AppServiceInter appService) {  
16.         this.appService = appService;  
17.     }  
18.   
19.         public String getRows() {  
20.         return rows;  
21.     }  
22.     public void setRows(String rows) {  
23.         this.rows = rows;  
24.     }  
25.     public String getPage() {  
26.         return page;  
27.     }  
28.     public void setPage(String page) {  
29.         this.page = page;  
30.     }  
31.         /**
32.      * 查询应用系统
33.      * @return
34.      */  
35.     public String listApp() {  
36.         System.out.println("---------------");  
37.         //当前页  
38.         int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);  
39.         //每页显示条数  
40.         int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);  
41.         //每页的开始记录  第一页为1  第二页为number +1   
42.         int start = (intPage-1)*number;  
43.          
44.         List<TblApp> list = appService.findByPageApp(start,number);//每页的数据，放入list  
45.             Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map  
46.             jsonMap.put("total", appService.getCountApp());//total键 存放总记录数，必须的  
47.             jsonMap.put("rows", list);//rows键 存放每页记录 list  
48.             result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject  
49.          
50.         //result = JSONArray.fromObject(jsonMap);  
51.         return SUCCESS;  
52.     }  

复制代码

4、附上struts.xml配置文件

1. <package name="app" extends="json-default">  
2.         <action name="listApp" class="appAction" method="listApp">  
3.             <result type="json">  
4.                 <param name="root">result</param>  
5.             </result>  
6.         </action>  
7. </package>  

复制代码

特写出这些，方便自己或他人以后参考 ，如果有什么问题大家可以留言......