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

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

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

演示：http://jdata.alinq.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://jdata.alinq.org 下载。

编缉推荐阅读以下文章

• JData 使用教程（四） 对输入数据进行验证（客户端验证）
• JData 使用教程（三） 实现增删改功能
• JData 使用教程（二） 对显示的数据进行格式化