emapdatatable

数据表格
Source:

配置

(static) $.fn.emapdatatable.defaults

属性:
名称 类型 属性 默认值 描述
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());
})