easyUI开发实战案例

datagrid合并表头单元格

2020-05-16  本文已影响0人  兰觅
效果如下:
效果图
源码如下:

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 },
                ]

        ],

其他可参考

上一篇下一篇

猜你喜欢

热点阅读