EasyUI DataGrid分页数据绑定

时间:2023-11-21 09:32:56

记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结。

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

  

最终页面显示

EasyUI DataGrid分页数据绑定