emapdatatable

数据表格
Source:

配置

(static) $.fn.emapdatatable.defaults

其他参数参考jqxDatatablehttp://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-api.htm?search=
属性:
名称 类型 属性 默认值 描述
pk String <optional>
 WID 数据主键字段
url String <optional>
 请求表格数据的后台接口, url和pagePath二选一必填
pagePath String <optional>
 请求表格数据页面地址, url和pagePath二选一必填
params Object 请求参数
datamodel Array 一般为emap返回的数据模型
action String emap动作名
customColumns Array 自定义表格列,colIndex:该自定义位于表格第几列，从0开始，最后一列可以设置‘last’； colField: 自定义列作用的列模型字段； type: 自定义列类型，支持checkbox，link，tpl。chekcbox不可定义colField参数，如果定义了colIndex，则customColumns数组必须按照colIndex值由小到大排序
height Int | String <optional>
 高度, 表格自适应高度传null
pageable Boolean <optional>
 true 是否分页
pagerMode String <optional>
 advanced 分页形式 'advanced' 'simple'
serverProcessing Boolean <optional>
 true 是否开启服务端分页
pageSizeOptions Array <optional>
 ['10', '20', '50', '100'] 分页条数选项
localization String <optional>
 'zh-CN' 语言选择
sortable Boolean <optional>
 false 排序
selectionMode String <optional>
 'custom' Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.
enableBrowserSelection Boolean <optional>
 true Enables or disables the default text selection of the web browser.
columnsResize Boolean <optional>
 true Sets or gets the jqxDataTable's columnsResize.
colHasMinWidth Boolean <optional>
 true 列宽是否有默认最小值100px
schema Boolean <optional>
 true 启用schema，必须定义 contextPath && 未定义contextPath时 schema 不生效
contextPath String <optional>
 根路径
minLineNum Int <optional>
 最小高度行数
fastRender Boolean <optional>
 false 快速渲染， 用于提高表格渲染速度
beforeSend function <optional>
 请求发送前的回调函数
downloadComplete function <optional>
 表格数据请求完成的回调
customOptions function <optional>
 初始化表格的options，允许干预
mustSelect Boolean <optional>
 true 自定义显示列弹窗是否开启必须勾选字段校验
columnsReorder Boolean <optional>
 false 是否开启列拖拽排序
fxss Boolean <optional>
 是否开启开启防跨站脚本攻击，默认与WIS_EMAP_CONFIG['emapdatatable.fxss']相同
Source:
Example
$el.emapdatatable({
            pagePath: bs.api.pageModel,
            action: 'T_PXXX_XSJBXX_QUERY',
            customColumns: [{
                colIndex: '0',
                type: 'checkbox'
            }],
            customOptions: function(jqxOptions) {
                return jqxOptions;
            }
        });

方法API

addRow(objopt)

添加行，支持编辑模式
参数:
名称 类型 属性 描述
obj Object <optional>
Properties
名称 类型 属性 默认值 描述
rowIndex Number <optional>
 第几行(貌似没有作用)
rowData Object <optional>
 添加的数据
rowPosition String | Number <optional>
 'first' 在添加到第几行后面,添加到第一行传'first'，最后一行传'last'
Source:

cancelDeleteRowInEditMode(opt, Numberopt)

参数:
名称 类型 属性 描述
opt Object 入参，因组件对字符做特殊处理，用于查询，所以此处规定入参为Object
Number <optional>
 opt.rowIndex 行索引
Source:

checkedRecords()

获取选中的数据
Source:

checkedRowsIndex() → {Array}

获取被勾选行的索引
Source:
返回:
行索引数组
类型：
Array

deleteRow(objopt)

删除行，支持编辑模式
参数:
名称 类型 属性 描述
obj Object <optional>
Properties
名称 类型 描述
rowIndex Number | String 删除第几行
Source:

deleteRowInEditMode(opt)

