一、關于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> View Code

上面是與服務器端通訊的JS代碼

<table id="TableGrid" width="95%"></table> View Code

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;}} View Code

ashx服務器端處理代碼

?

好了，完整的DataGrid表格插件使用到此結束

轉載于:https://www.cnblogs.com/chusdd/p/3608198.html

總結

以上是生活随笔為你收集整理的关于Jquery EasyUI中的DataGrid服务器端分页随记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。