一、关于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服务器端分页随记相关推荐

  1. jQuery easyUI中LinkButton获取它的属性值

    jQuery easyUI中LinkButton获取它的属性值 LinkButton按钮如下: <a id="btn" href="#" class=&q ...

  2. jQuery EasyUI教程之datagrid应用-1

    一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...

  3. jQuery easyui中combox 自定义样式 去掉下拉框的空白

    EasyUI中combox下拉框的默认样式 有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白:      <div style ...

  4. easyui中在datagrid中右键出现菜单

    onRowContextMenu,easyui提供了这个方法,来实现右键出现菜单.其中给了三个参数:e,index,row. 大多数人会出现这样的问题,你发现,当你右键的时候,总是浏览器的菜单出现 o ...

  5. easyui中的datagrid的数据加载的问题

    我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird(' ...

  6. EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题

    // 获取选中一行的情况,下面的一个参数可以代表一个DataGrid function getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. v ...

  7. vue操作easyui中的DataGrid

    如何清空之前选择的数据 在vue中选中表格中的数据,将选中的数据放入selection变量中,进行删除操作后,发现selection中仍然保存着已删除的数据,令this.selection=null也 ...

  8. php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站

    Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...

  9. 李炎恢jQuery EasyUI中tree

    效果: index.html <ul id="box"></ul> tree.json [ { "id" : 1, "chil ...

最新文章

  1. oracle中的rowid--伪列-删除表中的重复内容-实用
  2. hadoop mapreduce lzo
  3. 【被网上巨坑了】 win10+php5.6-ts-vc11-x64配置imagick的经历
  4. 编写测试报告,及测试报告模板
  5. 制作你喜欢的双系统启动菜单—VistaBootPRO
  6. 字符型变量ch的值为英文字母 的c语言表达式
  7. 【转载】ASP.Net请求处理机制初步探索之旅 - Part 3 管道
  8. 微博相册图片获取工具
  9. 基于SimpItk的下肢全景X光图像拼接
  10. Linux下Socket编程之UDP原理
  11. 微服务架构与开源框架
  12. 【软件安全:软件安全技术课后习题及答案】
  13. 【读书笔记】赞成功利主义的学习
  14. java 中 public,default,protected,private区别
  15. ATA-over-Ethernet(AoE)介紹
  16. android-tissue_habit-1
  17. 有哪些比较好的wince 播放器 支持硬解的
  18. 将yyyyMMdd格式化为yyyy-MM-dd日期格式及DateFormateUtils、DateUtils的使用
  19. js html转pdf格式转换器,HTML到PDF转换器由jspdf,背景色问题
  20. 关于谭浩强著的C程序设计(第四版)的“规范化的指数形式”和“标准化指数形式”的问题

热门文章

  1. python学习—python中的引用本质
  2. Decoder is not a @Sharable handler, so can't be added or removed multiple times
  3. 运用OpenMP提速图像处理速度
  4. navicate使用小技巧
  5. JavaScript(一)---- 概述
  6. python中的map、filter、reduce函数
  7. iOS - - JSON 和 XML解析
  8. OC基础1:一些基本概念
  9. Ubuntu下配置Apache的Worker模式
  10. Y2K Accounting Bug(poj2586)