Jquery EasyUI操作表格,分页显示

jopen 8年前

  1. 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>
  2. 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;   }  } 
  3. 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页面即可。话不多说,看看效果吧!】20131111155108000.jpg


来自:http://blog.csdn.net/syb18810107241/article/details/14524183