首页 > 代码库 > 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 分页效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。