jsData 使用教程（二） 对显示的数据进行格式化

jsData 是否又是一个车轮？相信有不少朋友可能会有这样的疑问，在这里，我给大家解释一下。

事实上，本人最讨厌的事情就是重新发明车轮。本人也用过不少 Grid 控件，包括 ExtJS，JqGrid，FlexiGird 等一大堆控件，抛开性能，费用这些不说。这些类库最大的问题的就太过于JSON 化，由于大量地使用了JSON 对象来传递参数，使得VisualStudio代码感应根本没有用武之地，在开发的过程中，开发人员不得不经常查看文档中的 API 。而为了克服这个问题，有人提出了用 C# 写 javascript ，或者封装成服务端组件，然后在运行时生成 Javascript ，这些方法我都试过，带来的性能开销不说，封装过的类库，最起码在功能上就打了一个折扣， 很多地方又不得不写那些令人发狂，夹杂着大量 JSON 对象的 javascript 代码 。

jsData 的出现，就是为了解决这个问题，jsData 在设计上，就是尽可能避免 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://www.jsdata.org