效果如下:
效果图源码如下:
rowspan: 2 (表示该列跨两行)
colspan: 2 (表示跨两列)
(以下代码有重复部分已省略,仅以实现功能展示效果为主)
columns: [
[
{ field: 'forecast', title: '预估出货量', rowspan: 2, align: 'center', titleAlign: true },
{ field: 'solution', title: '方案选择', rowspan: 2, align: 'center', titleAlign: true,
editor: { options: {valueField: 'docTypeCn', textField: 'docTypeCn', panelHeight: 'auto'}
type: 'textbox', options: {readonly:true} } },
{field: 'cost', title: '场地占用成本', colspan: 2,rowspan: 1,align: 'center', titleAlign: true,
editor: {type: 'textbox', options: {required: true}}},
{field: 'human', title: '人力投入', colspan: 3, rowspan: 1, align: 'center', titleAlign: true,
editor: {type: 'textbox', options: {required: true}}},
{ field: 'device', title: '设备投资', colspan: 4, rowspan: 1,align: 'center', titleAlign: true,editor: {type: 'textbox', options: {required: true}} },
{ field: 'mOutput', title: '月产能', width: 10, rowspan: 2, align: 'center', titleAlign: true,editor: { type: 'textbox'}},
{field: 'unitCost',title: '单位成本', width: 10,rowspan: 2,align: 'center',titleAlign: true,editor: { type: 'textbox'}},
],[
{field: 'needArea', title: '所需面积', rowspan: 1, align: 'center', titleAlign: true, editor: { type: 'textbox'}}, { field: 'areaMde', title: '月折旧',rowspan: 1, align: 'center', titleAlign: true,editor: {type: 'textbox'} },
{ field: 'operatorLevel', title: '人员类别', rowspan: 1, align: 'center', titleAlign: true, editor: { type: 'textbox'} // disabled: true },
{ field: 'number', title: '人数', rowspan: 1, align: 'center', titleAlign: true, editor: { type: 'textbox'}// disabled: true },
{ field: 'mCost',title: '月薪资',rowspan: 1,align: 'center',titleAlign: true, editor: { type: 'textbox'} // disabled: true },
{ field: 'eipType', title: '设备投资方式', rowspan: 1,align: 'center', titleAlign: true,editor: { type: 'textbox'} // disabled: true },
{field: 'eipAmound', title: '设备投资总额', rowspan: 1,align: 'center', titleAlign: true,editor: { type: 'textbox'}// disabled: true },
{ field: 'eMde', title: '月折旧', rowspan: 1,align: 'center',titleAlign: true,editor: { type: 'textbox'} // disabled: true },
{ field: 'weaCost', title: '水、电、气', rowspan: 1,
align: 'center', titleAlign: true,editor: { type: 'textbox'}// disabled: true },
]
],
网友评论