cardTable 单据卡片内表格
分类： NC高级组件
- 修改时间： 2019-03-15
- 当前版本： 2019.3.15号盘之后会有
- 更新记录： 点我查看
使用场景
特别注意 ：1、操作列属性说明label: '操作', 显示的列名称 *必须attrcode: 'opr', 列字段（键值） 非必须itemtype: 'customer', 列所属类别 *必须className: 'table-opr', 列样式类名 *必须 可补充追加 'table-opr my-class-name'fixed: 'right', 列是否右侧固定 选用visible: true, 控制列的显隐性 *必须width: '160px', 控制宽度出滚动条 选用2、控制字段在列表里显示 visible：true3、想显示 **序号** 或者 **多选框** ，可以试试showIndex和showCheck
表格样式
浏览态样式 （待补充）
编辑态样式 （待补充）
简单示例
/**
* 使用说明：
*
* 1.引入createPage
* 2.包装业务页面
* 3.代码中使用表单各种 API
* this.props.cardTable.createCardTable
* this.props.cardTable.setTableData
* ......
*/
// 1.引入createPage
import { createPage } from 'nc-lightapp-front'; // 'nc-lightapp-front/src'; 可以引入到源码，用于调试
// 示例 cardTable 页面
class CardTable extends Component {
constructor(props) {
super(props);
}
// 界面渲染
render() {
// 3.获取创建表单API
let { createCardTable } = this.props.cardTable;
return (
<div className="table-wrapper">
// 根据meta信息创建简单table
{createCardTable(
'tableDemo', //表格id
onCloseModel: onCloseModelFn, // 弹窗控件点击关闭事件
onAfterEvent: afterEventFn, // 控件的编辑后事件
onSelected: onSelectedFn, // 左侧选择列单个选择框回调
onSelectedAll: onSelectedAllFn, // 左侧选择列全选回调
selectedChange: selectedChangeFn, // 选择框有变动的钩子函数
params: 'test', // 自定义传参
)}
</div>
);
}
}
// 2.包装 cardTable 页面
export default createPage({
initTemplate: initTemplate
})(CardTable);
表格方法API (this.props.cardTable 下面的方法)
| 方法名 | 方法说明 | 参数 说明 类型 可选值 | 返回值 类型 | 示例 |
|---|---|---|---|---|
| 1、createCardTable(moduleId, config) | 创建可编辑表格，表格对应的区域为ID | moduleId 页面对应的区域名 String; | 卡片单据组件实例 Node | createCardTable(‘tableDemo’) |
| 2、setTableData(moduleId, data, callback, isCache，isTop) | 设置表格数据 | data 渲染数据 Object; 如果设置空数据 data为{rows: []}, isCache(Boolean)是否保存原始数据，默认是true(保存),isTop 数据是否回到顶部(默认是false，不回到顶部) |
undefined 执行函数 | setTableData(‘tableDemo’, res.table) |
| 3、getStatus(moduleId) | 获取表格状态 | moduleId 页面对应的区域名 String; | 当前表格状态 edit/browse String | getStatus(‘tableDemo’) |
| 4、setStatus(moduleId, status, callback) | 设置表格状态 | status 行状态 String ‘edit’和’browse’其一; callback 自定义回调 Function |
undefined 执行函数 | setStatus(‘tableDemo’, ‘add’, callback) |
| 5、getAllRows(moduleId) | 获取表格数据 | 数据列表的数组 Array | getAllRows(‘tableDemo’) | |
| 6、getVisibleRows(moduleId) | 获取表格内可见列表数据 （排除删除项目） | moduleId 页面对应的区域名 String; | 数据列表的数组 Array | getVisibleRows(‘tableDemo’) |
| 7、getChangedRows(moduleId) | 获取被修改、删除、新增的行 | moduleId 页面对应的区域名 String; | 数据列表的数组 Array | getChangedRows(‘tableDemo’) |
| 8、getNumberOfRows(moduleId, flag) | 根据id获取表格中所有(可见)的行的数量 | flag 开关 Boolean ; flag为true包含删除项目 flag不传或者false不包含删除项目 |
行数量 Number | getNumberOfRows(‘tableDemo’) |
| 9、getAllData(moduleId) | 获取表格被包装的数据 | moduleId 页面对应的区域名 String; | 数据对象 Object | getAllData(‘tableDemo’) |
| 10、addRow(moduleId, index, data, autoFocus，callback) | 新增行 | index 新增后的行序号-1 Number 默认追加到最后行 ; data 新增的默认data {key: {display: ‘’, scale: 0, value: ‘’}} ; autoFocus 是否定位到当前行，默认为ture Boolean |
undefined 执行函数 | addRow(‘tableDemo’, 0, {‘org_pk’: {display: ‘组织名称’, value: ‘001’}}, false) |
| 11、delRowByRowId(moduleId, rowId, callback) | 通过RowId删除单行 | rowId 行id String | undefined 执行函数 | delRowByRowId(‘tableDemo’, ‘44343.666’) |
| 12、delRowsByIndex(moduleId, index, callback) | 通过index删除行/多行 | index 行号 Number/Array 单数字或者数字组成的数组 | undefined 执行函数 | delRowsByIndex(‘tableDemo’, 0) ; delRowsByIndex(‘tableDemo’, [1,2,3]) |
| 13、setValByKeyAndRowId(moduleId, rowId, key, { value, display, scale }) | 根据RowId设置表格某行某个字段值 | rowId 行id String key columns的键值 String { value, display, scale } 分别设置value值display值和scale值Objcct 不设置的项，可略去不写 |
undefined 执行函数 | setValByKeyAndRowId(‘table1’,34343.fggfe,’bank’,{value: ‘ff’ }) setValByKeyAndRowId(‘table1’,’34343.fggfe’,’bank’,{value: ‘11’, display: ‘示例’}) {value:null, display: null}); 清空 |
| 14、setValByKeyAndIndex(moduleId, index, key, { value, display, scale }) | 根据行序号设置表格某行某个字段值 index 0代表第一行 | index 行号 Number 单数字 key columns的键值 String { value, display, scale } 分别设置value值display值和scale值 Objcct 不设置的项，可略去不写 |
undefined 执行函数 | setValByKeyAndIndex(‘table1’,1,’bank’,{value: ‘ff’ }) setValByKeyAndIndex(‘table1’,1,’bank’,{value: ‘11’, display: ‘示例’}) |
| 15、resetTableData(moduleId, callback) | 取消编辑，将表格数据恢复到编辑前的值（以最近setTableData/updateTableData为界限） | callback 自定义回调 Function | undefined 执行函数 | resetTableData(‘tableDemo’) |
| 16、updateTableData(moduleId, data, callback) | 更新表格数据 | data 后台返回的data 需要有rowId 删除的数据不要返回 Object | undefined 执行函数 | updateTableData(‘tableDemo’, {rows: [{}]}) |
| 17、openModel(moduleId, type, record, index, callback) | 弹窗编辑 | type 编辑或新增 String ,add或edit record 当前行数据 Object 新增不用传入 index 当前行号 Number 新增不用传入 |
undefined 执行函数 | openModel(‘tableDemo’, ‘edit’, record, index) |
| 18、closeModel(moduleId, callback) | 关闭弹窗 | moduleId 区域id String | undefined 执行函数 | closeModel(‘tableDemo’) |
| 19、getValByKeyAndRowId(moduleId, rowId, key) | 根据RowId获取表格某行某个字段值 | rowId 行id String key columns的键值 String |
Object 数据对象 | getValByKeyAndRowId(‘table1’,34343.fggfe,’bank’) |
| 20、getValByKeyAndIndex(moduleId, index, key) | 根据行序号获取表格某行某个字段值 0代表第一行 | index 行号 Number/Array 单数字或者数字组成的数组 key columns的键值 String |
Object 数据对象 | getValByKeyAndIndex(‘table1’,1,’bank’) |
| 21、hideColByKey(moduleId, keys)） | 根据id和column的key隐藏某列 | keys 需要隐藏列键名 String/Array | undefined 执行函数 | hideColByKey(‘tableDemo’, [‘org_pk’,’name’]); hideColByKey(‘tableDemo’, ‘org_pk’) |
| 22、showColByKey(moduleId, keys) | 根据id和column的key显示某列 | keys 需要显示列键名 String/Array | undefined 执行函数 | showColByKey(‘tableDemo’, [‘org_pk’,’name’]); showColByKey(‘tableDemo’, ‘org_pk’) |
| 23、setEditableByRowId(moduleId, rowId, key, status) | 通过rowId和键设置表格某行某个字段编辑性 | RowId 行的RowId String/Array; key columns的键值 String/Array/0 0代表整行; flag true为可编辑 Boolean |
undefined 执行函数 | setEditableByRowId(‘tableDemo’, 0, [‘org_pk’,’name’], true) |
| 24、setEditableByIndex(moduleId, index, key, status) | 通过index和键设置表格某行某个字段编辑性 | index 行的index Number/Array; key columns的键值 String/Array/0 0代表整行; flag true为可编辑 Boolean |
undefined 执行函数 | setEditableByIndex(‘tableDemo’, [0, 1], [‘org_pk’,’name’], true) |
| 25、pasteRow(moduleId, index, keys) | 复制粘贴行，粘贴到index下方 | index 行序号-1 Number 不传默认为行首 keys 不去复制的键值 Array | undefined 执行函数 | pasteRow(‘tableDemo’, 1) pasteRow(‘tableDemo’, 1, [‘org_pk’,’name’]) |
| 26、getColValue(moduleId, key，flag) | 通过key获取表格某列数据 | key columns的键值 String， flag 是否是多表头，默认不是 | 列数据 Array | getColValue(‘tableDemo’,’org_pk’) |
| 27、setColValue(moduleId, key, { display, value, scale }) | 通过key设置表格某列数据 | key columns的键值 String; { value, display, scale } 分别设置value值display值和scale值 Objcct |
undefined 执行函数 | setColValue(‘tableDemo’,’org_pk’,{value: ‘11’, display: ‘示例’}) |
| 28、getCheckedRows(moduleId) | 获取选中行数据 | moduleId 区域Id String | [{index:1,data:{}},{index:2,data:{}}] Array 对象组成的数组 index为行号 data为行内数据 |
getCheckedRows(‘tableDemo’) |
| 29、selectAllRows(moduleId, checked) | 行全选/全不选 checked为true 全选 checked为false 全不选 |
checked 开关标志 Boolean | undefined 执行函数 | cardTable.selectAllRows(‘tableDemo’, false) |
| 30、selectRowsByIndex(moduleId, index) | 选中某些行的多选框(通过index) | index 行号 Number/Array 单数字或者数字组成的数组 | undefined 执行函数 | selectRowsByIndex(‘tableDemo’, [1,2]) |
| 31、unSelectRowsByIndex(moduleId, index) | 取消选中某些行的多选框(通过index) | index 行号 Number/Array 单数字或者数字组成的数组 | undefined 执行函数 | unSelectRowsByIndex(‘tableDemo’, [1,2]) |
| 32、reverseSelected(moduleId) | 反选中 | moduleId 区域Id String | undefined 执行函数 | reverseSelected(‘tableDemo’) |
| 33、filterEmptyRows(moduleId, keys, rule) | 过滤空行,keys为排除排查的键值, rule为规则，可不传入，默认为except | keys table里面的keys Array ; rule ‘except或者include其一,对keys的修饰’ String ; rule含义:except排除keys中的键然后对剩余字段进行求空行判断，include只对keys中字段进行求空行判断 |
undefined 执行函数 | filterEmptyRows(‘tableDemo’, [‘org_pk’]) |
| 34、getAllRowsRemoveKeys(moduleId, keys) | 获取不包含某键或者某些键的行数据，意思是通过传入的键过滤不想要的数据 | keys 需要排除的键名 String/Array/Undefined | 排除特定键的数组 Array | getAllRowsRemoveKeys(‘tableDemo’, [‘org_pk’,’name’]) |
| 35、toggleRowView(moduleId, record) | 切换视图，展开和收起 | record 行数据data Object | undefined 执行函数 | toggleRowView(‘tableDemo’, record) |
| 37、getCacheData(moduleId) | 获取当前表的缓存数据 | moduleId 区域id String | 数据对象 Object | getCacheData(‘tableDemo’) |
| 38、focusRowByIndex(moduleId, index) | 把index行设置为选中行 | index 行号 Number | undefined 执行函数 | focusRowByIndex(‘tableDemo’, 2) |
| 39、getMixinMetaData(moduleId) | 获取以模板数据为基准的全数组数据 | moduleId 区域Id String | 以meta为基准的全数据数组 Array | getMixinMetaData(‘tableDemo’) |
| 40、closeExpandedRow(moduleId) | 关闭任何的展开视图 | moduleId 区域Id String | undefined 执行函数 | closeExpandedRow(‘tableDemo’) |
| 41、getFilterRows(moduleId, key, value) | 筛选表格中指定数据的方法 | |||
| 42、setFiltrateTableData(tableId, key, value, isShowAll) | 设置筛选后的表格数据 | tableId 表格的id String, key 所要搜索表格数据中的属性 String或Array, value 所要搜索表格数据中的value String,isShowAll 筛选不到是否展示全数据 Boolean | undefined 执行函数 | setFiltrateTableData(‘tableDemo’, [‘name’], ‘zhangsan’, false) |
| 43、batchChangeTableData(moduleId) | 批量修改 | moduleId 区域Id String | undefined 执行函数 | batchChangeTableData(‘tableDemo’) |
| 44、openListView(moduleId, flag) | 最大化多表中表体卡片列表 | flag 开关 Boolean ; flag为true唤起 |
undefined 执行函数 | openListView(‘tableDemo’) |
| 45、openMaxTable(moduleId, flag) | 最大化多表体表格 | flag 开关 Boolean ; flag为true唤起 |
undefined 执行函数 | openMaxTable(‘tableDemo’) |
| 46、updateDataByIndexs(moduleId, record) | 更新多行的数据（根据index值） | record 需要设置的数据数组 Array | undefined 执行函数 | updateDataByIndexs(‘tableDemo’, [{index: 1,data: {status: ‘0,values: {}}}, …]) |
| 47、insertDataByIndexs(moduleId, record) !!!仅供编辑后使用 |
更新多行的数据（根据index值） | record 需要设置的数据数组 Array | undefined 执行函数 | insertDataByIndexs(‘tableDemo’, [{index: 1,data: {status: ‘0,values: {}}}, …]); insertDataByIndexs(‘tableDemo’, [{index: 1,data: [{status: ‘0’,values: {…}}, {status: ‘0’,values: {…}}]}, …]) |
| 48、setRowStatusByIndexs(moduleId, arr) | 根据index设置行数据的状态 | arr 需要设置的数据数组 Array | undefined 执行函数 | setRowStatusByIndexs(‘tableDemo’, [{index: 1,status: ‘2’}, {index: 2,status: ‘1’}, …]) |
| 49、getMetaValByKey(moduleId, key) | 根据key键获取模板中数据 | key 需要查询的meta中键 String | item项或者null Object | getMetaValByKey(‘tableDemo’, ‘bank’) |
| 50、setColEditableByKey(moduleId, key, flag) | 设置某一列的编辑性 | key 需要设置的meta中的键 String/Array flag 编辑性，true为不可编辑(默认true) Boolean | undefined 执行函数 | setColEditableByKey(‘tableDemo’, ‘bank’) ; setColEditableByKey(‘tableDemo’, [‘bank’, ‘ic_group’], false) |
| 51、insertRowsAfterIndex(moduleId, data, index) | 多行数据插入到index行后 | data 多行数据的数组或者单行对象 Array/Obejct index 行序号-1 Number | undefined 执行函数 | insertRowsAfterIndex(‘tableDemo’, record, 1) ; insertRowsAfterIndex(‘tableDemo’, [record1,record2,record3 ], 1) |
| 52、setTdEditByIndex(moduleId, index, key, flag) | 设置某个单元格为编辑态 | index 行序号-1 Number key 单元格的键 String flag 是否为编辑态 默认为true Boolean |
undefined 执行函数 | setTdEditByIndex(‘tableDemo’, 1, ‘org_pk’) ; setTdEditByIndex(‘tableDemo’, 1, ‘org_pk’, false) |
| 53、setValByKeysAndIndex(moduleId, index, origin) | setValByKeyAndIndex的批量形式 | origin的格式{key1: {display: ‘’, value: ‘’}, key2: {display: ‘’}} ,…} | undefined 执行函数 | setValByKeysAndIndex(‘table1’,1,{bank:{value: ‘11’, display: ‘示例’},{ bank2:{value: ‘11’, display: ‘示例’}, …. }) |
| 54、setAllCheckboxAble(moduleId, flag) | 设置所有左侧复选禁/启用 | flag 是否为禁/启用 默认为false（禁用） Boolean | undefined 执行函数 | setAllCheckboxAble(‘table1’,false) |
| 55、getModalDataByIndex(moduleId, index) | 获取侧拉数据(根据index) | index 行序号-1 Number | Object 返回侧拉键和值组成的对象 | getModalDataByIndex(‘table1’,1) |
| 56、showEditAreaKey(moduleId, key, flag) | 设置侧拉某控件显隐 | key 侧拉控件的键 String/Array flag 是否为显示 默认为flase不显示 Boolean |
undefined 执行函数 | showEditAreaKey(‘table1’,’bank’, false) ; showEditAreaKey(‘table1’,[‘bank’, ‘ic_group’], false) |
| 57、toggleCardTable(moduleId, flag) | 控制主表的收起展开 | moduleId可以为数组 flag 是否为收起展开 默认为flase收起 Boolean | undefined 执行函数 | toggleCardTable(‘table1’, false) ; cardTable.toggleCardTable([‘revecont_b’, ‘material’], false) |
| 58、setMulTablesData(data) | setTableData的批量形式 | data格式为：{id1: {rows: […]}, id2: {rows: […]} } | undefined 执行函数 | cardTable.setMulTablesData({‘revecont_b’: res.data.body1,’material’: res.data.body2}) |
| 59、getRowsByIndexs(moduleId, index) | 根据index获取多行数据 | index 行序号-1 Number/Array | Array 返回数据组成的数组 | getRowsByIndexs(‘revecont_b’,[1,3]) getRowsByIndexs(‘revecont_b’,2) |
| 60、saveChangedRowsOldValue(moduleId, index, attrcode, value) | 根据index和列键值赋值旧值 | index 行序号-1 Number attrcode 列键值 String value 旧值 Any | undefined 执行函数 | saveChangedRowsOldValue(‘revecont_b’,2,’org_pk’, ‘我是旧值’) |
| 61、delChangedRowsOldValue(moduleId, index, attrcode) | 根据index/列键值删除旧值 | index 行序号-1 Number attrcode（可省略，如省略删除整行旧值） 列键值 String | undefined 执行函数 | delChangedRowsOldValue(‘revecont_b’,2,’org_pk’) |
| 62、getChangedRowsOldValue(moduleId, index, attrcode) | 根据index和列键值获取旧值 | index 行序号-1 Number attrcode 列键值 String | undefined 执行函数 | getChangedRowsOldValue(‘revecont_b’,2,’org_pk’) |
| 63、checkTableRequired(moduleId) | 检验表格数据的必输项（不传,默认是多子表都校验） | moduleId(可不传入) 表格的主Id String/Array/undefined | Boolean true/false 通过为true/不通过为false并提示 | checkTableRequired(‘revecont_b’) checkTableRequired() checkTableRequired([‘revecont_b’, ‘material’]) |
| 64、setColScale(list) | 设置某些表格，某些列的精度 | list数据结构 [{areacode: ‘tableid’, filedcode: ‘colkey’, scale: “2”}, ….]，areacode(区域id)， filedcode(列对应的attrcode), scale(精度) | undefined 执行函数 | setColScale**([{areacode: ‘tableid’, filedcode: ‘colkey’, scale: “2”}, ….]) |
| 65、getClickRowIndex(tableId) | 获取当前点击行 | tableId 表格的id String | {index, record} 执行函数 | getClickRowIndex(‘tableDemo’) |
| 66、setQueryCondition(tableId, data) | 统一给表体和侧拉添加参照过滤 | tableId 表格的id ，data就是要添加参照过滤的字段和对应参照过滤的数据格式 { name: QueryCondition, age: QueryCondition } | undefined 执行函数 | setQueryCondition(‘tableDemo’， {name: () => {}) |
| 67、setAllKeysVal(tableId, rows) | 给表格所用单元格设值 | tableId表格的id, rows表格所有行数据 | undefined 执行函数 | setAllKeysVal(‘tableDemo’，[{ status:v ‘1’, rowid: ‘111111’, values: { name: { value: 1, dispaly: 1, scale: ‘1’ } }}]) |
| 69、getClickRowIndex(tableId) | 获取当前点击行 | tableId表格的id | undefined 执行函数 | getClickRowIndex(‘tableDemo’) |
| 70、setSaveData(tableId, data) | 通过传入的数据给单元格重新设值 | tableId表格的id，data是行数据 | undefined 执行函数 | setSaveData(‘tableDemo’，{rows:[{ status:v ‘1’, rowid: ‘111111’, values: { name: { value: 1, dispaly: 1, scale: ‘1’ } }}]}) |
| 71、getDataByIndex(tableId, index) | 根据index获取某行数据 | tableId表格的id,index:索引 | undefined 执行函数 | getDataByIndex(‘tableDemo’，1) |
| 72、updateDataByRowId(tableId, data, flag) | 根据传入数据更新表格数据 | tableId表格的id,data:行数据, flag是否过滤掉删除的行(默认不过滤) | 返回表格全数据 执行函数 | updateDataByRowId(‘tableDemo’，{rows：[{ status:v ‘1’, rowid: ‘111111’, values: { name: { value: 1, dispaly: 1, scale: ‘1’ } }}]}) |
| 73、setColsValue(tableId, colArr) | 设置表格某些列为同一个数据 | tableId表格的id，colArr:[{ key :key, data: { display, value, scale }} ] | undefined 执行函数 | setColsValue(‘tableDemo’，[{ key:v ‘1’,name: { value: 1, dispaly: 1, scale: ‘1’ } ]) |
| 74、setColVisibleByKey(tableId, data) | 设置列的显示性 | tableId表格的id，data:columns的键值 { hideKeys: [], showKeys: [] } | undefined 执行函数 | setColVisibleByKey(‘tableDemo’，{ hideKeys: [‘1’], showKeys: [‘2’] }) |
| 75、setModelEdit(tableId, key, flag) | 设置行侧拉编辑性 | tableId表格的id，key键值 字符串或者数组 , flag 编辑性 true(可编辑)或false(不可编辑) | undefined 执行函数 | setModelEdit(‘tableDemo’,[‘name’, ‘age’], false) |
| 76、getCurrentIndex(tableId) | 获得当前行 | tableId表格的id | currentIndex 当前选中行 | getCurrentIndex(‘tableDemo’) |
| 77、moveRow(tableId, indexStart, indexEnd) | 移动行的方法 | tableId表格的id，indexStart开始索引位置 , indexEnd 结束索引位置 | undefined 执行函数 | moveRow(‘tableDemo’, 0, 1) |
| 78、setRowEditByIndex({tableId, index, flag}) | 通过Index设置表格某些行的编辑性 | tableId表格的id，index 行序号-1 （数字数组或者数字), flag 编辑性 true(可编辑)或false(不可编辑) | undefined 执行函数 | setRowEditByIndex({ tableId:’tableDemo’, index:0, flag:ture }) |
| 79、saveFilterCustomColData(tableId, { attrcode, rowId, value }) | 存储自定义列的显示数据 | tableId表格的id，attrcode(当前列字段), rowId(当前行rowid), value(自定义显示的数据) | undefined 执行函数 |
孙表API
| 方法名 | 方法说明 | 参数 说明 类型 可选值 | 返回值 类型 | 示例 |
|---|---|---|---|---|
| 1、setGrandTableData({rowid, parentId, tableId, data, callback, isCache, isTop }) | 设置孙表的数据 !!特别注意!!如果孙表没有数据，要给孙表设置默认空值{rows: []} | rowid 子表行数据的rowid，parentId 子表id，tableI：孙表id，data 孙表数据，callback 设值之后的回调函数，isCache 是否缓存孙表数据用于取消操作(默认true是缓存) | 无 | setGrandTableData**({rowid: ‘1233444555’, parentId: ‘parenttable’, tableId:grandtable, data:{rows:[]}, callback:()=>{}, isCache: true, isTop : false}) |
| 2、getAllGrandData({parentId}) | 获取所有孙表的数据 | parentId 子表Id | obj | getAllGrandData**({parentId: ‘parenttable’}) |
| 3、getRowIdFromPkcode({ parentId, plcodeValue }) | 根据pkcode的值获取子表行id | parentId 子表Id，plcodeValue plcode具体值 | obj | getRowIdFromPkcode({ parentId: ‘test’, plcodeValue: ‘plcodeValue’ }) |
| 4、delCacheGrandData({ parentId, rowidList, delAll }) | 删除完整的孙表数据中的数据 | parentId 子表Id，rowidList 子表rowid数组(只有部分删除需要这个参数) delAll 是否全部删除(默认是false,不全删除, 只有全部删除需要这个参数) | delCacheGrandData({ parentId: ‘test’, rowidList:[‘122wwssss’], delAll:false }) | |
| 5、这个api已经被删除了getPkcodeFromRowId({ parentId, rowid })，以后请用这个api getValByKeyAndRowId | ||||
| 6、filterEmptyGrandRows(parentId, grandTableConfig) | 过滤子表的所有孙表数据 | parentId 子表Id, grandTableConfig 孙表过滤规则 | 无 | filterEmptyGrandRows(bodycode,{ grandcode1:{ keys: [], rule: ‘except’/‘include’}, grandCode2:{ keys: [], rule: ‘except’/‘include’} }) |
| 7、其他api和cardtable相同 |
createCardTable的config回调和自定义参数
| 函数名 | 方法说明 | 暴露出来的参数 | 示例 | 备注 |
|---|---|---|---|---|
| modelSave | 整单保存钩子函数 | props(page的总输出), modelIndex(当前侧拉展开行) | function modelSave(props, modelIndex) {} | |
| hideModelSave | 是否隐藏整单保存按钮 | — | false | 默认显示，当值为true时候隐藏 |
| hideAdd | 是否隐藏增行按钮 | — | false | 默认显示，当值为true时候隐藏 |
| hideDel | 是否隐藏删行按钮 | — | false | 默认显示，当值为true时候隐藏 |
| modelClose | 侧拉关闭钩子函数 | props | ||
| modelFooter | 侧拉自定义功能区域 | — | props, moduleId表格id，modelIndex(行索引)，record(行数据) | modelFooter：(props, moduleId，modelIndex，record) => { return }返回一个react的element |
| modelDelRowBefore | 侧拉删行之前钩子函数 | — | props, moduleId表格id, modelIndex行索引,record行数据 | return true就是可删行，return false就是不可删行 |
| modelDelRow | 侧拉删行钩子函数 | — | props, moduleId表格id | |
| modelAddRow | 侧拉增行钩子函数 | — | props, moduleId表格id, modelIndex行索引 | |
| modelAddRowBefore | 侧拉增行之前钩子函数 | — | props, moduleId表格id, modelIndex行索引 | 返回true就是可增行，返回false就是不可 |
| tableHead | 右侧肩部功能区创建 | — | tableHead：this.renderTableHead | 返回一个react的element |
| tableHeadLeft | 左侧肩部功能区创建 | — | tableHeadLeft：this.renderTableHeadLeft | 返回一个react的element |
| onAfterEvent | 表格单元格的编辑后事件 | props, moduleId(区域id), key(操作的键), value（当前值）, changedrows（新旧值集合）, index（当前index）, record（行数据）,type(表格内为line，弹窗为modal), method(有blur有change) | ||
| onBeforeEvent | 表格单元格的编辑前事件 | props, moduleId(区域id), key(操作的键), value（当前值）, index（当前index）, record（行数据），status（当前的是侧拉还是表体，’line’表示表体，’model’表示侧拉） | 必须有返回值 返回值为Boolean，为true编辑态，为false浏览态 | |
| onSelected | 左侧选择列单个选择框回调 | props, moduleId(区域id), record（行数据）, index（当前index）, status（选框值） | ||
| onTabChange | 多页签点击钩子函数 | props, moduleId(区域id), key（点击的tab的键值） | ||
| onSelectedAll | 左侧选择列全选回调 | props, moduleId(区域id), status（选框值）, length（选中数量） | ||
| selectedChange | 选择框有变动的钩子函数 | props, moduleId(区域id), newVal(被选中的行数), oldVal(旧的被选中的行数) | ||
| onRowClick | 单击行钩子函数 | props, moduleId(区域id), record（行数据）, index（当前index），e(事件对象) | ||
| onRowDoubleClick | 双击行钩子函数 | props, record（行数据）, index（当前index）,e(事件对象) | ||
| onHeadAngleToggle | 点击表头左侧的收起展开小三角 | props, moduleId(区域id), value（true/false当前展开或者收起值） | ||
| hideColSet | 隐藏列设置按钮 | function 返回false就是隐藏，返回true或者不设置默认是展示 | ||
| hideSwitch | 隐藏全表展开按钮 | function 返回false就是隐藏，返回true或者不设置默认是展示 | ||
| sideTitle | 自定义侧拉序号区域 | function 返回值就是需要自定义值 | ||
| adaptionHeight | 表格是否自适应高度，占满屏幕 | 默认不占满，(false) | ||
| otherAreaHeight | 表格自适应高度时表格底部其他部分的高度, 减去这个高度等于最终表格高度 | 数字类型 | ||
| params | 自定义传参 | — | — | — |
| showCheck | 显示复选框 | — | true | — |
| showIndex | 显示序号列 | — | true | — |
| isAddRow | 鼠标离开最后一行，是否默认增行 | — | true | — |
| noTotalRows | 设置某些行的某些属性不可合计，作用于cardtable的每个tab表格 | — | noTotalRows: () => { return [{ code: [“npobnum”], indexArr: 2 },….] } | — |
| allowTotalRows | 设置可合计的行，作用于cardtable的每个tab表格 | — | allowTotalRows: () => { return [3] } | — |
| noTotalCol | 设置不可合计的列 | — | [‘npobnum’] | — |
| showTotal | 设置是否展示合计行,通过模版设置isTotal属性，和设置当前属性，都可以展示合计行，！！！！！！！但是模版设置合计行和这个属性不能同时设置,除非所有的列都想合计才用这个属性，否则都需要在模版上设置！！！！！！ | — | true或false | — |
| addRowCallback | 自动增行后的回调 | |||
| addRowDefaultValue | 给自动增的行设置默认值，是一个函数，返回值是默认值数据，格式和增行的默认值格式相同 | |||
| height | 设置表格高度 | — | 465 | — |
| setCellClass(index, record, ICode) | 设置单元格的类名 | index表示当前行，record当前行数据，ICode当前字段 | setCellClass={() => { return ‘calssname’ } 返回值是对应的类名 | |
| sideRowChange | 侧拉行切换按钮回调 | row 行数据 | sideRowChange:(row) => { } | |
| rowClassList | 给表体行添加自定义类名 | rowClassList 是数组, 数组里面是对象 ，详见例子，index 行索引（可以是数字或者数字数组） className 类名 | rowClassList: [{index: 1, className: ‘test-one’}] | |
| sort | 表格后端排序 | backSource:true，表示后端排序，mode:’multiple’(多列排序) 或’single’(单列排序)(如果前端排序的时候想多列排序，对象里就穿这个字段就可以了),sortFun 后端排序的回调函数 | sort={mode:’multiple’,backSource:true,sortFun:(a)=> {console.log(a)}} | |
| grandTableId | 孙表相关配置 孙表的模版id | — | grandTableId:’material | |
| grandTableConfig | 孙表相关配置 孙表的config配置项，除了侧拉的部分，孙表的config配置项与cardTable的config支持的相同 | — | grandTableConfig:{showCheck: true,showIndex: true} | |
| grandComponentDidMount | 孙表的grandTableConfig内的配置项，表示在孙表挂载后，执行的回调 | — | grandTableConfig:{grandComponentDidMount: () => {console.log(1111)}} | |
| pkcode | 孙表相关配置,但是需要在子表的config里配置 子表行中与孙表建立关系的字段，字段由业务组自己设定 | — | pkcode: ‘flag’ | |
| grandGroup | 上面三个配置(grandTableId，grandTableConfig)都需要放在grandGroup中才会生效，grandGroup表格所有孙表的配置项，是一个数组 | — | grandGroup: [{ grandTableId:’material’,grandTableConfig:{ showCheck: true,showIndex: true}}, { grandTableId:’grandMaterial’, grandTableConfig:{ showCheck: true, showIndex: true } }] | |
| multipleRowCell | 表格中单元格内容过多，显示多行还是单行省略 | — | false | 默认false单行省略 |
| merge | 用于表格单元格合并 | index:当前单元格行序号，从0开始，attrcode，当前单元格的所在列的attrcode | 例子：(index, attrcode)=>{if(index0&&attrcode ‘cpobid’){ return {colSpan:1,rowSpan:2} } if(index1&&attrcode ‘cpobid’){ return {colSpan:1,rowSpan:0} }} 注意：如果要合并当前单元格和下面一个单元格也就是rowspan设为2，需要把下面的单元格rowspan设为0，colspan同样，如果合并3个格，就需要把下两个格设为0，以此类推 |
注意，当使用懒加载表格的时候，需要使用mergeEndIndex这个属性，不然会出现行错乱，使用方式：与rowspan和colspan同时返回，如果110行合并，值为10,1120合并，值为20，以此类推 |
| modalCustomerArea | 用于表格侧拉中创建自定义区域 | (pagescope)=>{return（dom）} | ||
| lazyload | 用于控制表格是不是大数据（懒加载）表格 | — | true |
cardTable的模版里的item的特定功能的设置
| 功能名称 | 属性名 | 方法说明 | 示例 |
|---|---|---|---|
| 列排序(前端排序) | isSort默认为true | 表格默认对所有列前端排序，如果想自定义排序，需要在item里自行注册sorter=() => {}函数,使用方法和数组的sort方法一样。 | {itemtype: “number”,visible: true,label: “分配金额”,isSort: true,attrcode: “nallotmny”}或{itemtype: “number”,visible: true,label: “分配金额”,sorter:() => {return -1},attrcode: “nallotmny”} |
| 决定什么状态渲染自定义单元格内容 | renderStatus | browse 表示浏览态渲染自定义单元格内容（此时表格需要是浏览态），edit表示编辑态渲染自定义单元格内容（此时表格需要是编辑态） | { table_b: { pagination: true, items: [{itemtype: “refer”, maxlength: “20”,renderStatus: ‘browse’,render:() => {return ()} visible: true, label: “财务组织最新版本”, width: “140px”, disabled: true, color: “red”}] |
若有收获，就点个赞吧
0 人点赞
