注意
如果是需要实现数据列表,推荐使用grid表格而不是table表格,本章提供table数据列表示例是为了兼容以前的版本或者应对某些特殊情况。
新版中设置table的class="tableStyle"默认只会拥有表格的外观。
只有再添加mode="list"才会渲染列表的功能。以改善表单布局时使用tableStyle造成性能问题。
大量表单元素或者表单布局较复杂时,建议只设置表格的class="tableStyle",然后手动为tr设置高度,为td添加class="ali01"或者class="ali02"或者class="ali03"设置对其方式
只有简单表单布局才建议使用formMode方式布局。
1、未被渲染的列表-基本示例
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
可用来做布局表单或者简单列表。
宽度默认100%,如果想自定义宽度,为table设置style,例如style="width:500px;"
单元格文字过长默认折行,如果想要始终不折行,设置table的class同时为tableStyle tableStyleWordWrap
列表背景间隔换色和鼠标移入效果可以手动添加代码实现,这样比让框架直接渲染性能更好。见本章的“列表性能优化方案”。
2、渲染的列表-基本示例
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
框架直接对其渲染。默认效果是:表格间隔换色、鼠标移入行变色、点击单行变色。
3、渲染的列表-多行点击变色
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
4、渲染的列表-radio模式
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
5、渲染的列表-checkbox模式
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
6、渲染的列表-checkbox模式-点击行选中
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
7、渲染的列表-排序模式
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
排序模式表头会有响应鼠标移入效果
8、渲染的列表-宽度非100%
姓名
性别
年龄
张小三
男
25
张小三
男
25
张小三
男
25
张小三
男
25
读取每个th设置的trueWidth,让表格的宽度为每个th的trueWidth的总和。可通过此方法让表格出现横向滚动条。
9、渲染的列表-文字折行
姓名
性别
年龄
备注
张小三
男
25
备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息
张小三
男
25
备注信息
张小三
男
25
备注信息
张小三
男
25
备注信息
渲染的列表文字默认是不折行的,需要的话设置fixedCellHeight属性为true
10、表单布局-表格无样式
用户名:
密码:
民族:
汉族
满族
维吾尔族
常用地址:
手写table元素或在可视化工具创建table后,把表单元素一个个放在td里面。并对td设置对齐等样式,最后放在多功能容器中
11、表单布局-使用未渲染的tableStyle
表单标题
用户名:
密码:
民族:
汉族
满族
维吾尔族
常用地址:
大量表单元素或者表单布局较复杂时,建议只设置表格的class="tableStyle",然后手动为tr设置高度,为td添加class="ali01"或者class="ali02"或者class="ali03"设置对其方式
12、formMode表单布局-line模式
表单标题
用户名:
密码:
民族:
汉族
满族
维吾尔族
常用地址:
表单布局模式,表格禁用了变色功能,表头居中,奇数列右对齐、偶数列左对齐,行高度变大。
line表示表格单元格是1像素细线组成
13、formMode表单布局-transparent模式
用户名:
密码:
民族:
汉族
满族
维吾尔族
常用地址:
transparent表示无边框和背景色
14、formMode表单布局-view模式
详细信息
姓名:
张小三
性别:
男
曾用名:
张三
婚姻情况:
未婚
籍贯:
黑龙江
民族:
汉族
职业:
软件设计师
学历:
本科毕业
邮编:
100110
电话:
010-00000000
地址:
北京市海淀区
爱好:
唱歌 跳舞
view模式适合放置详细信息。 另外view模式下,td中的文字过长会自动折行.