EasyUI datagrid 合并行方式

最新推荐文章于 2024-09-06 10:02:37 发布

Stickers7

最新推荐文章于 2024-09-06 10:02:37 发布

阅读量1.1k

点赞数

分类专栏： datagrid 文章标签： javascript easyui

本文链接：https://blog.csdn.net/luoyoupp/article/details/118732095

版权

datagrid 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：在表格数据和格式确定的情况下，合并特定的行，可以进行单元格编辑
在这里插入图片描述

在这里插入代码片
onLoadSuccess: function () {
            var merges = [{
                index: 3,
                rowspan: 6
            }, {
                index: 9,
                rowspan: 2
            }];
            for (let item of merges) {
                $('#mainTable').datagrid('mergeCells', {
                    index: item.index,
                    field: 'rowNumber',
                    rowspan: item.rowspan
                });
                $('#mainTable').datagrid('mergeCells', {
                    index: item.index,
                    field: 'assessProject',
                    rowspan: item.rowspan
                });
            }
        },

// 如果要做单元格编辑的话，需要在onSelecet()中添加如onLoadSuccess()中的方法，这样才不会使表格发生错乱
onSelect: function (index, row) {
            var merges = [{
                index: 3,
                rowspan: 6
            }, {
                index: 9,
                rowspan: 2
            }];
            for (let item of merges) {
                $('#mainTable').datagrid('mergeCells', {
                    index: item.index,
                    field: 'rowNumber',
                    rowspan: item.rowspan
                });
                $('#mainTable').datagrid('mergeCells', {
                    index: item.index,
                    field: 'assessProject',
                    rowspan: item.rowspan
                });
            }
            // 关闭当前编辑的列
            $('#mainTable').datagrid('endEdit', rowIndex);
        }