其中 JData.js 文件是用来实现 Asp.Net 中的 GridView，DetailsView， FromView，（FromView 尚未完成），它是基本于 MS AJAX，在使用中需要引用 MS AJAX 。
JData.DateTimeField.js，JData.GroupColumn.js …… 等文件是用于对原有的功能进行扩展，部份类库需要引用到 JQuery，以及 JQuery UI，具体请查看该文件中的注释以及相关的实例。
JData 是款采用 Javascript 编写的数据组件，目的是将 ASP.NET 中的 GridView，DetailsView，FormView 移植到浏览客户端中来，并且扩展原有的功能。
使用授权：GPL 以及 MS-PL 双重授权。
我们首先来实现一个最简单的 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 是否又是一个车轮？相信有不少朋友可能会有这样的疑问，在这里，我给大家解释一下。
事实上，本人最讨厌的事情就是重新发明车轮。本人也用过不少 Grid 控件，包括 ExtJS，JqGrid，FlexiGird 等一大堆控件，抛开性能，费用这些不说。这些类库最大的问题的就太过于JSON 化，由于大量地使用了JSON 对象来传递参数，使得VisualStudio代码感应根本没有用武之地，在开发的过程中，开发人员不得不经常查看文档中的 API 。而为了克服这个问题，有人提出了用 C# 写 javascript ，或者封装成服务端组件，然后在运行时生成 Javascript ，这些方法我都试过，带来的性能开销不说，封装过的类库，最起码在功能上就打了一个折扣， 很多地方又不得不写那些令人发狂，夹杂着大量 JSON 对象的 javascript 代码 。
JData 的出现，就是为了解决这个问题，JData 在设计上，就是尽可能避免 JSON 对象的使用，给开发人员提供一个完整的代码提示，减少开发人必须记住大量 API 的痛苦，极力避免因拼写造成的错误。当然，JData 这个项目并不打算成为象 Ext 之类的大而全的项目，而仅仅是专注于数据处理，为使用 GridView，DetailsView，FormView 等数据组件 的 ASP.NET 的开发人员，提供多一种选择。
下面继续我们的教程，来给大家介绍如何格式化所 Grid 中所呈现的数据。
如图所示的 OrderDate，RequiredDate 字段是经过格式化的了。代码如下：
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', null, true);
var col2 = new JData.BoundField('Employee', null, '120px', null, true);
var col3 = new JData.BoundField('OrderDate', null, '120px');
var col4 = new JData.BoundField('RequiredDate', null, '120px');
col3.formatValue = formatDateValue;
col4.formatValue = formatDateValue;
var gridView = new JData.GridView($get('gridView'));
gridView.set_caption('Format Column Value');
gridView.set_dataSource(dataSource);
gridView.set_columns([col1, col2, col3, col4]);
gridView.set_allowPaging(true);
JData.JQueryUIStyle(gridView);
gridView.initialize();
});
function formatDateValue(value) {
return value.toDateString();
}
代码很简单，就是通过重写column 中 formatValue 方法来实现的，这个方法就是将某种数据类型的数据换成字符串。
具体请参考 Demo 中 FormatValue.htm 文件中的代码。
演示及代码下载：http://jdata.alinq.org