1.分页折行导致显示问题
问题描述：
1)缩小datagrid的宽度，直至分页刚刚折行。
2)此时再隐藏pageList按钮和刷新按钮。此时table底部将出现一个白条。
$('#dg').datagrid({data: getData()}).datagrid('clientPaging')
.datagrid("getPager").pagination({showRefresh: false, showPageList: false});
问题解决方法：
在用代码隐藏pageList和刷新按钮后，调用datagrid的resize方法。
$('#dg').datagrid({data: getData()}).datagrid('clientPaging')
.datagrid("getPager").pagination({showRefresh: false, showPageList: false});
$('#dg').datagrid('resize');提示：如果没有问题，就不要乱用resize，否则可能有其他显示问题。
2.datagrid客户端分页时显示空行(ShowEmptyRows)
point:使用datagrid的尾行(Foot rows)作为行的补充，动态的去添加尾行的个数，从而达到显示空行的效果。
<html>
<head>
<title>test</title>
<script type="text/javascript" src="../components/easyui_1.4/easyui-include.js"></script>
</head>
<body>
<table id="dg" title="Client Side Pagination" style="width:680px;" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:5,
pageList:[5],
showFooter: true">
<thead>
<tr>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Inv No 1</td>
<td>2016-03-01</td>
<td>Name 1</td>
<td>339</td>
<td>240</td>
<td>81360</td>
<td>Note 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>2016-03-01</td>
<td>Name 2</td>
<td>639</td>
<td>95</td>
<td>60705</td>
<td>Note 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>2016-03-01</td>
<td>Name 3</td>
<td>440</td>
<td>245</td>
<td>107800</td>
<td>Note 3</td>
</tr>
<tr>
<td>Inv No 4</td>
<td>2016-03-01</td>
<td>Name 4</td>
<td>828</td>
<td>894</td>
<td>740232</td>
<td>Note 4</td>
</tr>
<tr>
<td>Inv No 5</td>
<td>2016-03-01</td>
<td>Name 5</td>
<td>189</td>
<td>654</td>
<td>123606</td>
<td>Note 5</td>
</tr>
<tr>
<td>Inv No 6</td>
<td>2016-03-01</td>
<td>Name 6</td>
<td>475</td>
<td>766</td>
<td>363850</td>
<td>Note 6</td>
</tr>
<tr>
<td>Inv No 7</td>
<td>2016-03-01</td>
<td>Name 7</td>
<td>367</td>
<td>287</td>
<td>105329</td>
<td>Note 7</td>
</tr>
<tr>
<td>Inv No 8</td>
<td>2016-03-01</td>
<td>Name 8</td>
<td>251</td>
<td>883</td>
<td>221633</td>
<td>Note 8</td>
</tr>
</tbody>
</table>
<script>
// 分页
function pagerFilter(data, datagrid) {
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
data = {
total: data.length,
rows: data
}
}
var opts = datagrid.datagrid('options');
var pager = datagrid.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
datagrid.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));
var pageData = new Object();
pageData.data = data;
//判断是否添加空行
var min = data.total - start
var needCreateCount;
if (min < opts.pageSize) {
//差几个 补几个
needCreateCount = opts.pageSize - min;
}
pageData.needCreateCount = needCreateCount;
return pageData;
}
function pf_dg(data) {
var pageData = pagerFilter(data, $(this));
if (pageData.needCreateCount != undefined || pageData.needCreateCount != 0) {
var footList = new Array();
while (pageData.needCreateCount > 0) {
footList.push(new Object());
pageData.needCreateCount--;
}
$('#dg').datagrid('reloadFooter', footList);
}
return pageData.data;
}
$(function () {
$('#dg').datagrid({loadFilter: pf_dg})
.datagrid("getPager").pagination({showRefresh: false, showPageList: false});
$("#dg").datagrid("resize");
});
</script>
</body>
</html>
不足：在没有横向滚动条的状态下，可以正常显示。但是如果table的宽度小，出现横向滚动条的话，会有下面的问题。
虽然加上fitColumns:true会没有滚动条，但是里面的文字还是会看不清，目前还不知道怎么解，欢迎大家来共享思路。
