首页 > 代码库 > EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1、Html代码

 

  1      <script type="text/javascript" src="/js/easyui/jquery.min.js"></script>  2     <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>  3     <script type="text/javascript" src="/js/easyui/easyui-lang-zh_CN.js"></script>  4     <link href="/js/easyui/themes/default/easyui.css" type="text/css" rel="stylesheet">  5     <link href="/js/easyui/themes/icon.css" type="text/css" rel="stylesheet">  6     <link href="/js/easyui/themes/self.css" type="text/css" rel="stylesheet">  7   8   9 <script type="text/javascript">   10      11     //页面加载时调用 12     $(function(){ 13         query(); 14          15     }) 16      17      18     //查询表格信息 19     function query(){ 20         $(#table_data).datagrid({    21         title:数据表信息列表,    22         iconCls:icon-edit,//图标    23         width:auto, 24         height:auto,    25         nowrap: false,    26         striped: true,    27         border: true,    28         collapsible:false,//是否可折叠的    29         fit: true,//自动大小    30         url:app/MetaQuery!metaQuery.action?tName=+$(#tName).val()+"&tCode="+$(#tCode).val()+"&tKind="+$(#tKind).val(),    31         //sortName: ‘code‘,    32         //sortOrder: ‘desc‘,    33         remoteSort:false,     34         idField:tableID,   //单选框id 35         singleSelect:true,//是否单选    36         pagination:true,//分页控件    37         rownumbers:true,//行号    38         frozenColumns:[[    39             {field:ck,checkbox:true}    40         ]],    41         onSelect: function(rowIndex, rowData){//绑定点击一行触发事件 42                 queryField(rowData.tableID);//元字段列表刷新 43             } 44         });    45         //设置分页控件    46         var p = $(#table_data).datagrid(getPager);    47         $(p).pagination({    48             pageSize: 10,//每页显示的记录条数,默认为10    49             pageList: [5,10,15],//可以设置每页记录条数的列表    50             beforePageText: ,//页数文本框前显示的汉字    51             afterPageText: 页    共 {pages} 页,    52             displayMsg: 当前显示 {from} - {to} 条记录   共 {total} 条记录 53             /*onBeforeRefresh:function(){   54                 $(this).pagination(‘loading‘);   55                 alert(‘before refresh‘);   56                 $(this).pagination(‘loaded‘);   57             }*/   58         });  59      60     } 61      62      63     //新增数据库表格 64     function addMeta(){ 65         var height = "400px"; 66         var url = "system/JumpMetaAddOrUpdate!jumpMetaAddOrUpdate.action"; 67         $(#w).window({title:新增数据表信息, 68                         width:580px, 69                         height:height, 70                        content:<iframe scrolling=auto frameborder=0  src=http://www.mamicode.com/+url+ style=width:100%;height:100%;></iframe>}) 71                .window(open).window(center); 72     } 73      74      75     //修改数据库表格 76     function updateMeta(){ 77         var row = $(#table_data).datagrid(getSelected); 78         if(!row){ 79             $.messager.alert(提示, "请选择一条数据信息", info); 80             return; 81         } 82         var url = "system/JumpMetaAddOrUpdate!jumpMetaAddOrUpdate.action?tableID="+row.tableID;//修改数据源访问请求 83         var height = "400px"; 84         $(#w).window({title:修改数据表信息, 85                         width:580px, 86                         height:height, 87                        content:<iframe scrolling=auto frameborder=0  src=http://www.mamicode.com/+url+ style=width:100%;height:100%;></iframe>}) 88                .window(open).window(center); 89     } 90      91      92     //删除数据库表格 93     function deleteMeta(){ 94         var row = $(#table_data).datagrid(getSelected); 95         if(!row){ 96             $.messager.alert(提示, "请选择一条数据信息", info); 97             return; 98         } 99         $.messager.confirm(提示, "确认删除?", function(r){100             if (r){101                     $.ajax({102                         type : "POST",103                         contentType : "application/x-www-form-urlencoded;charset=gbk",104                         url : "app/MetaDelete!metaDelete.action?tableID="+row.tableID,105                         dataType : "json",106                         success : function(data){107                             if(data.result == "success"){108                                 var index = $(#table_data).datagrid(getRowIndex,row);109                                 $(#table_data).datagrid(deleteRow,index);110                                 query();//元字段列表刷新111                                 //loadDataFieldgrid(rowData.sourceID);//数据源字段列表刷新112                             }else{113                                 $.messager.alert(提示, "删除失败", error);114                             }115                         },116                         error : function(){117                             $.messager.alert(提示, "删除失败", error);118                         }119                     });120                 }121         });122     }123     124     125     126     127     128     129     </script> 130 131 132 133  <div  style="float:left; width: 40%;height: 80%;" >134       135         <div id="searchtool" >136             <span>表名:</span><input type="text" id="tName" name="tName" size="15">    137             <span>表代码:</span><input type="text" id="tCode" name="tCode" size="10">138             <span>类别:</span><select class="selectCss" id="tKind" name="tKind">139                                 <option value="0" ></option>140                                 <s:iterator value="#session.dicVO"  var="str">141                                 <option value="<s:property value="http://www.mamicode.com/#str.code"/>" ><s:property value="#str.name"/></option>142                                 </s:iterator>143                               </select>144             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘"   onclick="query()" >查询</a>145             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘"      onclick="addMeta()" >添加</a>146             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘"     onclick="updateMeta()" >修改</a>147             <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-remove‘"   onclick="deleteMeta()" >删除</a>148         </div>149       150       151         <table id="table_data" class="easyui-datagrid" style="width:600px;height=500px"152            rownumbers="true" toolbar="#searchtool" loadMsg="正在查询...">   153             <thead>   154                 <tr>   155                     <th field="tableName"     width="20%">表名</th>   156                     <th field="tableCode"     width="20%">表代码</th>   157                     <th field="dbOwner"       width="20%">权限</th>   158                     <th field="kindStr"       width="20%">类别</th>   159                     <th field="statusStr"     width="13%">状态</th>   160                 </tr>   161             </thead>   162         </table> 163         164      </div>

 

 


 

 

