Jquery EasyUI操作表格,分頁顯示
- JSP頁面代碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri=" $(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></pre></li>
- 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; }
} </pre></li>
- struts配置文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" ";
<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></pre>
【可以先完全復制上面的代碼,根據自己的需要進行修改。只要做好了配置,直接訪問JSP頁面即可。話不多說,看看效果吧!】</li> </ol>
來自:http://blog.csdn.net/syb18810107241/article/details/14524183
- Action(采用Struts2,注意導入struts2對json支持的插件jar包,User已省略)
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!