Jquery EasyUI操作表格，分页显示
jopen
11年前
- JSP页面代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Pagination - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/demo.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script> <script> $(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'showAllUser.action', //服务器地址,返回json格式数据 sortName: 'code', sortOrder: 'desc', remoteSort: false, idField:'code', frozenColumns:[[ {field:'ck',checkbox:true}, {title:'代码',field:'code',width:80,sortable:true} ]], columns:[[ {title:'基本信息',colspan:3}, {field:'opt',title:'操作',width:100,align:'center', rowspan:2, formatter:function(value,rec,index){ return '<span style="color:red"><a href="#" onclick="testSave('+rec.code+')">修改</a> <a href="">删除</a></span>'; } } ],[ {field:'name',title:'姓名',width:120}, {field:'addr',title:'地址',width:220,rowspan:2,sortable:true, sorter:function(a,b){ return (a>b?1:-1); } }, {field:'col4',title:'第4列',width:150,rowspan:2} ]], pagination:true, //分页控件 rownumbers:true, //行号 toolbar:[{ id:'btnadd', text:'添加', iconCls:'icon-add', handler:function(){ $('#btnsave').linkbutton('enable'); alert('这里是添加的代码') } },{ id:'btncut', text:'剪切', iconCls:'icon-cut', handler:function(){ $('#btnsave').linkbutton('enable'); alert('这里是剪切的代码') } },'-',{ id:'btnsave', text:'保存', disabled:true, iconCls:'icon-save', handler:function(){ $('#btnsave').linkbutton('disable'); alert('这里是保存的代码') } }] }); var p = $('#test').datagrid('getPager'); $(p).pagination({ pageSize: 10,//每页显示的记录条数，默认为10 pageList:[5,10,15,20],//每页显示几条记录 beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', onBeforeRefresh:function(){ $(this).pagination('loading');//正在加载数据中... alert('before refresh'); $(this).pagination('loaded'); //数据加载完毕 } }); }); function resize(){ $('#test').datagrid('resize', { width:700, height:400 }); } function getSelected(){ var selected = $('#test').datagrid('getSelected'); if (selected){ alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4); } } function getSelections(){ var ids = []; var rows = $('#test').datagrid('getSelections'); for(var i=0;i<rows.length;i++){ ids.push(rows[i].code+":"+rows[i].name+":"+rows[i].addr+":"+rows[i].col4); } alert(ids.join(':')); } function clearSelections(){ $('#test').datagrid('clearSelections'); } function selectRow(){ $('#test').datagrid('selectRow',2); } function selectRecord(){ $('#test').datagrid('selectRecord','002'); } function unselectRow(){ $('#test').datagrid('unselectRow',2); } function mergeCells(){ $('#test').datagrid('mergeCells',{ index:2, field:'addr', rowspan:2, colspan:2 }); } function testSave(value){ alert('测试保存'+value); } </script> </head> <body> <h2> 复杂数据表格 - Complex DataGrid </h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div> 单击按钮试验数据表格各项功能。 <br> </div> </div> <div style="margin: 10px 0;"> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="getSelected()">取得选中项</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="getSelections()">取得所有</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="selectRow()">选择行（2）</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="selectRecord()">通过ID选择行（002）</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="unselectRow()">取消行检查</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="clearSelections()">取消已选</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="resize()">缩放布局（W:700H:400</a> <a href="#" class="easyui-linkbutton" data-options="plain:true" onclick="mergeCells()">合并单元格</a> </div> <table id="test"> </table> </body> </html> - Action（采用Struts2，注意导入struts2对json支持的插件jar包，User已省略）
package com.jingyoutimes.web.action; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import net.sf.json.JSONObject; import com.jingyoutimes.domain.User; import com.opensymphony.xwork2.ActionSupport; public class PageAction extends ActionSupport { private JSONObject result;//返回的json private String rows;//每页显示的记录数 private String page;//当前第几页 public String showAllUserAction() throws Exception { //当前页,page由分页工具负责传过来 int intPage = Integer.parseInt((page == null || page == "0") ? "1":page); //每页显示条数 int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); //每页的开始记录 第一页为1 第二页为number +1 int start = (intPage-1)*number; Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map List<User> users = new ArrayList<User>();//每一页存放的数据 for(int i = start;i < (start+number);i ++){ User user = new User(); user.setCode("00"+i); user.setName("姓名"+i); user.setAddr("地址"+i); users.add(user); } jsonMap.put("total", 20);//total键 存放总记录数，必须的 ,EasyUI根据这个参数，可以计算page和number的值，这个值不是users的长度 jsonMap.put("rows", users);//rows键 存放每页记录 list result = JSONObject.fromObject(jsonMap);//格式化result 一定要是JSONObject return SUCCESS; } public JSONObject getResult() { return result; } public void setResult(JSONObject result) { this.result = result; } public String getRows() { return rows; } public void setRows(String rows) { this.rows = rows; } public String getPage() { return page; } public void setPage(String page) { this.page = page; } } - struts配置文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <constant name="struts.devMode" value="true" /> <package name="default" namespace="/" extends="struts-default"> <result-types> <result-type name="json" class="org.apache.struts2.json.JSONResult" /> </result-types> <action name="showAllUser" class="com.jingyoutimes.web.action.PageAction" method="showAllUserAction"> <result type="json"> <param name="root">result</param> </result> </action> </package> </struts>
【可以先完全复制上面的代码，根据自己的需要进行修改。只要做好了配置，直接访问JSP页面即可。话不多说，看看效果吧！】
来自：http://blog.csdn.net/syb18810107241/article/details/14524183