EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序
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 添加排序的更多相关文章
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- EasyUI DataGrid 添加 Footer
做后台管理界面时,EasyUI 的 DataGrid 经常会被用到,有时候一些总的统计数据不合适放在数据表格里,需要单独显示,这时候就可以放在Footer中显示而不必另外布局. 该怎么给 DataGr ...
- Easyui datagrid自定义排序
做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...
- EasyUI datagrid添加右键菜单项
js代码 //动态加载数据表格 function InitData() { $('#grid').datagrid({ url: '/Home/Query?r=' + Math.random(), / ...
- EasyUI - DataGrid 组建 - [ 排序功能 ]
效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...
- 为easyui datagrid 添加上下方向键移动
将以下脚本保存为 easyui-datagrid-moverow.js var DatagridMoveRow = (function($){ function DatagridMoveRow(gri ...
- easyui datagrid 列排序
1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...
- easyui datagrid设置排序
sortable="true" order="desc" 或者 sortable:true,order:'desc'
- easyui datagrid client搜索、分页、排序
easyui datagrid的排序默认是server端排序.能够用sorter实现client排序[2].client分页可用filter实现[3].client搜索相同能够用filter实现. 不 ...
随机推荐
- ubuntu安装jdk遇到的问题:cannot execute binary file
安装完jdk,配置好环境变量出现如下状况: cannot execute binary file 问题原因: jdk的位数与ubuntu的系统位数不一致 jdk 64位 ubuntu 32位 然后通过 ...
- 构造器Constructor是否可被override?
构造器Constructor是否可被override? 构造器Constructor不能被继承,因此不能重写Overriding,但可以被重载Overloading.
- HDU 4899 Hero meet devil(状压DP)(2014 Multi-University Training Contest 4)
Problem Description There is an old country and the king fell in love with a devil. The devil always ...
- ASP.NET状态管理策略
如果要想把信息存储在客户端那可以选择视图状态.控件状态.隐藏字段.cookie.和查询字符串. 1.web窗体页提供viewstate属性作为内置结构,在同一页的多个请求间自动保留值.他作为页面的隐藏 ...
- 夺命雷公狗—angularjs—22—bind改指向和传参方式
在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...
- AMAB interconnector PL301(二)
1)Frequency Conversion Components:包含三种component. AXI-AXI async bridge:拥有两种mode:bypass mode 和 async m ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON HWindowX 01
zw版[转发·台湾nvp系列Delphi例程]HALCON HWindowX 01 procedure TForm1.Button1Click(Sender: TObject);var img : H ...
- 五、Java基础---------if else、switch总结
在前几篇博客中主要是以笔者遇到的一些典型的题目为例子而展开的讨论,接下来几篇将是以知识点的结构进行讲述.本文主要是讲述if ()else .if() else if().switch() case 的 ...
- hadoop文件系统FileSystem详解 转自http://hi.baidu.com/270460591/item/0efacd8accb7a1d7ef083d05
Hadoop文件系统 基本的文件系统命令操作, 通过hadoop fs -help可以获取所有的命令的详细帮助文件. Java抽象类org.apache.hadoop.fs.FileSystem定义了 ...
- android 学习随笔十一(网络:HttpClient框架)
1.使用HttpClient框架发送get.post请求 google收集apache提供的一个发送Http请求框架 public class Tools { public static String ...