amis2/examples/components/Form/Table.jsx

146 lines
2.9 KiB
React
Raw Normal View History

2019-04-30 11:11:25 +08:00
export default {
2019-11-07 10:41:14 +08:00
title: '表格编辑',
body: {
type: 'form',
mode: 'horizontal',
api: '/api/mock2/form/saveForm?waitSeconds=2',
actions: [
{
type: 'submit',
label: '提交',
primary: true
}
],
body: [
2019-11-07 10:41:14 +08:00
{
type: 'combo',
name: 'colors',
label: 'Combo',
multiple: true,
draggable: true,
multiLine: true,
value: [
{
color: 'green',
name: '颜色'
}
2019-04-30 11:11:25 +08:00
],
items: [
2019-11-07 10:41:14 +08:00
{
type: 'input-color',
name: 'color',
clearable: false
2019-11-07 10:41:14 +08:00
},
{
type: 'input-text',
2019-11-07 10:41:14 +08:00
name: 'name',
placeholder: '说明文字'
}
]
},
{
type: 'static',
label: '当前值',
tpl: '<pre>${colors|json}</pre>'
},
{
type: 'input-table',
2019-11-07 10:41:14 +08:00
name: 'colors',
label: 'Table',
draggable: true,
2020-08-18 10:07:26 +08:00
addable: true,
removable: true,
needConfirm: false,
2019-11-07 10:41:14 +08:00
columns: [
{
label: 'Color',
name: 'color',
type: 'input-color',
quickEdit: false
2019-11-07 10:41:14 +08:00
},
{
label: '说明文字',
2020-08-18 10:50:06 +08:00
name: 'name'
2019-11-07 10:41:14 +08:00
}
]
},
{
type: 'control',
body: {
type: 'button',
label: 'Table2新增一行',
target: 'table2',
actionType: 'add'
}
2019-11-07 10:41:14 +08:00
},
{
type: 'input-table',
2019-11-07 10:41:14 +08:00
name: 'table2',
label: 'Table2',
editable: true,
addable: true,
removable: true,
draggable: true,
columns: [
{
name: 'a',
label: 'A'
},
{
name: 'b',
label: 'B',
quickEdit: {
type: 'select',
options: [
{
label: 'A',
value: 'a'
},
{
label: 'B',
value: 'b'
}
]
}
}
]
},
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
{
type: 'input-table',
2019-11-07 10:41:14 +08:00
name: 'table3',
label: 'Table3(指定第2列只有update时能编辑)',
editable: true,
addable: true,
removable: true,
draggable: true,
columns: [
{
name: 'a',
label: 'A',
quickEdit: true
},
{
name: 'b',
label: 'B',
quickEdit: false,
quickEditOnUpdate: {
type: 'select',
options: [
{
label: 'A',
value: 'a'
},
{
label: 'B',
value: 'b'
}
]
2019-04-30 11:11:25 +08:00
}
2019-11-07 10:41:14 +08:00
}
2019-04-30 11:11:25 +08:00
]
2019-11-07 10:41:14 +08:00
}
]
}
2019-04-30 11:11:25 +08:00
};