bootstrap-table的使用

Posted 2022-12-13 masha2017

使用bootstrap-table插件实现table和分页一起使用，效果如下图所示

 

 具体使用，参考：https://www.cnblogs.com/wuhuacong/p/7284420.html 很详细。这里就不说了。

 

如何实现某一列样式的改变，比如说根据某一列的结果，显示不同的样式。可以使用formatter来设置。具体设置如下：

$(‘#table‘).bootstrapTable(
            url: ‘/user/getBookingRecordByName?username=@ViewBag.username&seq=‘ + Math.random(),
            method: ‘GET‘,
            striped: true,
            cache: false,
            pagination: true,
            sortable: true,
            pageList: [10, 20, 30, 50],
            columns: [
                field: ‘ROOM_DESC‘, title: ‘会议室‘,
                field: ‘START_TIME‘, title: ‘开始时间‘ ,
                field: ‘END_TIME‘, title: ‘结束时间‘ ,
                field: ‘COUNT‘, title: ‘参会人数‘ ,
               
                   field: ‘STATE‘, title: ‘会议状态‘,
                   formatter: function (value, row, index) 
                       var a = "";
                       if (row.STATE) 
                           if(row.STATE=="已召开")
                               a = ‘<span style="color:red">‘ + value + ‘</span>‘;
                            else if (row.STATE == "进行中") 
                               a = ‘<span style="color:blue">‘ + value + ‘</span>‘;
                            else 
                               a = ‘<span style="color:green">‘ + value + ‘</span>‘;
                           
                       
                       return a;
                   
               ,
                field: ‘THEME‘, title: ‘会议主题‘ ,
                field: ‘DEPART‘, title: ‘会议部门‘ ,
                field: ‘PHONE‘, title: ‘联系电话‘ ,
                field: ‘CREATE_DATE‘, title: ‘创建时间‘ ,
                field: ‘MODIFY_DATE‘, title: ‘修改时间‘ 
            ]
        );

结果如下：

 

 参考：https://blog.csdn.net/qq_27778691/article/details/80829463 和 https://blog.csdn.net/qq_31540195/article/details/51837467