美文网首页easyUI开发实战案例
datagrid合并表头单元格

datagrid合并表头单元格

作者: 兰觅 | 来源:发表于2020-05-16 17:09 被阅读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 },
                ]

        ],

其他可参考

相关文章

  • datagrid合并表头单元格

    效果如下: 源码如下: rowspan: 2 (表示该列跨两行)colspan: 2 (表示跨两列)(以下代码有...

  • 美化easyui样式及合并单元格

    美化easyui样式(需要修改easyui datagrid部分源码)及合并单元格 1.修改datagrid样式 ...

  • table 表格合并行或列

    合并单元格 合并边框 单元格宽度固定 注: 使用 标签, 打印时每页可自动生成表头

  • easyui的树形表格treegrid实现合并单元格的功能

    easyui的datagrid数据表格实现单元格是很容易实现的,但是想要树形结构treegrid的表格合并单元格就...

  • 2019-11-20

    表头表头单元格单元格单元格单元格

  • table 表格固定表头和前几列

    html 原生 合并单元格 :html实例: 2.效果 :运行代码就可,左侧几列固定,表头固定,右侧滑动

  • 10.10个小技巧

    1.斜线表头(设置单元格) 如图一,姓名和月份强制换行,A1单元格右键设置单元格格式-边框 2.多文本合并(ctr...

  • html css table常用属性

    ▪caption: 元素定义表格标题 ▪ :标记及其属性,表头 ▪ colspan=”2” 合并同一行上的单元格...

  • md 使用

    图片 控制尺寸 是是是 啊啊啊的 好 头 表头表头单元格单元格单元格单元格

  • Vue 关于Table的一些操作

    最近一直使用element 写前端写一些经常用到的案例 合并Table单元格 表头合并采用的是结合CSS隐藏的方式

网友评论

    本文标题:datagrid合并表头单元格

    本文链接:https://www.haomeiwen.com/subject/mjecohtx.html