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

核心提示：JData 是否又是一个车轮？相信有不少朋友可能会有这样的疑问，在这里，JData 使用教程（二） 对显示的数据进行格式化，我给大家解释一下，事实上，就是通过重写column 中 formatValue 方法来实现的，这个方法就是将某种数据类型的数据换成字符串，本人最讨厌的事情就是重新发明车轮，本人也用过不少 Grid

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

编缉推荐阅读以下文章

• JData 使用教程（四） 对输入数据进行验证（客户端验证）
• JData 使用教程（三） 实现增删改功能
• JData 使用教程（－） 加载数据