#1参考代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<table style="width:100%;height:100%"
id="dgPartPurchase"
toolbar="#partPurchase-toolbar"
idField="part_pc_id"
rownumbers="true"
fitColumns="true"
singleSelect="true"
pagination="true"
pageSize="10"></table>
<div id="partPurchase-toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
οnclick="javascript:$('#dgPartPurchase').edatagrid('addRow')">增加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
οnclick="javascript:$('#dgPartPurchase').edatagrid('destroyRow')">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"
οnclick="javascript:$('#dgPartPurchase').edatagrid('saveRow')">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true"
οnclick="javascript:$('#dgPartPurchase').edatagrid('cancelRow')">取消</a>
</div>
<script>
$('#dgPartPurchase').edatagrid({
loadFilter : partPurchasePagerFilter,
loadMsg : "正在加载数据,请稍等...",
striped : true,
url: 'getPartPurchase',
saveUrl: 'savePartPurchase',
updateUrl: 'updatePartPurchase',
deleteUrl: 'deletePartPurchase',
columns:[[{
field : 'part_pc_id',
editor : 'text',
title : '编号',
hidden : true
},{
field : 'part_id',
title : '配件名称',
width : '10%',
formatter:function(value, row){
return row.part_name
},
editor : {
type : 'combobox',
options : {
url : 'getPartInfo',
valueField : "part_id",
textField : "part_name",
editable : false,
required : true
},
}
},{
field : 'part_pc_count',
title : '入库数量',
width : '10%',
editor : {
type : 'numberbox',
options : {
required : true,
precision : 0,
min : 0
}
}
},{
field : 'part_pc_date',
title : '入库日期',
width : '15%',
editor : {
type : 'datetimebox',
options : {
required : true
}
}
},{
field : 'remark',
title : '备注',
width : '65%',
editor : 'text'
}]]
});
function partPurchasePagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') {
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
</script>
#2要点
*1)table添加属性
pagination="true"
pageSize="10"
*2)datagrid添加属性
loadFilter : partPurchasePagerFilter
*3)datagrid属性的值
function partPurchasePagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') {
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
data.originalRows = (data.rows);
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
#3效果图