Jquery easyui从零单排之datagrid排序
2015-12-10 09:14
686 查看
上篇文章,写了如何实现datagrid的客户端分页,这次来实现datagrid的排序功能。
1.
这里需要把sortable属性设置true,即对其激活。
2.
这里是向数据处理页面传递需要对其排序的字段sort(比如我设置的字段LoginID,当然也可以是其他字段), 以及按何种方式排序order(asc,desc)。
这里就不用多复述了,就是根据传过来的值进行sql查询,通过Newtonsoft.Json把DataTable转换为Json数据返回。
以上基本上就实现了datagrid的排序功能。
一、前台页面代码:
<head> <meta charset="UTF-8"> <title>Start from zero</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> </head> <body> <form id="fm"> <table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true" showfooter="true" style="width: 640px; height: 600px" data-options=" remoteSort:false, rownumbers:true, singleSelect:false, autoRowHeight:true, pagination:true, showFooter: true, fitColumns: true, pageSize:20"> <thead frozen="true"> <tr> <th data-options="field:'ck',checkbox:true,width:40"> </th> <th data-options="field:'LoginID',width:100" sortable="true"> LoginID </th> </tr> </thead> <thead> <tr> <th data-options="field:'UserName',width:120" sortable="true"> UserName </th> <th data-options="field:'Sex',align:'center',width:80" sortable="true"> Sex </th> <th data-options="field:'Department',width:140" sortable="true"> Department </th> <th data-options="field:'Age',width:80" sortable="true"> Age </th> </tr> </thead> </table> <script type="text/javascript"> function getData() { $('#dg').datagrid({ url: 'Handler.ashx', method: 'get', striped: true, title: "员工列表", onSortColumn: function (sort, order) { //alert("sort:" + sort + ",order:" + order + ""); $('#dg').datagrid('reload', { sort: sort, order: order }); } }) } function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } $(function () { $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData()); }); </script> </form> </body> </html>关键代码在这里:
1.
<th data-options="field:'LoginID',width:100" <span style="color:#ff0000;">sortable="true"</span>> LoginID </th>
这里需要把sortable属性设置true,即对其激活。
2.
onSortColumn: function (sort, order) { //alert("sort:" + sort + ",order:" + order + ""); $('#dg').datagrid('reload', { sort: sort, order: order }); }
这里是向数据处理页面传递需要对其排序的字段sort(比如我设置的字段LoginID,当然也可以是其他字段), 以及按何种方式排序order(asc,desc)。
二、处理代码
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; using System.Data.SqlClient; using System.IO; using System.Collections.Generic; using System.Text.RegularExpressions; using Newtonsoft.Json; using System.Text; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"])?context.Request.QueryString["sort"]:"LoginID"; string order = !string.IsNullOrEmpty(context.Request.QueryString["order"])?context.Request.QueryString["order"]:"asc"; Query(context,sort,order); } public void Query(HttpContext context,string sort,string order) { context.Response.ContentType = "text/plain"; SqlHelp sqla = new SqlHelp(); string stra = "select * from tTestTable order by "+sort+" "+order; DataTable dta = sqla.GetDataTable(stra); sqla.SqlClose(); string json = JsonConvert.SerializeObject(dta); context.Response.Write(json); } public bool IsReusable { get { return false; } } }
这里就不用多复述了,就是根据传过来的值进行sql查询,通过Newtonsoft.Json把DataTable转换为Json数据返回。
三、运行结果截图:
以上基本上就实现了datagrid的排序功能。
相关文章推荐
- jquery判断复选框是否选中进行答题提示特效
- jQuery手动点击实现图片轮播特效
- jquery实现定时自动轮播特效
- jquery实现鼠标悬浮停止轮播特效
- jQuery实现监控页面所有ajax请求的方法
- jQuery自定义动画函数实例详解(附demo源码)
- SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
- 基于jQuery实现复选框是否选中进行答题提示
- jquery判断复选框是否选中进行答题提示特效
- 关于javascript 以及 jQuery中获取文本值得一点看法
- jquery制作一个简单的日历
- jquery选择器
- 锋利的JQuery —— DOM操作
- JQuery选择
- jquery文档操作函数大全
- jQuery形式可以计算,它包含了无线电的变化价格,select价格变化,删除行动态计算加盟
- jQuery实现选项卡切换效果简单演示
- jQuery选择器总结
- 20151209jquery学习笔记Ajax 代码备份
- jquery特效 点击展示与隐藏全文