EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果
浏览数：184 /
时间：2015年06月09日
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、显示结果
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
