65.9K
CodeProject 正在变化。 阅读更多。
Home

Javascript 数据集、数据重复器和网格

Mahdi Yousefi
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.25/5 (11投票s)

2008年10月31日

CPOL

5分钟阅读

viewsIcon

62862

downloadIcon

617

一个可以在任何模板中重复数据的对象。

Javascript Grid

引言

当我开发基于 Ajax 的应用程序时，我有一个主要问题。那就是重复数据。我需要重复数据并每次都用不同的模板构建它。有时我需要一个网格，有时我只是在 DIV 中重复行以获得自由布局。

为此，我首先开发了一个名为“JS Dataset”的对象。当您将数据提供给该对象时，它可以根据您的模板重复它。可以更改数据集模板以根据用户操作使用不同的模板。

数据集模板如何工作？

定义一个模板来重复数据很容易。您需要一个模板，其中模板的每个部分都必须在 HTML 注释标签内。例如，每个模板都必须有一个重复的“ROW”模板。您需要将模板放置在 <!--row--> 和 <!--end-row--> 之间。Dataset 将重复这些标签之间的内容。

接下来是如何在行中放置我们的数据，例如，在哪里以及如何告诉 dataset 放置数据变量？为此，在 ROW 模板中，您需要放置一个特殊单词，其格式为 eval/Column/，其中 Column 是数据中对象的名称。

不清楚？下面有一个简单的示例，它是一个包含对象列表的简单模板，这些对象具有列名：“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>

现在我演示了如何使用模板。接下来是如何处理代码。有一个特殊参数始终设置为行模板中的当前项索引 - 它是 dataset/index/。如果您将其放在行模板中，无论放在哪里，它都会被替换为行的索引。

Using the Code

在使用 JavaScript 代码之前，您需要设计模板。考虑数据中的列。Dataset 可以从模板加载以下部分

  • Header: 页眉内容 [可选]
  • Row: 要为数据集中的每个项重复的内容
  • RowAlt: 偶数行索引的备用模板，例如 1,3,5,... [可选]
  • Footer: 页脚内容 [可选]
  • Empty: 数据集中没有数据时
  • Loading: 当 dataset 从服务器获取数据时，显示此模板 [可选]
  • SortAsc 和 SortDesc: 如果 dataset 在页眉模板中设置了排序参数，它将被替换以显示需要排序的列。例如，这可以是带有向上箭头的 Asc 图像和带有向下箭头的 Desc 图像。它们用于 Pager 对象。Pager 是我为这个 dataset 编写的插件。

当 dataset 重复数据并完成后，如果存在页脚和页眉，则重复结果将与页眉和页脚合并。设计模板时，现在有两种方法可以为其设置 dataset：动态和静态。

动态意味着您使用 JavaScript 设置模板，而静态意味着您将模板放置在 DIV 标签中，结果将显示在那里。

1 - 静态

将模板放在 DIV 标签中并设置该标签的 ID 。然后使用此代码加载

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

请注意，此示例使用了 window.onload。因为要访问 DOM 对象，我们需要在页面加载完成后使用它。然后请注意，您需要您的算法来从服务器获取数据，例如 jQuery.ajax 或其他方法，如 ASP.NET Web 服务和 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 - 动态

有时，我们需要动态更改模板。例如，如果这是 Windows Explorer 中的一个窗口。您可以将项目的视图更改为“详细信息、缩略图、平铺、图标或列表”。您现在可以通过使用多主题并根据您的算法加载它们来实现。

Windows Explorer Multi View

为此，只需在新模板中使用 dataset.setTemplate。您可以隐藏 HTML 或 JavaScript 代码中的模板，或者从服务器获取它。在下一个示例中，我没有从 DIV 标签加载模板，而是将其加载到变量中。

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

现在可以在模板之间轻松切换。

如果您在第一张图中看到，我使用了网格的顶部和底部工具栏。网格重复了 dataset 的宽度，但工具栏是另一个我命名为 dsPager 的对象。因为 dsPager 是我为自己的目的编写的插件，所以我不会详细介绍它。

您需要了解的一些事情是

  1. 如果您使用加载模板，可以调用 startLoading() 和 endLoading() 来显示和隐藏加载模板。
  2. 如果您需要覆盖并增加对渲染项的控制，只需覆盖 renderItem(index, item) 方法。renderItem 方法有两个参数：第一个是项的索引，第二个是该索引位置的数据项。此函数默认运行 getTemplate(index,item) 并返回它，但有时我们需要在每个行模板的开头或结尾根据索引添加一些内容。您可以覆盖以实现此目的。
  3. 如果您需要覆盖并增加对渲染页眉的控制，只需覆盖 renderHeader()。renderHeader 没有任何参数。默认情况下，它返回 getHeaderTemplate()。但有时，我们需要更改页眉并添加其他内容。

覆盖方法的示例

[*] 覆盖 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;
}

[*] 覆盖页眉模板以添加我自己的项目排序方法

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')”、“...”

您可以开发自己的分页和排序方法来用于网格和列表。

发挥创意！

有任何想法或评论吗？别忘了给这篇文章评分并留下评论。

历史

  • 2008/10/28 首次 CodeProject 发布
  • 2008/10/24 为 dataset 重复和 sort 功能插件编写了 dsPager
  • 2008/10/21 从第一个 dataset 对象中删除了某些错误
  • 2008/10/19 第一个想法
© . All rights reserved.