Skip to content
网游世界
网游世界

吾生有涯,而知无涯。

  • 首页
  • PHP
    • ThinkPHP
    • FastAdmin
    • webman
  • JavaScript
    • jQuery
    • AdminLTE
  • Free Pascal
  • Java
    • JeeSite
    • 若依
    • ruoyi-vue-pro
  • 其它
    • 操作系统
    • 树莓派
    • 前端
    • Null
  • 关于
网游世界

吾生有涯,而知无涯。

FastAdmin table 跨行跨列处理

3Vshej, 2024年4月9日 周二2024年4月9日 周二

在开发中,需要对表格跨行跨列处理,也就是说,需要合并单元格;这里介绍使用方式。

表头跨行跨列

其中,在表头 columns 定义处,通过 rowspan 、colspan 来定义跨行跨列。

因此每项都是一行,如果有多项,你需要在 columns 中定义多个表头。

在数据加载完成后,调用 mergeCellTable 方法,用于对列表数据跨行跨列处理。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
search: false,
pagination: false,
showColumns: false, showToggle: false, showExport: false,
columns: [
[
{
field: 'id',
title: __('编号'),
operate: false,
sortable: true,
rowspan: 2
},
{field: 'project_type', title: '项目类型', rowspan: 2},
{field: 'project_type', title: '金额', rowspan: 1, colspan:4},
{field: 'total', title: '合计', rowspan: 1, colspan:1},
],
[
{field: 'money1', title: '第一季度', rowspan: 1, colspan:1},
{field: 'money2', title: '第二季度', rowspan: 1, colspan:1},
{field: 'money3', title: '第三季度', rowspan: 1, colspan:1},
{field: 'money4', title: '第四季度', rowspan: 1, colspan:1},
]
],
onLoadSuccess: function (data) {
mergeCellTable(data);
}
});
var mergeCellTable = function (data) {
var mergeCell = data.merge;
mergeCell.forEach(function (item, index) {
table.bootstrapTable("mergeCells", item);
});
}
var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'id', search: false, pagination: false, showColumns: false, showToggle: false, showExport: false, columns: [ [ { field: 'id', title: __('编号'), operate: false, sortable: true, rowspan: 2 }, {field: 'project_type', title: '项目类型', rowspan: 2}, {field: 'project_type', title: '金额', rowspan: 1, colspan:4}, {field: 'total', title: '合计', rowspan: 1, colspan:1}, ], [ {field: 'money1', title: '第一季度', rowspan: 1, colspan:1}, {field: 'money2', title: '第二季度', rowspan: 1, colspan:1}, {field: 'money3', title: '第三季度', rowspan: 1, colspan:1}, {field: 'money4', title: '第四季度', rowspan: 1, colspan:1}, ] ], onLoadSuccess: function (data) { mergeCellTable(data); } }); var mergeCellTable = function (data) { var mergeCell = data.merge; mergeCell.forEach(function (item, index) { table.bootstrapTable("mergeCells", item); }); }
var table = $("#table");
// 初始化表格
table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'id',
    search: false,
    pagination: false,
    showColumns: false, showToggle: false, showExport: false,
    columns: [
        [
            {
                field: 'id',
                title: __('编号'),
                operate: false,
                sortable: true,
                rowspan: 2
            },
            {field: 'project_type', title: '项目类型', rowspan: 2},
            {field: 'project_type', title: '金额', rowspan: 1, colspan:4},
            {field: 'total', title: '合计', rowspan: 1, colspan:1},
        ],
        [
    {field: 'money1', title: '第一季度', rowspan: 1, colspan:1},
    {field: 'money2', title: '第二季度', rowspan: 1, colspan:1},
    {field: 'money3', title: '第三季度', rowspan: 1, colspan:1},
    {field: 'money4', title: '第四季度', rowspan: 1, colspan:1},
]
    ],
    onLoadSuccess: function (data) {
        mergeCellTable(data);
    }
});
var mergeCellTable = function (data) {
    var mergeCell = data.merge;
    mergeCell.forEach(function (item, index) {
        table.bootstrapTable("mergeCells", item);
    });
}

表数据跨行跨列

在原有数据的基础上,返回 merge 项,用于控制,如下格式:
注意,列表数据从 index 序号 0 开始,field 用于定义涉及的表头字段。

另外,不管表头定义多少行,返回的结果,始终是一行表示所有表头。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$merge = [
[
'index' => 0,
'field' => 'project_type',
'colspan' => 1,
'rowspan' => 2,
]
];
$merge = [ [ 'index' => 0, 'field' => 'project_type', 'colspan' => 1, 'rowspan' => 2, ] ];
$merge = [
            [
                  'index'   => 0,
                  'field'   => 'project_type',
                  'colspan' => 1,
                  'rowspan' => 2,
           ]
];

 

相关文章:

  1. FastAdmin 添加、编辑页复用 FastAdmin 中,大多情况下,添加页与编辑页内容是相同的,区别在于添加页无默认数据,编辑页需要......
  2. FastAdmin Summernote 清除格式 需求是这样的,录入内容时,大多是从 Word 中粘贴过来的,内容很少,但实际代码却很多,存储时,提示......
  3. FastAdmin BT 面板设置 PHP 上传大小 FastAdmin 使用 BT 面板管理站点,开发中,需要调整上传文件的大小。...
  4. FastAdmin 载入语言包 在开发中需要使用其他模块的语言包,你可以使用以下方式:...
FastAdmin PHP FastAdmin 框架表格

文章导航

Previous post
Next post

近期文章

  • FreePascal 、Lazarus IDE、Lazarus 包镜像
  • Android Studio Gradle 配置国内镜像
  • 为什么重新发明轮子
  • ruoyi-vue-pro 匿名访问
  • VUE 中接收 code 异常

归档

  • 2025 年 5 月
  • 2025 年 4 月
  • 2025 年 3 月
  • 2025 年 2 月
  • 2025 年 1 月
  • 2024 年 12 月
  • 2024 年 11 月
  • 2024 年 10 月
  • 2024 年 9 月
  • 2024 年 8 月
  • 2024 年 7 月
  • 2024 年 6 月
  • 2024 年 5 月
  • 2024 年 4 月
  • 2024 年 3 月
  • 2024 年 2 月
  • 2024 年 1 月
  • 2023 年 12 月
除非特殊说明,本站作品采用知识共享署名 4.0 国际许可协议进行许可。
豫公网安备 41010402002622号 豫ICP备2020029609号-3
©2025 3Vshej
网游世界
  • 首页
  • PHP
    • ThinkPHP
    • FastAdmin
    • webman
  • JavaScript
    • jQuery
    • AdminLTE
  • Free Pascal
  • Java
    • JeeSite
    • 若依
    • ruoyi-vue-pro
  • 其它
    • 操作系统
    • 树莓派
    • 前端
    • Null
  • 关于