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

　　

最终页面显示