記錄東西感覺很痛苦，總結東西很痛苦，麻煩，不過為了下次的方便和知識的牢固以后要堅持總結。
EasyUI DataGrid分頁數據綁定
在解決方案中新建兩個文件FormMain.aspx（html也可以）和Handler1.ashx（一般處理程序）。
前台頁面很簡單
<div id="datagrid"></div>
綁定該datagrid的代碼
<script type="text/javascript">
$(document).ready(function () {
$('#datagrid').datagrid({
url: 'Handler1.ashx',
method: 'get',
showHeader: false,//定義是否顯示行頭
striped: true,//是否顯示斑馬線效果
nowrap: true,//如果為true，則在同一行中顯示數據。設置為true可以提高加載性能
fitColumns: true,//真正的自動展開/收縮列的大小，以適應網格的寬度，防止水平滾動
rownumbers: true,//如果為true，則顯示一個行號列
pagination: true,//如果為true，則在DataGrid控件底部顯示分頁工具欄
idField: 'Box_code',//指明哪一個字段是標識字段
singleSelect: true,
columns: [[
{ field: 'Box_code', title: 'Item ID', width: 100,
styler: function (value, row, index) {
return 'border:0;';
}},
{ field: 'Box_name', title: 'Product', width: 100 },
{ field: 'StorageSite_code', title: 'List Price', width: 100 },
{ field: 'Box_Tag', title: 'unitcost', width: 100 }
]],
onSelect: function (index, row) {
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "selected", 1);
var rows2 = opt.finder.getTr(this, "", "selected", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', 'blue');
$(this).css('background-color', 'lightblue');
}
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', 'blue');
$(this).css('background-color', 'lightblue');
}
});
}
}, //取消選中變灰色
onUnselect: function (index, row) {
var opt = $(this).datagrid("options");
var rows1 = opt.finder.getTr(this, "", "allbody", 1);
var rows2 = opt.finder.getTr(this, "", "allbody", 2);
if (rows1.length > 0) {
$(rows1).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', 'black');
$(this).css('background-color', 'white');
}
});
}
if (rows2.length > 0) {
$(rows2).each(function () {
var tempIndex = parseInt($(this).attr("datagrid-row-index"));
if (tempIndex == index) {
$(this).css('color', 'black');
$(this).css('background-color', 'white');
}
});
}
}
});
//設置分頁控件
var p = $('#datagrid').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每頁顯示的記錄條數，默認為10
pageList: [5, 10, 15],//可以設置每頁記錄條數的列表
beforePageText: '第',//頁數文本框前顯示的漢字
afterPageText: '頁 共 {pages} 頁',
displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
/*onBeforeRefresh:function(){
$(this).pagination('loading');
alert('before refresh');
$(this).pagination('loaded');
}*/
});
});
</script>
一般處理程序代碼，為了演示就在這里直接查數據庫了
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageRows, page;
pageRows = 10;
page = 1;
if (null != context.Request.QueryString["rows"])
{//獲取前台傳過來的每頁顯示數據的條數
pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (null != context.Request.QueryString["page"])
{
//獲取當前的頁碼
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
string sql = "SELECT TOP " + pageRows + " Box_code,Box_name,StorageSite_code,Box_Tag FROM ( SELECT ROW_NUMBER() OVER (ORDER BY Box_Code) AS RowNumber,Box_code,Box_name,StorageSite_code,Box_Tag FROM zh_box ) A WHERE RowNumber > " + pageRows + "*(" + page + "-1)";
DataTable dt = ExecuteQuery(sql);
string sqlCount = "select Count(Box_code) from zh_box";
DataTable dtCount = ExecuteQuery(sqlCount);
string jsonDt = DataTable2Json(dt, Convert.ToInt32(dtCount.Rows[0][0]));
context.Response.Write(jsonDt);
}
/// <summary>
/// dataTable轉換成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public string DataTable2Json(DataTable dt,int allCount)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{");
jsonBuilder.Append("\"total\":" + allCount + ",\"rows\":");
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
最終頁面顯示
