[翻译]Javascript Dataset, Data Repeater and Grid

Javascript Dataset, Data Repeater and Grid

By Mahdi Yousefi
原文：http://www.codeproject.com/KB/grid/DatasetAndDataRepeater.aspx
源码及实例下载：dataset-sample.zip

Introduction

      
    我在开发基于Ajax的应用程序时，遇到了一个主要的问题，就是关于数据的重复。每次我都需要在不同的模版中去构建数据。有时我可能需要表格显示数据，有的时候只需要在Div重复数据行来随意布局。
   正是基于这样的原因我开发了一个“JS Dataset”对象。把数据存入这个对象就可以实现在你的模版中重复数据。也能够基于自己的行为用不同的模板去改变内存中的Dataset模板。

How Dataset Template Works?

      很容易为重复数据定义模板。模板的每一项都是一个Html标签。例如，每个模板都有自己的“Row”模板，我们只需要它们放在<!--row--> 和 <!--end-row-->中间。DatSet就会在这样的标记中重复数据。
     接下就是我们如何将数据放入每一行，也就是告诉DataSet在什么地方放数据变量？达到这样的目的，就需要在Row模板中加上一个特别的格式词语eval/Column/去处理。Column就是DataSet中的对象的名称。
   有点疑惑吗？正好我们来看下面一个简单的例子，这里有个 关于objects的List的简单模板，objects对象中包含有"id", "name", "link"的列名。


<div id="simpleTemplate">
<!--row-->
<a id="link_eval/id/" href="eval/link/" title="eval/name/">eval/name/</a>
<!--end-row-->
</div>

上面简单的重复数据结果如下所示：


<div id="simpleTemplate">
<a id="link_0" href="news.aspx" title="News">News</a>
<a id="link_1" href="about.aspx" title="About us">About us</a>
</div>

到此已经展示了如何使用模板。接下来看看如何让通过编码来实现。有个特别的参数设置当前数据项的Index，这就是dataset/index/。假如你将它放入Row模板中，无论在什么位置，他都将表示row的Index。 

Using the Code

   在写javascript代码之前，需要设计模板，考虑好数据中的列。DataSet能够加载下列模板。

• Header: Header 的内容 [可选]
• Row: datset中每一项需要重复的内容。
• RowAlt: 替换每一行的Index链接 : 1,3,5,... [内容]
• Footer: Footer 内容 [可选]
• Empty: DataSet没有数据时
• Loading: DataSet正在从Server中加载数据时显示。 [Optional]
• SortAsc and SortDesc: 如果在Header中设置了排序参数，将按照排序来显示列。例如一个向上的箭头图标表示增序，向下的箭头图标表示倒序。我们就可以在Pager对象中使用。Pager 是这个dataset的插件.

 如果设计了Footer和Heaher,Dataset完成了数据的重复后，显示结果也会加上Header和Footer。有两种为DataSet设计模板的方法：静态 和动态。
    动态的方法意味着需要用javascript设置模板，静态的方法就是直接在需要显示数据结果的Div中设置模板。

1 - Static

在DIV标签中放置模板然后为Div标签设置ID。然后用下面的代码去加载数据。

var ds = new dataset('id_of_div');
window.onload = function(){
         //Get data from server
         ds.setData(sampleData);
         ds.build();
}

在这个例子中，注意到我用了window.onload.那是因为我们需要在页面加载完成时才能处理DOM对象。那么需要注意的是，你需要在你的业务逻辑中从Server中加载数据，如jQuery.ajax 或者其他像Asp.net Web service 和 Microsoft-Ajax，然后为DataSet设置数据，最后调用build() 方法显示结果。

下面是个完整的例子。

<div id="id_of_div">
<!--header--><div class="news-list"><!--end-header-->
<!--row--><div class="news-box-a">eval/NewsTitle</div><!--end-row-->
<!--altrow--><div class="news-box-b">eval/NewsTitle</div><!--end-altrow-->
<!--footer--></div><!--end-footer-->
<!--empty--><div class="alert">No news found, try another search</div><!--end-empty-->
<!--loading--><div class="alert">Updating</div><!--end-loading-->
</div>

很容易对模板使用用这样方法，你在任何软件像"Microsoft Expression"、"Dreamweaver"或其他任何编辑
工具中预览模板，同时也很容易的去改变。也能够在你的浏览器，像Chrome，Internet Explorer, Firefox中
显示或者翻译成任何语言，因为这个模板是写在HTML页中的。
假如你用ASP.NET,也很容易局部处理模板用Visual Studio，而不会有任何问题。

2 - Dynamic

有时，我们需要动态的改变模板。例如在window中的资源管理器，我们能够给改变选项的试图为“详细”，“缩略图”，“平铺”、“图标”或“列表”。现在你能够在自己的业务逻辑中通过多个主题来这样做。

达到这样的目标，只需要用dataset.setTemplate设置新模板。你能够在HTML中或者Javascript代码中隐藏你的模板，或者从Server中获得他们。在下面的例子中，我不从Div标签中加载模板，而是从Server端加载同时放在一个变量中。

var ds = new dataset('id_of_target_div');
ds.setTemplate(sampleNewTemplate);
ds.build();

现在很容易在两个模板中切换。

在第一副图中，你看到了我在表格的上面和下面都用了工具栏。 除了表格，这个工具栏是另一个dsPager对象，因为dsPager是我写得一个插件，在这里不会对它进行描述。

一些需要了解的地方:

1.假如你用了loading模板的时候，你可以调用startLoading() 和endLoading()显示和隐藏loading模板.
2.如果你需要重写同时添加更多的控制用于呈现Item，只需要重写renderItem(index, item) 方法. renderItem 有两个参数: 第一个为 item 的Index，第二个参数是在Index位置的数据项。这个函数默认是运行getTemplate(index,item)然后返回,但有时我们需要加入一些东西在特定的每行的前面或者后面.你能够重写去实现了。

3.加入你需要重写同时增加对Header呈现的控制，只需要重写renderHeader(). renderHeader 没有任何参数. 默认情况下,他返回getHeaderTemplate(). 但有时, 我们需要改变Header同时加入一些其他的东西。

 

Samples of Override Methods

重写renderItem方法，添加一个空的Div在两行之后： 

var ds = new dataset('sample');
ds.renderItem = function(index, item){
         var tmp = this.getTemplate(index,item);
         if( (index % 2) == 0 && index > 0){
                 tmp += '<div class="clearBoth"></div>';
         }
         return tmp;
}

重写header模板添加自己的排序方法： 

ds.renderHeader = function() {
         var tmp = this.getHeaderTemplate();
         if (this.headerSort) {
                 var regex = new RegExp('eval/sort-(\\w*)/');
                 var result;
                 while (regex.test(tmp)) {
                          result = regex.exec(tmp);
                          tmp = tmp.replace(regex,
                                   "javascript:" + this.pagerName
                                   + ".sort('" + result[1] + "')");
                 };
         };
         return tmp;
};

在上面的例子中，我用了像"eval/sort-colA" , "eval/sort-col2"等变量。这个函数就是把他们找出来然后替换成javascript:dsPager.sort('colA')……