DOM元素

满屏表格(滚动条内部)

自适应表格(滚动条外部)

表格通用设置方法

Sweet UI中大多数表格的绘制,我们都推荐采用datatable表格组件。如过想要在页面中引入datatable表格,就一定要遵循规范。规范的DOM结构,不但能够最大程度的兼容各种浏览器,而且能够减少计算,提升页面性能。
DOM元素
满屏表格布局

● 表格的布局一般会结合portlet区域元素弹性布局
wj_port_datatable,这个class名决定了datatable表格在sweet ui页面中所有的定义样式,一般可以加在portlet最外层的元素即wj_portlet上。
datatable中的弹性布局也已经通过class名wj_port_datatable预置,所以无需添加其它弹性布局class名。
● 如果配置了checkbox列或者是可编辑表格,那么表格一定要被拥有class名edit_validateform元素包含。

数据列表
自适应表格布局(滚动条外部)

● 如果需要表格高度自适应,滚动条一般放在外部容器上。
● 这类表格一般不设分页和info信息。

数据列表
表格通用设置方法

● datatable提供了强大的参数配置项。
● 在实际应用中,为了节省代码量,我们可以把大量的配置项设置到$.fn.dataTable.defaults对象中,如下。