发布：2014/10/18 8:40:01作者：管理员 来源：本站 浏览次数：1633
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>
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4