2、Struts2配置文件

 

1 <package name="app" extends="json-default" namespace="/app">   2         <!-- 查询数据库表格信息 -->3         <action name="MetaQuery" class="com.netcom.nkestate.system.action.MetaDataAction" >   4             <result type="json">   5                 <param name="root">result</param>   6             </result>   7         </action>8     </package>

 

 

 

3、Action类

 1 public class MetaDataAction extends ActionSupport implements ServletRequestAware ,SessionAware{ 2     private String rows;//每页显示的记录数    3     private String page;//当前第几页    4     private Map<String , Object> session; 5     private Map<String , Object> responseJson; 6     private JSONObject result;//返回的json    7      8     private MetaTableBO bo = new MetaTableBOImp(); 9 10 11     /**12      * 功能描述:查询数据库表格信息13      */14     public String metaQuery() {   15          HttpServletRequest request = ServletActionContext.getRequest();16          String tableName = request.getParameter("tName");17          String tableCode = request.getParameter("tCode");18          String kind = request.getParameter("tKind")==null?"0":request.getParameter("tKind");19              Page p = new Page();20              p.setCurrentPage(Integer.parseInt(page));//当前页21              p.setPageSize(Integer.parseInt(rows));//每页最大数22              List<MetaTableVO> list;23              try{24                   Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map   25              list = bo.findMetaTable(tableName,tableCode, Integer.parseInt(kind), p);26                     jsonMap.put("total", bo.findMetaTableCount(tableName,tableCode, Integer.parseInt(kind)));//total键 存放总记录数,必须的   27                      jsonMap.put("rows",  list);//rows键 存放每页记录 list   28                   result = JSONObject.fromObject(jsonMap);//格式化result   一定要是JSONObject   29          }catch (Exception e){30              e.printStackTrace();31          }32          return SUCCESS; 33     }34 35 }

 


 

 

 

 


 

4、显示结果

 

 

 


 

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果