jsData 使用教程(六) 对数据进行排序
2010-06-29 17:41 麦舒 阅读(1887) 评论(5) 编辑 收藏 举报使用 jsData ,只需要编写少量的代码,便可以实现最为常用的功能。
在 jsData 中,对数据进行排序,非常,非常的简单。效果图如下:
服务端代码:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
[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);
}
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);
}
客户端代码:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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();
});
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");
col3.set_sortExpression("OrderDate");
col4.set_sortExpression("RequiredDate");
代码下载以及演示请访问:http://www.jsdata.org