springboot 使用templates + bootstrap-table 實作組合表頭展示

 /**
     * 查詢補助資訊串列
     */
    @RequiresPermissions("staffCost:subsidy:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(StaffCostSubsidy staffCostSubsidy) {
        startPage();
        List<StaffCostSubsidy> list = staffCostSubsidyService.selectStaffCostSubsidyList(staffCostSubsidy);
        return getDataTable(list);
    }

$(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                importUrl: prefix + "/importUrl",
                modalName: "補助資訊",
                columns: [
                            [
                                {
                                    field : 'subsidyId',
                                    title : '補助資訊id',
                                    visible: false,
                                    rowspan: 3
                                },
                                {
                                    title : '人員',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 4,
                                    rowspan: 1
                                },
                                {
                                    title : '工資與獎金',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 3,
                                    rowspan: 1
                                },
                                {
                                    title: '操作',
                                    align: 'center',
                                    formatter: function(value, row, index) {
                                        var actions = [];
                                        actions.push('<a  href="javascript:void(0)" onclick="$.operate.edit(\'' + row.subsidyId + '\')"><i ></i> 編輯</a> ');
                                        actions.push('<a  href="javascript:void(0)" onclick="$.operate.remove(\'' + row.subsidyId + '\')"><i ></i> 洗掉</a>');
                                        return actions.join('');
                                    },
                                    rowspan: 3
                                }

                            ],
                            [
                                {
                                    field : 'employee.company',
                                    title : '公司',
                                     formatter: function(value, row, index) {
                                         return $.table.selectDictLabel(companyDatas, value);
                                     },
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'dept.deptName',
                                    title : '部門',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'post.postName',
                                    title : '崗位',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'employee.employeeName',
                                    title : '員工姓名',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    title : '補助',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 3,
                                    rowspan: 1
                                }
                            ],

                            [
                                {
                                    field : 'subsidyComputer',
                                    title : '電腦',
                                    align : 'center',
                                    formatter: function(value, row, index) {
                                        if(row.subsidyComputer==0){
                                            return "無";
                                        }else {
                                            return 100;
                                        }

                                    },
                                },
                                {
                                    field : 'foodSupplement',
                                    title : '餐補',
                                    align : 'center',
                                },
                                {
                                    field : 'totalGrants',
                                    title : '合計',
                                    align : 'center'
                                },
                            ]
                    ]
            };
            $.table.init(options);
        });

標籤：JavaScript

上一篇：jquery篇

下一篇：前端瀏覽器的各種問題以及解決辦法