( jTemplates ) 网格

分享于 

7分钟阅读

Web开发

  繁體

介绍

在本文中,我将简要介绍 jTemplates jQuery插件,并试着演示如何将以下网格作为基础构建。

源代码

源代码包含一个基于jTemplates实现网格的web应用程序。 网格支持排序,分页和行编辑。 Web应用程序还包含一个用于模拟与数据库交互的Web服务。

jTemplates简介

jTemplates是一个模板引擎,被写成一个jQuery插件。 jTemplates在客户端呈现HTML是非常有效的。 它使得编写和读取HTML呈现代码变得更容易。 可以在这里访问插入网站: http://jtemplates.tpython.com/

为什么我们根本就不需要在客户端呈现 HTML? 可能有很多原因。 首先,它为你提供构建富web应用程序的可能性。 其次,它可以用来替换AJAX在某些情况下更新页面的某些部分。

如何工作首先,你需要确保在页面中引用要使用它的所有JavaScript文件。 文件中有jQuery文件和jTemplates插件。 下载文件后,将这些行添加到页面中:

<scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript"src="jquery-jtemplates.js"></script>

现在你需要定义将用于呈现HTML的模板。 有几种方法可以做到这一点。 它可以定义为JavaScript字符串变量,或者存储在任何HTML元素( 比如隐藏的输入) 中,或者在单独的文件中定义。 一个不错的特性是,你可以在模板中包含其他模板。 假设你需要呈现一个带有两个列的table,并将模板存储在一个div中。 然后,html将如下所示:

<divid="templateHolder"style="visibility:hidden;"><tableborder="1"><tr><th> First Name
 </th><th> Last Name
 </th></tr> {#foreach $T as record} 
 <tr><td> {$T.record.FirstName}
 </td><td> {$T.record.Email}
 </td></tr> {#/for}
 </table></div><divid="jTemplateDemo"></div>

templateHolder 将只保存模板并且应该隐藏,并且 jTemplateDemo div将用于呈现模板的inside。 below 是将使所有这一切工作的JavaScript代码:

$(document).ready(function() {
 var data = [
 { ID: 1, FirstName: 'Anne', Email: 'anne@domain.com' },
 { ID: 2, FirstName: 'Amelie', Email: 'amelie@domain.com' },
 { ID: 3, FirstName: 'Polly', Email: 'polly@domain.com' },
 { ID: 4, FirstName: 'Alice', Email: 'alice@domain.com' },
 { ID: 5, FirstName: 'Martha', Email: 'martha@domain.com' }
 ];
 $("#jTemplateDemo").setTemplate($("#templateHolder").html());
 $("#jTemplateDemo").processTemplate(data);
});

以下是 final 结果:

jTemplates还支持"for"和"中频"运算符。 此外,在"foreach"运算符内,你可以访问以下变量:

  • $index - 表中元素的索引
  • $iteration 迭代的ID ( 下一个数字从 0开始)
  • $first - 这是第一次迭代?
  • $last - 这是最后一次迭代?
  • $total - 迭代的总数

jTemplate用户控件概述

在开始使用jTemplates之后,我很快发现,存储 jTemplate inside HTML元素甚至更糟糕,在一个JavaScript变量中使HTML变得。 所以,我最终将模板存储在单独的文件中或者 inside的jTemplate用户控件中。 jTemplate控件非常简单,基本上执行以下操作:

  • 允许将模板 inside 存储在控件中。
  • 允许定义将在模板设置后立即执行的JavaScript代码。
  • 它用数据处理模板,在服务器端,在服务器端分配 DataSource 属性,并调用 DataBind 方法。

控件使用 Json.NET 库将对象转换为服务器端的JSON表示形式:

网格- 它是如何实现

为了实现网格,我使用了jTemplate用户控件。 inside的Template 属性,我定义了以下模板:

<Template><tableclass="JTable"><trclass="head"> {#foreach $T.Columns as column}
 <td><span></span><labelclass="ColumnLabel"for="{$T.column.ColumnName}">{$T.column.ColumnTitle}</label></td> {#/for}
 </tr> {#foreach $T.Rows as row}
 <trclass="row {#if (($T.row$index + 1) % 2 == 0)}alt{#/if}"customerid="$T.row.ID"index="{$T.row$index}"> {#foreach $T.row.Values as row}
 <td>{$T.row.Value}</td> {#/for}
 </tr> {#/for}
 <trclass="footer"><tdcolspan="{$T.Columns.length}"><labelclass="PagingButton PreviousPage"><<</label> Page <selectclass="PageSelector"> {#for index = 1 to $T.PageNumber}
 <option{#if$T.index== $T.PageIndex+1}selected="selected"{#/if}>{$T.index}</option> 
 {#/for}
 </select> of {$T.PageNumber}
 <labelclass="PagingButton NextPage">>></label></td></tr> 
 </table></Template>

你可以看到,模板非常直观且易于阅读。 这个模板的优点是你可以按照你想要的方式修改它,并且你可以完全控制渲染的内容。

另外,我还必须在 InitializationJavaScript 属性中编写一些JavaScript代码。 JavaScript代码用于向呈现的HTML添加交互性。 如果你检查代码,你将看到jTemplates的实际工作只限于一行,并且调用 processTemplate 函数 inside的网格刷新方法。

在服务器端分配用户控件的DataSource 属性,并且在页面加载之后使用这里数据处理模板。 但是,稍后,与服务器端的交互仅通过 Web服务 完成。 这样做的原因是,我想消除页面负载和网格负载之间的延迟。

可以改进的东西

我认为将JavaScript代码移到单独的文件是一个好主意。 这样,你可以跨不同页面重用控件,而不必反复复制JavaScript代码。 在 InitializationJavaScript 属性中必须做的唯一事情是将控件对象扩展到将在单独文件中定义的JavaScript类。


相关文章