使用ComponentArt Grid中的客户端模板
来源:互联网 发布:淘宝网羽绒服 编辑:程序博客网 时间:2024/05/21 09:04
使用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的客户端可用视觉元素的呈现效果
- 使用ComponentArt Grid中的客户端模板
- 使用ComponentArt Grid中的客户端模板
- 使用ComponentArt Grid的服务器端模板
- ComponentArt Grid用法一 客户端运行模式
- 对ComponentArt中的Grid控件改造
- ComponentArt Grid Tips
- ComponentArt Grid用法5 checkbox
- ComponentArt的Grid页面传值
- ComponentArt Grid触发和处理服务器端事件
- ComponentArt Grid用法二 大量数据
- Grid使用模板(template)出错 (备忘)
- ComponentArt.web.ui中文帮助之Grid(一)(来自:海浪)
- ComponentArt.web.ui中文帮助之Grid(二)
- ComponentArt.web.ui中文帮助之Grid(四)
- ComponentArt.web.ui中文帮助之Grid(五)
- ComponentArt.web.ui中文帮助之Grid(六)
- ComponentArt.web.ui中文帮助之Grid(一)
- ComponentArt.web.ui中文帮助之Grid(二)
- 衡山之行
- unsigned int 和int
- 使用服务器端运行模式实现一个Grid
- offsetX与layerX区别
- DB2中如何實現Oracle的相關功能
- 使用ComponentArt Grid中的客户端模板
- 什么样的男人才算真正健康?
- ComponentArt.web.ui中文帮助之Grid(五)
- 河南省公务员的津贴补贴标准
- Struts 问题小结
- 智能客户端应用学习系列:SmartClient Software factory中的Composite UI Application Block(Cab)技术了解(十):异步调用,离线处理,队列管理的关系
- JavaScript 技巧与高级特性
- ComponentArt.web.ui中文帮助之Grid(六)
- m65上网设置