记录东西感觉很痛苦，总结东西很痛苦，麻烦，不过为了下次的方便和知识的牢固以后要坚持总结。
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();
}
最终页面显示
