这个事例演示了如何在点击列头的时候排序

DataGrid中全部的列可以通过点击列头被排序。你可以定义可以被排序的列。默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:
标记

<table id="tt"></table>
jQuery
$('#tt').datagrid({
    title:'Sortable Column',
    width:550,
    height:250,
    url:'/demo4/data/getItems',
    columns:[[
        {field:'itemid',title:'Item ID',width:80,sortable:true},
        {field:'productid',title:'Product ID',width:80,sortable:true},
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]],
    pagination:true,
    sortName:'itemid',
    sortOrder:'asc'
});

我们定义一些可排序的列,包括itemid,productid,listprice,unitcost等。attr1列和status列不能被排序。我们设置默认排序列:itemid,按asc(升序)排序。
当排序时, DataGrid发送两个参数到服务器:
· sort: 排序列字段名 
· order: 排序次序: 'asc' 或 'desc', 默认为'asc'. 
我们使用etmvc framework 写后台服务器代码,首先定义数据模型

EasyUI DataGrid 添加排序的更多相关文章

  1. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  2. EasyUI DataGrid 添加 Footer

    做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...

  3. Easyui datagrid自定义排序

    做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...

  4. EasyUI datagrid添加右键菜单项

    js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), / ...

  5. EasyUI - DataGrid 组建 - [ 排序功能 ]

    效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...

  6. 为easyui datagrid 添加上下方向键移动

    将以下脚本保存为 easyui-datagrid-moverow.js var DatagridMoveRow = (function($){ function DatagridMoveRow(gri ...

  7. easyui datagrid 列排序

    1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...

  8. easyui datagrid设置排序

    sortable="true" order="desc" 或者 sortable:true,order:'desc'

  9. easyui datagrid client搜索、分页、排序

    easyui datagrid的排序默认是server端排序.能够用sorter实现client排序[2].client分页可用filter实现[3].client搜索相同能够用filter实现. 不 ...

随机推荐

  1. zoj The 12th Zhejiang Provincial Collegiate Programming Contest Capture the Flag

    http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5503 The 12th Zhejiang Provincial ...

  2. [原创]java WEB学习笔记65:Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) ModelDriven拦截器 paramter 拦截器

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. c++之路进阶——hdu3507(Print Article)

    参考博文:http://www.cnblogs.com/ka200812/archive/2012/08/03/2621345.html//讲的真的很好,有个小错误,博客里的num全为sum,像我这种 ...

  4. Mac配置环境变量(Java,Android,Gradle,Maven,Hosts)

    JAVA_HOME 配置环境变量 # 使用vim打开.bash_profile文件,加入java环境变量 $ vim .bash_profile export JAVA_HOME=$(/usr/lib ...

  5. LDA-math-认识Beta/Dirichlet分布

    http://cos.name/2013/01/lda-math-beta-dirichlet/#more-6953 2. 认识Beta/Dirichlet分布2.1 魔鬼的游戏—认识Beta 分布 ...

  6. ASP.NET MVC(二)

    休息一下还是继续ASP.NET MVC 的基础知识. 这篇文件我想和大家一起熟悉下ASP.NET MVC项目的目录结构及dll. 1. ASP.NET MVC 项目的目录结构 App_Data:  存 ...

  7. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  8. 忘记windows的登陆密码

    http://user.qzone.qq.com/372806800/blog/1342261571

  9. Android的init过程(二):初始化语言(init.rc)解析【转】

    转自:http://www.cnblogs.com/nokiaguy/p/3164799.html Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核: ...

  10. 【Pro ASP.NET MVC 3 Framework】.学习笔记.11.ASP.NET MVC3的细节:概览MVC项目

    书Adam The Definitive Guide to HTML5 Adam Applied ASP.NET 4 in Context and Pro ASP.NET 4 到此为止,我们已经学了为 ...