一、关于DataGrid的分页和排序参数
对于分页参数不需要用户指定,程序在AJAX请求的时候会带上分页和排序需要的参数
每页显示条数:rows
当前页:page
排序字段:sort 【multiSort如果设置为true,则会发送多个排序字段,如:id,time,最新的在最后】
排序类型:order 【multiSort如果设置为true,则会发送多个排序字段排序类型,如:asc,desc,最新的在最后】
二、关于DataGrid传递参数
传递参数可以使用属性:queryParams
形式:queryParams:{ "method": "LogInfoList", "LogName": $.trim($("#LogName").val()), "BeginTime": $.trim($("#BeginTime").val()), "EndTime": $.trim($("#EndTime").val()) }
三、实例代码
<script language="javascript"> $(function () { ListData(); }); function ListData() { $("#TableGrid").datagrid({ title: "用户信息表", rownumbers: true, singleSelect: false, url: ‘Handler.ashx‘, method: ‘get‘, autoRowHeight: false, pagination: true, pageSize: 20, pageList: [20, 30, 50, 80, 100], multiSort: true, nowrap: true, fitColumns: true, toolbar: toolbar, frozenColumns: [[ { field: ‘ck‘, width: 80, checkbox: true }, { field: ‘Id‘, width: 80, hidden: true }, { field: ‘UserName‘, title: "登录名", width: 150, sortable: true }, { field: ‘RoleId‘, title: "所属角色", width: 100, sortable: true }, { field: ‘TrueName‘, title: "真实姓名", width: 100, sortable: true } ]], columns: [[ { field: ‘Telphone‘, title: "手机号码", width: 100, sortable: true }, { field: ‘Email‘, title: "Email", width: 150, sortable: true }, { field: ‘AddDate‘, title: "日期", width: 200, sortable: true } ]], onDblClickRow: onDblClickRow }); } var toolbar = [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () { OpenUrl(‘../AdminInfo/Operate.aspx?action=Add‘, ‘添加新用户‘, 600, 400); } }, { text: ‘批量删除‘, iconCls: ‘icon-cut‘, handler: function () { var row = $("#TableGrid").datagrid(‘getSelected‘); if (row) { DelUrl(‘../AdminInfo/Del.aspx‘, row.Id); } } }]; function onDblClickRow(index) { var row = $("#TableGrid").datagrid(‘getSelected‘); if (row) { OpenUrl(‘../AdminInfo/Operate.aspx?action=Edit&id=‘ + row.Id + ‘‘, ‘编辑用户信息‘, 600, 400); } } </script>
上面是与服务器端通讯的JS代码
<table id="TableGrid" width="95%"> </table>
html代码非常简单
protected readonly int pageSize = string.IsNullOrEmpty(RequestString.GetRequestQueryString("rows")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("rows")); protected readonly int pageIndex = string.IsNullOrEmpty(RequestString.GetRequestQueryString("page")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("page")); protected readonly string fidSort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("sort")) ? "Id" : RequestString.GetRequestQueryString("sort"); protected readonly bool sort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("order")) ? true : RequestString.GetRequestQueryString("order") == "asc" ? false : true; public void ProcessRequest(HttpContext context) { context.Response.AddHeader("Content-Type", "text/json; charset=UTF-8"); int counts = 0; DataTable dt = pageHelper.Page("AdminInfo", "Id,RoleId,UserName,TrueName,Telphone,Email,AddDate", pageSize, pageIndex, out counts, fidSort, sort, sqlWhere.ToString(), fidSort); DataTableToJson(context, counts, dt); } public bool IsReusable { get { return false; } }
ashx服务器端处理代码
好了,完整的DataGrid表格插件使用到此结束