diff --git a/docs/zh-CN/components/form/input-table.md b/docs/zh-CN/components/form/input-table.md index 254dd497fac..581fd92b807 100755 --- a/docs/zh-CN/components/form/input-table.md +++ b/docs/zh-CN/components/form/input-table.md @@ -917,6 +917,11 @@ order: 54 | deleteSuccess | `index: number` 所在行记录索引
`item: object` 所在行记录
`[name]: object[]`列表记录 | 配置了`deleteApi`,调用接口成功时触发 | | deleteFail | `index: number` 所在行记录索引
`item: object` 所在行记录
`[name]: object[]`列表记录
`error: object` `deleteApi`请求失败后返回的错误信息 | 配置了`deleteApi`,调用接口失败时触发 | | change | `[name]: object[]` 列表记录 | 组件数据发生改变时触发 | +| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 | +| rowClick | `item: object` 行点击数据
`index: number` 行索引 | 单击整行时触发 | +| rowDbClick | `item: object` 行点击数据
`index: number` 行索引 | 双击整行时触发 | +| rowMouseEnter | `item: object` 行移入数据
`index: number` 行索引 | 移入整行时触发 | +| rowMouseLeave | `item: object` 行移出数据
`index: number` 行索引 | 移出整行时触发 | ### add @@ -1563,6 +1568,287 @@ order: 54 } ``` +### orderChange + +在开启拖拽排序行记录后才会用到,排序确认后触发。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "table": [ + { + "id": 1, + "a": "a1", + "b": "b1" + }, + { + "id": 2, + "a": "a2", + "b": "b2" + } + ] + }, + "body": [ + { + "showIndex": true, + "type": "input-table", + "name": "table", + "columns": [ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ], + "addable": true, + "draggable": true, + "onEvent": { + "orderChange": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "${event.data.movedItems.length|json}行发生移动" + } + } + ] + } + } + } + ] +} +``` + +### rowClick + +点击行记录。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "table": [ + { + "id": 1, + "a": "a1", + "b": "b1" + }, + { + "id": 2, + "a": "a2", + "b": "b2" + } + ] + }, + "body": [ + { + "showIndex": true, + "type": "input-table", + "name": "table", + "columns": [ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ], + "addable": true, + "onEvent": { + "rowClick": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "行单击数据:${event.data.item|json};行索引:${event.data.index}" + } + } + ] + } + } + } + ] +} +``` + +### rowDbClick + +双击行记录。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "table": [ + { + "id": 1, + "a": "a1", + "b": "b1" + }, + { + "id": 2, + "a": "a2", + "b": "b2" + } + ] + }, + "body": [ + { + "showIndex": true, + "type": "input-table", + "name": "table", + "columns": [ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ], + "addable": true, + "onEvent": { + "rowDbClick": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "行单击数据:${event.data.item|json};行索引:${event.data.index}" + } + } + ] + } + } + } + ] +} +``` + +### rowMouseEnter + +鼠标移入行记录。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "table": [ + { + "id": 1, + "a": "a1", + "b": "b1" + }, + { + "id": 2, + "a": "a2", + "b": "b2" + } + ] + }, + "body": [ + { + "showIndex": true, + "type": "input-table", + "name": "table", + "columns": [ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ], + "addable": true, + "onEvent": { + "rowMouseEnter": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "行索引:${event.data.index}" + } + } + ] + } + } + } + ] +} +``` + +### rowMouseLeave + +鼠标移出行记录。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "data": { + "table": [ + { + "id": 1, + "a": "a1", + "b": "b1" + }, + { + "id": 2, + "a": "a2", + "b": "b2" + } + ] + }, + "body": [ + { + "showIndex": true, + "type": "input-table", + "name": "table", + "columns": [ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ], + "addable": true, + "onEvent": { + "rowMouseLeave": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "行索引:${event.data.index}" + } + } + ] + } + } + } + ] +} +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定 actionType: 动作名称、componentId: 该组件 id 来触发这些动作,动作配置可以通过 args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作。 diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index 1667515dfaa..7e2ac69d0de 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -2324,6 +2324,70 @@ popOver 的其它配置请参考 [popover](./popover) } ``` +### rowDbClick + +双击整行时触发。 + +```schema: scope="body" +{ + "type": "service", + "api": "/api/mock2/sample?perPage=10", + "body": [ + { + "type": "table", + "source": "$rows", + "onEvent": { + "rowDbClick": { + "actions": [ + { + "actionType": "toast", + "args": { + "msgType": "info", + "msg": "行单击数据:${event.data.item|json};行索引:${event.data.index}" + } + } + ] + } + }, + "columns": [ + { + "name": "id", + "label": "ID", + "searchable": true + }, + { + "name": "engine", + "label": "Rendering engine", + "filterable": { + "options": [ + "Internet Explorer 4.0", + "Internet Explorer 5.0" + ] + } + }, + { + "name": "browser", + "label": "Browser", + "sortable": true + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] + } + ] +} +``` + ### rowMouseEnter 鼠标移入行记录。 diff --git a/packages/amis/src/renderers/Form/InputTable.tsx b/packages/amis/src/renderers/Form/InputTable.tsx index 271e0f902f2..d7264c8852e 100644 --- a/packages/amis/src/renderers/Form/InputTable.tsx +++ b/packages/amis/src/renderers/Form/InputTable.tsx @@ -1592,7 +1592,8 @@ export default class FormTable extends React.Component { static: isStatic, showFooterAddBtn, footerAddBtn, - toolbarClassName + toolbarClassName, + onEvent } = this.props; const maxLength = this.resolveVariableProps(this.props, 'maxLength'); @@ -1627,7 +1628,8 @@ export default class FormTable extends React.Component { prefixRow, affixRow, autoFillHeight, - tableContentClassName + tableContentClassName, + onEvent }, { ref: this.tableRef.bind(this),