easyui datagrid 表格合并表格内单元格

hey_ner

于 2024-09-06 10:02:37 发布

阅读量365

点赞数 1

分类专栏： easyui 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/Griner_/article/details/141951538

版权

easyui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.横多级表头，竖合并单元格

              $("#table1").datagrid({
                   ...
                    columns: [cols,[...cols1]],
                    loadFilter: function (data) {
                        if (data.success && data.data) {
                            return data.data;
                        } else {
                            return {
                                total: 0,
                                rows: []
                            };
                        }
                    },
                    onBeforeLoad: (param)=>{
                       ...
                    },
                    onLoadSuccess:function(){
                        var merges = [{
                            index:0,
                            rowspan:6  //合并单元格 6行
                        }];
                        for(var i=0; i<merges.length; i++)
                            $('#datagrid').datagrid('mergeCells',{
                                index:merges[i].index,
                                field:'city',  //field对应单元格
                                rowspan:merges[i].rowspan
                        });
                    }
                });

             cols = [
                    {
                        field : 'city',
                        title : '地市',
                        rowspan:2,
                        formatter : function(value){
                            return '上海'
                        }
                    },
                    {
                        field : 'usertype',
                        title : '业务名称',
                        rowspan:2,
                    },{
                        field : '',
                        title : '上行平均流速',
                        colspan:3,
                    }
                ]

                cols1=[
                    {
                        field : 'uspeed',
                        title : '流速',
                    },
                    {
                        field : 'uspeedt',
                        title : '同比',
                    },{
                        field : 'uspeedt',
                        title : '环比',
                    }
                ]

2.隐藏行数据

       $("#table2").datagrid({
            ...
            columns : [ colunms ],
            loadFilter : function(data) {
                if(data.success && data.data){
                    return data.data;
                }else{
                    return {
                        total : 0,
                        rows : []
                    };
                }
            },
            onBeforeLoad : (param)=> {
            
            },
            onClickCell:function(rowIndex, field, value){
              //点击单元格
            },
            onLoadSuccess:function (data){
             
            },
            rowStyler: function(index, row){
                // 返回不同CSS样式
                if (row.name==='总计') {     //该行某个field对应总计数据
                    return 'display:none;';  //隐藏,该行数据不显示
                } else {
                    return '';   
                }
            }
       });