ComponentArt.web.ui中文帮助之Grid(四)

ComponentArt.web.ui中文帮助之Grid(四)

使用ComponentArt Grid中的客户端模板

 

ComponentArt的表格控件具有最新的模板技术:客户端模板.通过ComponentArt的客户端渲染技术来实现,客户端模板扩充了模板技术到客户端,使用客户端脚本代替服务器端脚本可以允许数据绑定到客户浏览器,

 对ComponentArt表格使用客户端模板前,必须浏览一遍Web.UI控件中的模板概述,根据你的需要,也许服务器端模板更适合你的程序

 

概述

客户端模板由HTML标记和客户端数据绑定表达式组成.这个表达式由JavaScript写成,每个表达式在客户端呈现时计算并由计算结果替换,因此,每个表达式将计算成一个字符串

 

下面是一个用于表格数据元素的客户端模板的例子

    <ComponentArt:ClientTemplate ID="NameTemplate">

      ClientTemplate for <b>## DataItem.GetMember("Name").Value ##</b> rendered at ## (new Date()) ##

    </ComponentArt:ClientTemplate>

在定义之后，客户端模板有助于通过属性显示元素，我们应该通过设置属性DataCellClientTemplateId为"NameTemplate"来建立模板到表格列的联系

 

通过这种使用，客户端模板能够利用预定义的DataItem对象。当数据需要提供给客户端数据绑定，这个名称会通过客户端模板机制被预定义。在上例中，客户端模板被用于表格元素，所以数据行会被预设定到通常被绑定的表格行中。其他被利用的变量是双亲，指向控件（这里指ComponentArt_Grid对象）的主客户端对象

注意：服务器端绑定语句和服务器控件不能包含在客户端模板中。如果需要这种功能，客户端模板不能使用

有用的技术

再一对'##'定界符之间的语句是一些被认为是字符串的JavaScript代码。这样就允许客户端模板定义不受限制的复杂逻辑。下面是一些可能用到的有用技术：

 

客户端模板中的条件逻辑

通常，被客户端模板包含的内容依赖于被模板绑定的数据。一个普通的例子就是包含Update/Delete链接到表格的某些行，而不是其它（如用户的表达式），下面是个例子：

    <ComponentArt:ClientTemplate ID="EditTemplate">

      <div style="font-family:verdana;">## DataItem.GetMember('CanBeEdited').Value == false ?

        "Can not edit" : "<a href=//"javascript:editGrid('" + DataItem.ClientId + "');//">Edit</a>" ##</div>

    </ComponentArt:ClientTemplate>

这里我们使用条件操作来根据绑定的数据产生一个不同的模板内容。列可以编辑的Items (行)会简单的在使用了这个模板的元素中输出一个静态的，其他的会包含一个引发行编辑的链接

注意：由于嵌套引用和客户端模板在客户端被处理为JavaScript字符串，我们必须在语句中作一些更多的引用的转义。下面的文章显示了怎样避免这种转换和使你的客户端模板更清晰

 

从客户端模板调用外部函数

 

当多行的客户端模板语句开始变复杂时，我可以求助于外部函数来封装他们。在客户端模板语句中一个简单的函数调用 使得模板更简单的读取和调试。随意的通过数据行及父容器是程序需要的主要内容，并且通过他可以作很多事情，只要他返回的是字符串。例如，我们可以使用能够返回需要的内容的函数重作前面的条件例子

  function GetEditContent(item)

  {

    if(item.GetMember('CanBeEdited'))

    {

      return "<a href=/"javascript:editGrid('" + item.ClientId + "');/">Edit</a>";

    }

    else

    {

      return "Can not edit";

    }

  }

 

据此，我们客户端现在只需要调用产生函数的内容

    <ComponentArt:ClientTemplate ID="EditTemplate">

      <div style="font-family:verdana;">## GetEditContent(DataItem) ##</div>

    </ComponentArt:ClientTemplate>

这样，客户端逻辑能够被用于增强ComponentArt Grid的客户端可用视觉元素的呈现效果