一、关于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")) ?  : Convert.ToInt32(RequestString.GetRequestQueryString("rows"));
protected readonly int pageIndex = string.IsNullOrEmpty(RequestString.GetRequestQueryString("page")) ? : 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 = ; 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表格插件使用到此结束

关于Jquery EasyUI中的DataGrid服务器端分页随记的更多相关文章

  1. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  2. jQuery EasyUI教程之datagrid应用(三)

    今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...

  3. jQuery EasyUI教程之datagrid应用(二)

    上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下: 上次显示的结果是这样的 点击查看上篇:jQuery Eas ...

  4. jQuery EasyUI教程之datagrid应用(一)

    最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...

  5. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

  6. Jsp +Js + Jquery + EasyUI + Servlet + Lucene,完成分页

    package loaderman.fy.action; import java.io.IOException; import java.io.PrintWriter; import java.uti ...

  7. jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...

  8. 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦

    现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?

  9. 在jQuery EasyUI中实现对DataGrid进行编辑

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. listview底部增加按钮

    View bottomView=getActivity().getLayoutInflater().inflate(R.layout.btn_my_course, null); myCourses = ...

  2. js中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  3. 最大流Dinic

    不断用BFS构造分层网络,用DFS增广.中途用取指的cur优化DFS. Dinic封装模板: #include <cstdio> #include <iostream> #in ...

  4. 【4】JAVA---地址App小软件(UpdatePanel.class)(表现层)

    修改地址信息的一个表现层类. 必须选中地址,才能修改,否则会弹出窗口提示, 修改地址界面: /* * UpdatePanel.java * */ package cn.hncu.addr.ui; im ...

  5. RMQ算法讲解

    RMQ算法 引入: 例1.题目描述 输入N个数和M次询问,每次询问一个区间[L,R],求第L个数到R个数之间的最大值.   第一种方法:大暴力之术. 但是……时间复杂度最坏会达到 $O(NM)$,一半 ...

  6. python自动化测试遇到的零零碎碎

    1.需求: 提取xx.py中所有的函数名,形成一个类似于索引的参考. 解决方式: grep "def" *.py| awk '{print $2}'|awk -F ':' '{pr ...

  7. Spark Streaming 入门指南

    这篇博客帮你开始使用Apache Spark Streaming和HBase.Spark Streaming是核心Spark API的一个扩展,它能够处理连续数据流. Spark Streaming是 ...

  8. P - 奔小康赚大钱 - hdu 2255(带权值的匹配)

    分析:这是一个KM的模板题,也就不多说了,KM最复杂的情况都能过,下面是没有优化过的代码: ****************************************************** ...

  9. js的深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...

  10. Object -C NSValue -- 笔记

    // //  main.m //  NSValue // //  Created by facial on 26/8/15. //  Copyright (c) 2015 facial_huo. Al ...