EasyUI DataGrid分頁數據綁定

記錄東西感受很痛苦，總結東西很痛苦，麻煩，不過爲了下次的方便和知識的牢固之後要堅持總結。

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();
}

　　

最終頁面顯示