是指在使用ext js的模板(tpl)表格中,为了增强可读性和视觉效果,可以通过为表格的每一行设置不同的背景颜色来区分奇偶行。
实现替代行颜色的方法如下:
下面是一个示例代码:
// 模板定义
var tpl = new Ext.XTemplate(
'<table>',
'<tpl for=".">',
'<tpl if="xindex % 2 === 0">', // 判断当前行的索引是否为偶数
'<tr class="even">', // 偶数行的CSS类名
'<tpl else>',
'<tr class="odd">', // 奇数行的CSS类名
'</tpl>',
'<td>{name}</td>',
'<td>{age}</td>',
'</tr>',
'</tpl>',
'</table>'
);
// CSS样式定义
Ext.util.CSS.createStyleSheet('.even { background-color: #f2f2f2; } .odd { background-color: #ffffff; }');
// 数据
var data = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 },
{ name: 'Alice', age: 40 }
];
// 渲染表格
tpl.overwrite(Ext.getBody(), data);
在上述示例中,模板使用了条件判断语句来判断当前行的索引是否为偶数,然后根据判断结果设置了不同的CSS类名。CSS样式表中定义了偶数行和奇数行的背景颜色。
这样,通过使用模板和CSS样式,就可以实现将替代行颜色应用于ext js tpl表格。
腾讯云相关产品和产品介绍链接地址:
ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的 领取专属 10元无门槛券 手把手带您无忧上云列表而已,这时候XTemplate就显得很有用了。
本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能)
1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs返回分页数据
Code
扫码
相关资讯
活动推荐