关于Jquery EasyUI中的DataGrid服务器端分页随记
一、关于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服务器端分页随记相关推荐
- jQuery easyUI中LinkButton获取它的属性值
jQuery easyUI中LinkButton获取它的属性值 LinkButton按钮如下: <a id="btn" href="#" class=&q ...
- jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- jQuery easyui中combox 自定义样式 去掉下拉框的空白
EasyUI中combox下拉框的默认样式 有一大块空白,非常影响美观.使用"panelHeight="auto"属性可以去掉空白: <div style ...
- easyui中在datagrid中右键出现菜单
onRowContextMenu,easyui提供了这个方法,来实现右键出现菜单.其中给了三个参数:e,index,row. 大多数人会出现这样的问题,你发现,当你右键的时候,总是浏览器的菜单出现 o ...
- easyui中的datagrid的数据加载的问题
我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird(' ...
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
// 获取选中一行的情况,下面的一个参数可以代表一个DataGrid function getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. v ...
- vue操作easyui中的DataGrid
如何清空之前选择的数据 在vue中选中表格中的数据,将选中的数据放入selection变量中,进行删除操作后,发现selection中仍然保存着已删除的数据,令this.selection=null也 ...
- php layout布局文件,layout(布局) - jQuery EasyUI中文文档 - EasyUI中文站
Layout(布局) 使用$.fn.layout.defaults重写默认值对象. 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽 ...
- 李炎恢jQuery EasyUI中tree
效果: index.html <ul id="box"></ul> tree.json [ { "id" : 1, "chil ...
最新文章
- oracle中的rowid--伪列-删除表中的重复内容-实用
- hadoop mapreduce lzo
- 【被网上巨坑了】 win10+php5.6-ts-vc11-x64配置imagick的经历
- 编写测试报告,及测试报告模板
- 制作你喜欢的双系统启动菜单—VistaBootPRO
- 字符型变量ch的值为英文字母 的c语言表达式
- 【转载】ASP.Net请求处理机制初步探索之旅 - Part 3 管道
- 微博相册图片获取工具
- 基于SimpItk的下肢全景X光图像拼接
- Linux下Socket编程之UDP原理
- 微服务架构与开源框架
- 【软件安全:软件安全技术课后习题及答案】
- 【读书笔记】赞成功利主义的学习
- java 中 public,default,protected,private区别
- ATA-over-Ethernet(AoE)介紹
- android-tissue_habit-1
- 有哪些比较好的wince 播放器 支持硬解的
- 将yyyyMMdd格式化为yyyy-MM-dd日期格式及DateFormateUtils、DateUtils的使用
- js html转pdf格式转换器,HTML到PDF转换器由jspdf,背景色问题
- 关于谭浩强著的C程序设计(第四版)的“规范化的指数形式”和“标准化指数形式”的问题