ESUI - Table


List of Tables

1. 构造器静态参数配置
2. 初始化参数
3. 表格列数据项
4. 公共实例方法
5. 事件

1. 继承层级

Table - Control

2. 说明

Table控件主要用于二维数据的展现。

Table控件要求的数据格式,请参考E-JSON中的数据场景:记录和二维表。

[
    {
        id: 250,
        name: "erik",
        sex: 1,
        age: 18
    },
    {
        id: 251,
        name: "欧阳先伟",
        sex: 1,
        age: 28
    }
]

3. 构造器静态参数配置

Table 1. 构造器静态参数配置

名称描述
{boolean} COLUMN_RESIZABLE表格是否允许拖拽改变列宽。
{boolean} FOLLOW_HEAD在滚动条纵向滚动时,是否表头跟随。
{string} NODATA_HTML没有数据时,表格体中显示的html内容。
{boolean} SORTABLE表格是否允许排序。

4. 初始化参数

Table 2. 初始化参数

名称描述
{HTMLElement} main控件主元素。
{boolean} bodyHeight设置表格体的高度,单位为px。
{boolean} breakLine表格内容是否允许断行。
{Array} datasource表格要显示的数据。
{boolean} disabled控件的不可用状态。处于不可用状态时,表格拖拽、编辑、排序等功能都将禁用。
{boolean} columnResizable表格是否允许拖拽改变列宽。
{Array} fields表格的列配置。具体请参照后面的“表格列数据项”
{boolean} followHead在滚动条纵向滚动时,是否表头跟随。
{string} noDataHtml没有数据时,表格体中显示的html内容。
{boolean} noHead表格是否显示标题。
{string} select设置表格的选择方式。single|multi
{string} selectMode设置表格的选择模式。如果设置了值为line,则点击行时触发选择。
{boolean} sortable表格是否允许排序。

5. 表格列数据项

初始化的参数中,fields是一个数组,作为表格显示的列设置。其中每一列的可选属性如下:

Table 3. 表格列数据项

名称描述
{string} align列内容的排序方式。left | center | right。
{boolean} breakLine列是否允许断行。
{string|Function} content每一行该列需要显示的内容。
{boolean} resizable该列是否允许拖拽改变列宽。
{string} field该列的字段名。主要用于可排序表格中的可排序字段。
{boolean} followHead在滚动条纵向滚动时,是否表头跟随。
{number} minWidth该列的最小宽度。表格分配列宽时分配宽度不会小于设置的minWidth。
{boolean} stable是否固定列。表格分配列宽时不会影响到固定列。
{string|Function} title该列标题需要显示的内容。
{number} width设置该列的宽度。

6. 公共实例方法

Table 4. 公共实例方法

名称描述
{void} appendTo( {HTMLElement} wrap )将控件添加到页面的某个元素中。
{void} disable( {void} )设置控件状态为禁用。
{void} enable( {void} )设置控件状态为启用。
{boolean} isDisabled( {void} )获取控件可用状态。
{void} render( {void} )绘制控件。

7. 事件

Table 5. 事件

名称描述
{void} onselect: ( {Array|number} selected )当表格项被选中时触发。单选模式时selected为选中项的索引,多选模式时selected为选中项索引的数组。
{void} onsort: ( {Object} field, {string} order )当用户点击表格排序时触发。field为当前排序列。order为排序方式,asc | desc。