Jquery EasyUI操作表格，分页显示

原创 于 2013-11-08 16:53:52 发布 · 3.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文展示了如何使用JSP、Struts2、jQueryEasyUI等技术，实现复杂数据表的动态加载、分页、筛选、排序等功能。通过Action获取数据并以JSON格式返回给前端，前端则利用jQueryEasyUI进行表格展示与交互操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  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页面即可。话不多说，看看效果吧！】
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值