jsData 使用教程（－） 加载数据

jsData 是款采用 Javascript 编写的数据组件，目的是将 ASP.NET 中的 GridView，DetailsView，FormView 移植到浏览客户端中来，并且扩展原有的功能。

使用授权：GPL 以及 MS-PL 双重授权。

演示：http://www.jsdata.org

 

我们首先来实现一个最简单的 Grid 数据显示。

 

 

服务端代码：

新建一 dll 项目，并引用 JData.Services，然后生成下面的代码。

 

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
public partial class NorthwindServiceBase : DataContextService<NorthwindDatabase>
{
[WebMethod]
public virtual QueryResult GetOrders(int skip, int take, string sorting, string filter, string selector,
bool retrieveTotalRowCount, int totalRowCount)
{
return base.Query<Order>(skip, take, sorting, filter, selector, retrieveTotalRowCount, totalRowCount);
}
}

 

客户端代码：

 

Sys.onReady(function() {

var dataSource = new JData.WebServiceDataSource("../Services/NorthwindService.asmx", "GetOrders");
dataSource.set_selector("OrderID, Employee.FirstName + \" \" + Employee.LastName as Employee, OrderDate,RequiredDate");
var col1 = new JData.BoundField('OrderID', null, '120px');
var col2 = new JData.BoundField('Employee', null, '120px');
var col3 = new JData.BoundField('OrderDate', null, '220px');
var col4 = new JData.BoundField('RequiredDate', null, '220px');

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

});

 

 

代码很简单，首先创建一个人 dataSource，接着创建一个 gridView 控件，执行  gridView.initialize() 语句后，便会对 gridView 进行初始化，并绑定数据。 JData.JQueryUIStyle(gridView) 语句是用来设置 gridView 的样式。

相关代码请到 htpp://www.jsdata.org 下载。