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

9/6/2015来源:Java教程人气:1739

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='+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='+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="#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、显示结果