jsData 使用教程（六） 对数据进行排序

使用 jsData ，只需要编写少量的代码，便可以实现最为常用的功能。

在 jsData 中，对数据进行排序，非常，非常的简单。效果图如下：

 

服务端代码：

 

[WebMethod]
public virtual QueryResult GetOrderDetails(int skip, int take, string sorting, string filter, string selector,
bool retrieveTotalRowCount, int totalRowCount)
{
return base.Query<OrderDetail>(skip, take, sorting, filter, selector, retrieveTotalRowCount, totalRowCount);
}

 

 

客户端代码：

Sys.onReady(function() {

var dataSource = new JData.WebServiceDataSource("../Services/NorthwindService.asmx", "GetOrders", "InsertOrder");
dataSource.set_selector("OrderID, Employee.FirstName + \" \" + Employee.LastName as EmployeeName, OrderDate,RequiredDate, EmployeeID");
dataSource.set_sorting('OrderID desc');

var col1 = new JData.BoundField('OrderID', null, '120px', null, true);
col1.set_sortExpression('OrderID');

var col2 = new JData.BoundField('EmployeeName', null, '120px', null, true);
col2.set_sortExpression('Employee.FirstName');

var col3 = new JData.BoundField('OrderDate', null, '220px', null);
col3.set_sortExpression("OrderDate");

var col4 = new JData.BoundField('RequiredDate', null, '220px');
col4.set_sortExpression("RequiredDate");

var gridView = new JData.GridView($get('gridView'));
gridView.set_dataSource(dataSource);
gridView.set_columns([col1, col2, col3, col4]);
gridView.set_allowPaging(true);
gridView.set_caption('Sorting Data');
gridView.set_pageSize(15);
JData.JQueryUIStyle(gridView);
gridView.initialize();
});

 

在创建一个列后，只需要调用 set_sortExpression 方法来指定排序的表达式，一般来说，该表达式即是对应的属性名称。例如：

col1.set_sortExpression('OrderID');
col3.set_sortExpression("OrderDate");
col4.set_sortExpression("RequiredDate");

 

代码下载以及演示请访问：http://www.jsdata.org