EasyUI - DataGrid 组建 - [ 排序功能 ]
效果:
红框的字段看,为设置了,列排序,向后台Post数据sort/order。
原理:向后台POST数据,sort/post数据。
html代码:
<table id="tab"></table>
JS代码:
$(function () {
$('#tab').datagrid({
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
singleSelect: true,//是否单选
striped: true,//是否开启斑马线 //============================= 加载数据,要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{ field: 'id', title: '编号' },
{ field: 'name', title: '姓名' },
{ field: 'sex', title: '性别' },
//在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
{ field: 'createtime', title: '创建时间',sortable:true, }
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//,每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台,然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// });
})
一般处理程序(ashx)后台数据:
- 要修改的SQL语句:
- order by " + sortfield + " " + sortDescOrasc + "
- (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ")
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json"; //接受前台传递来的页数和每页显示的条数
//前台开启分页之后,传递来的参数
int pageIndex = Convert.ToInt32(context.Request["page"]);
int pagenumber = Convert.ToInt32(context.Request["rows"]); //接收排序字段
string sortfield = context.Request["sort"];
string sortDescOrasc = context.Request["order"]; //存储数据
DataTable dt = new DataTable(); if (pageIndex == )
{
//加载第一页
string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person order by " + sortfield + " " + sortDescOrasc + "";
//获取数据
dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
}
else if (pageIndex != )
{
//加载非第一页
string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person) as a where a.rownum > " + (pageIndex - ) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
//获取数据
dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
}
else { } //将datatable转换为json
//在返回的JSON数据中,加入total属性(总记录数)
//那么他就会在加载的时候,显示总记录数。
//显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
string strjson = "{\"total\":15, \"rows\":" + DatatableToJson.ToJson(dt) + "}"; context.Response.Write(strjson);
}
EasyUI - DataGrid 组建 - [ 排序功能 ]的更多相关文章
- EasyUI - DataGrid 组建 - [ 新增功能 ]
效果: html代码: <div> <!--使用JS加载方式--> <table id="tab"></table> <!-- ...
- EasyUI - DataGrid 组建 - [ 搜索功能 ]
效果: html代码: 使用css加载的方式,所以要在写html代码,也可以使用js操作. <div> <!--使用JS加载方式--> <table id="t ...
- EasyUI - DataGrid 组建 - [ 样式功能 ]
效果显示: 同上次博文效果. html代码: 同上次博文代码. js代码: align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden: ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- Easyui datagrid自定义排序
做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...
- EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...
- EasyUI - DataGrid 组建 - [ 删除,修改 ]
效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...
- EasyUI - DataGrid 组建 - [ 组件加载和分页 ]
效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...
- easyui datagrid 列排序
1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...
随机推荐
- JavaEE Tutorials (6) - 使用嵌入式企业bean容器
6.1嵌入式企业bean容器概述826.2开发嵌入式企业bean应用82 6.2.1运行嵌入式应用83 6.2.2创建企业bean容器83 6.2.3查找会话bean引用84 6.2.4关闭企业bea ...
- Exploring the MapBox stack: MBTiles, TileJSON, UTFGrids and Wax
转自:http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html In my last b ...
- 小猪猪逆袭成博士之C++基础篇(二) 常量、处理类型、自定义头文件
小猪猪逆袭成博士之C++基础篇(二) const .auto. decltype 上一章我们介绍了一些常用的类型和常见的问题,下面再介绍一些学习的时候不是特别常用但是在实际工程中很有用的一些东西. 一 ...
- tomcat解析之简单web服务器(图)
链接地址:http://gogole.iteye.com/blog/587163 之前有javaeyer推荐了一本书<how tomcat works>,今天晚上看了看,确实不错,第一眼就 ...
- 应用之间进行跳转,ComponentName的方式
从应用A跳转到应用B, 关键代码如下: 有以下几个注意点: 1.ComponentName cn = new ComponentName("com.terry", "co ...
- Java, C#, Swift语法对比速查表
原文:Java, C#, Swift语法对比速查表 Java 8 C# 6 Swift 变量 类型 变量名; 类型 变量名; var 变量名 : 类型; 变量(类型推断) N/A var 变量名= ...
- UIScrollView方法 属性详解
--前言:UIScrollView使用非常广,本文研究UIScrollView各属性和方法,明白它们的意义.作用.在后面的一篇文章有整理UIScrollView一些常见用法以及一些效果的实现思路. - ...
- CF(435D - Special Grid)dp
题目链接:http://codeforces.com/problemset/problem/435/D 题意:求三角形个数,三个点必须的白点上,而且三条边必须是横线,竖线或对角线,三条边上不同意出现黑 ...
- Android中使用"running services"查看service进程内存
从Android 2.0开始,在Settings中加入了一个新的activity("Running Services" activity),它用于显示当前运行的每个Services ...
- BZOJ 3039: 玉蟾宫( 悬线法 )
最大子矩阵...悬线法..时间复杂度O(nm) 悬线法就是记录一个H向上延伸的最大长度(悬线), L, R向左向右延伸的最大长度, 然后通过递推来得到. ----------------------- ...