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 class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.subsidyId + '\')"><i class="fa fa-edit"></i> 編輯</a> ');
                                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.subsidyId + '\')"><i class="fa fa-remove"></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);
        });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM