JQueryEasyUI-DataGrid显示数据，条件查询，排序及分页
<html>
<head>
<title></title>
<script src="/jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#cc").layout();
})
</script>
</head>
<body>
<div id="cc" fit="true">
<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
</div>
<div data-options="region:'west',title:'West',split:true" style="width: 100px;">
</div>
<div data-options="region:'center',title:'我是中间面板'" style="overflow:hidden;" href='/tabs/tabChild/UserManager.htm'>
</div>
</div>
</body>
</html>
-------------------UserManager.html-------------------
<script type="text/javascript">
$(function () {
$("#divLayout").layout();
$("#tblUserList").datagrid({
url: '/ashx/UserManager.ashx',
title: '',
loadMsg: '数据加载中,请稍候...',
nowrap: false,
pageSize: 10,
pageList: [10, 20, 30],
columns: [[ //注意要两个嵌套的中括号
{ field: 'Id', title: '编号', width: 120, align: 'center', sortable: true },
{ field: 'LoginId', title: '用户ID', width: 120, align: 'left', sortable: true },
{ field: 'Name', title: '用户名称', width: 120, align: 'left', sortable: true },
{ field: 'Address', title: '用户地址', width: 120, align: 'left', sortable: true }
]],
fitColumns: true,
singleSelect: true,
pagination: true,
sortOrder: "asc",
sortName: "Id", //初始化时按Id升序排序
toolbar: [{
iconCls: 'icon-add',
text: '添加',
handler: function () { alert('Add') }
}, '-', { //分隔符
iconCls: 'icon-edit',
text: '编辑',
handler: function () { alert('edit') }
}, '-', {
iconCls: 'icon-remove',
text: '删除',
handler: function () {
alert('delete')
}
}, '-', {
iconCls: 'icon-search',
text: '查询',
handler: function () {
alert('search')
}
}]
});
});
//按用户自定义查询条件查询，调用datagird的load方法，传递name查询条件
function QueryData() {
$("#tblUserList").datagrid("load", {
"name":$("#tblQuery").find("input[name='txtName']").val()
});
}
//清除查询条件
function ClearQuery() {
$("#tblQuery").find("input").val("");
}
</script>
<div id="tt" class="easyui-tabs" fit="true" border="false">
<div title="用户管理">
<div id="divLayout" fit="true">
<div data-options="region:'north',split:false" style="height: 60px;padding-top:6px;" border="false">
<!--高级查询部分-->
<table id="tblQuery" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>
用户名:
</th>
<td>
<input name="txtName" />
</td>
</tr>
<tr>
<th>
注册时间:
</th>
<td>
<input name="txtRegStartTimeStart" class="easyui-datetimebox" editable="false" /> 至
<input name="txtRegStartTimeEnd" class="easyui-datetimebox" editable="false" />
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" src="javascript:void(0)" onclick="QueryData()" plain="true">查询</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" src="javascript:void(0)" onclick="ClearQuery()" plain="true">清空</a>
</td>
</tr>
</table>
</div>
<div data-options="region:'center',split:false" border="false">
<!--显示数据列表部分-->
<table id="tblUserList" fit="true">
</table>
</div>
</div>
</div>
</div>
---------------------后台一般处理程序UserManager---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data;
namespace MyStartEasyUi.ashx
{
/// <summary>
/// UserManager 的摘要说明
/// </summary>
public class UserManager : IHttpHandler
{
UsersExtendBll bll = new UsersExtendBll();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pageIndex = GetPageIndex(context);
int pageSize= GetPageSize(context);
string mySort = GetSort(context) + " " + GetOrder(context);
string queryName = GetQueryName(context);
string whereStr = "";
if (!string.IsNullOrEmpty(queryName))
{
whereStr += " name like '%" + queryName + "%'";
}
DataSet dsGet = bll.GetListByPage(whereStr, mySort, (pageIndex - 1) * pageSize + 1, pageIndex * pageSize);
List<MyBookShop.Model.Users> lst = bll.DataTableToList(dsGet.Tables[0]);
int total = bll.GetRecordCount("");
JavaScriptSerializer js = new JavaScriptSerializer();
string jsonStrings = js.Serialize(lst);
string returnJson = "{\"total\":"+ total.ToString() + ",\"rows\":" + jsonStrings +"}";
//返回Json格式total表示总数,rows表示返回的数据,这样返回才能分页
System.Threading.Thread.Sleep(2000);
context.Response.Write(returnJson);
}
public bool IsReusable
{
get
{
return false;
}
}
public Int32 GetPageSize(HttpContext context)
{
try
{
return Int32.Parse(context.Request["rows"].ToString());
}
catch
{
return 10;
}
}
public string GetOrder(HttpContext context)
{
return context.Request.Form["order"];
}
public string GetSort(HttpContext context)
{
return context.Request.Form["sort"];
}
public string GetQueryName(HttpContext context)
{
return context.Request.Form["name"];
}
public Int32 GetPageIndex(HttpContext context)
{
try
{
return Int32.Parse(context.Request["page"].ToString());
}
catch
{
return 1;
}
}
}
}
JQueryEasyUI-DataGrid显示数据，条件查询，排序及分页的更多相关文章
- EF：分页查询 + 条件查询 + 排序
/// <summary> /// linq扩展类---zxh /// </summary> /// <typeparam name="T">& ...
- yii2数据条件查询-where专题
条件查询 $customers = Customer::find()->where($cond)->all(); $cond就是我们所谓的条件,条件的写法也根据查询数据的不同存在差异,那么 ...
- 关于datagrid中数据条件颜色问题
前天公司考核中做了一个小的考核项目,在考核中一直没找到怎么设置datagrid中数据颜色的代码 他的题目是这样的: 项目资金小于50000时,项目资金数字需要红色文字显示,否则以绿色文字显示 后来找到 ...
- Spring Boot Jpa 多条件查询+排序+分页
事情有点多,于是快一个月没写东西了,今天补上上次说的. JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将 ...
- 微信小程序云开发-数据条件查询
一.使用where条件查询 在.get()语句之前增加.where语句实现条件查询. 二.通过doc查询单条数据 1.使用doc来查询数据库中的单条数据 2.定义一个空对象,用来展示插叙到的单条数据 ...
- jsp 条件查询、列表分页
条件查询 dao //根据搜索条件筛选数据 public List<User> GetUserBySearch(String userName, String sex) throws SQ ...
- 10）drf 过滤器（条件查询 排序 ） 分页器
一.群查接口各种筛选组件 数据准备 models.py class Car(models.Model): name = models.CharField(max_length=16, unique=T ...
- EasyUI datagrid 的多条件查询
<script type="text/javascript"> $(function () { $("#dg" ...
- dojox.grid.DataGrid显示数据的方法（转）
第一种:数据存在本地或者已经写死的JSON对象中,不需要跟服务端进行数据传输 <%@ page language="java" contentType="text/ ...
- SQL必知必会02 过滤数据/条件查询
随机推荐
- minigui杂项
官方下载地址 MiniGUI简介 http://www.minigui.com/zhcn/download/ MiniGUI3.0.12 移植到mini2440 在海思hi3520上移植minigui ...
- 取石子 (四）_nyoj_161(博弈-奇异矩阵).java
取石子 (四) 时间限制: 1000 ms | 内存限制: 65535 KB 难度: 4 描述 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是 ...
- UNIX网络编程调试工具：tcpdump、netstat和lsof
tcpdump程序 tcpdump一边从网络读入分组一边显示关于这些分组的大量信息.它还能够只显示与所指定的准则匹配的那些分组. netstat程序 netstat服务于多个目的: (1)展示网络端点 ...
- p2p网贷3种运营模式
迄今为止,接触了3套不同的P2P系统.当中一套是我參与开发的,另外两套是别的开发商提供的. P2P系统的核心实体:借款人.平台.理財人. 模式一: 借款人的线上账号由平台统一维护.借款人能够通 ...
- SQL中的等号、IN、LIKE三者的比较
SQL中的等号.IN.LIKE三者的比较SQL 中等号.IN.LIKE 三者都可以用来进行数据匹配 .但三者并不相同. 等号是用来查找与单个值匹配的所有数据: IN 是 用来查找 与多个值匹配的所有数 ...
- mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格
mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格 MemberID MemberName FruitName -------------- ------------- ...
- CallableStatement简单使用
直接上存储过程.函数 --运行不带參数但带返回值的存储过程 CREATE OR REPLACE PROCEDURE proc_getUserCount(v_totalCount OUT NUMBER) ...
- iOS_数据库2_基础知识
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- spring各种邮件发送
参考地址一 参考地址二 参考地址三 参考地址四 Spring邮件抽象层的主要包为org.springframework.mail.它包括了发送电子邮件的主要接口MailSender,和值对象Simpl ...
- Python爬虫实战案例：爬取爱奇艺VIP视频
一.实战背景 爱奇艺的VIP视频只有会员能看,普通用户只能看前6分钟.比如加勒比海盗5的URL:http://www.iqiyi.com/v_19rr7qhfg0.html#vfrm=19-9-0-1 ...