参数:
名称 类型 描述
opt Object 入参，因组件对字符做特殊处理，用于查询，所以此处规定入参为Object
Properties
名称 类型 描述
rowIndex Number 行索引
Source:

enterEditMode()

进入表格编辑模式
Source:

export(config)

导出表格数据
参数:
名称 类型 描述
config Object 配置参数，导出请求参数
Properties
名称 类型 描述
root String 根路径
Source:

getChangedRows() → {Array}

获取已改变的数据，不包含待删除的数据
Source:
返回:
所有已改变的行的数据
类型：
Array

getCurrentQueryParams() → {Object}

获取当钱表格传到后台的查询条件，包含排序
Source:
返回:
类型：
Object

getCurrentTableRows() → {Array}

获取当前表格实例包含的数据，不包含待删除的行
Source:
返回:
[description]
类型：
Array

getModel()

获取表格数据
Source:

getResult()

获取当前表格内数据
Source:

getRowsData()

获取接口返回的行数据
Source:

getSort()

获取表格排序
Source:

getToDeleteRows() → {Array}

获取将要被删除的行索引
Source:
返回:
索引数组
类型：
Array

getTotalRecords()

获取数据总条数
Source:

getVisibleColumns() → {Array}

获取当前表格内所有显示的列
Source:
返回:
可视的列
类型：
Array

isInEditMode() → {Boolean}

判断表格是否处于编辑模式
Source:
返回:
类型：
Boolean

leaveEditMode()

退出表格编辑模式
Source:

reload(params)

刷新表格数据
参数:
名称 类型 描述
params Object 附带参数
Properties
名称 类型 描述
_gotoFirstPage Object callback 可以是function 或者是 true，true的话意味着强制跳回第一页 _gotoFirstPage 如果callback为回调函数，此时需要调回第一页 则可以设置params._gotoFirstPage为true
Source:

reloadFirstPage(params, callback)

默认刷新表格回到首页
参数:
名称 类型 描述
params Object 附带参数
callback function 回调函数
Source:

selectColumnsExport(params)

导出 表格数据， 列为选择列
参数:
名称 类型 描述
params object 【url】： /[root]/sys/emapcomponent/imexport/export.do 【参数 params】： root: app：调用导出的应用名称，必填 module：调用导出的模块名，必填 page：调用导出的页面，必填 action：调用导出的动作，必填 colnames：导出时自定义的字段，多个用逗号分隔，选填 toUpperCase analyse：自定义的导出过程分析服务，实现IImportAnalyse，选填 write：自定义的导出写文件服务，实现IExportWrite，选填 filename：自定义的导出文件名，选填
Source:

selectToShowColumns(action, params)

展开选择列窗口
参数:
名称 类型 描述
action object 动作 { type: //action type, 内置动作有 toggle(默认),export handler: //action handler param: //action hander 的参数 columnsReorder: //是否开启表格列排序 } 'toggle' 显示选择的列，隐藏未选择的列,默认值 'export' 导出表单， 支持选择列
params object action 动作 所需的参数
Source:

validateTable() → {Bollean}

校验表格输入是否合法
Source:
返回:
类型：
Bollean

事件

'editabletatable.cell.change'

可编辑表格单元格值改变事件
参数:
名称 类型 描述
$tr DOM 发生改变的行元素
value Object 改变后整行的值
key String 发生改变的字段
Source:
示例
$el.on('editabletatable.cell.change',function(e,$tr,value,key){
    console.log(value);
})

'editabletatable.complete'

可编辑表格渲染完成的事件
Source:
示例
$el.on('editabletatable.complete',function(e){
    console.log(instance.getResult());
})

'editabletatable.renderingcomponent'

可编辑表格开始渲染组件的事件
Source:
示例
$el.on('editabletatable.renderingcomponent',function(e){
    console.log(e);
})

'emapdatatable.created'

表格初次渲染完成后触发的事件
Source:
示例
$el.on('emapdatatable.created',function(e,instance){
    console.log(instance.getResult());
})