标签：样式 技术 改变 boot logs book dom color info
使用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
标签：样式 技术 改变 boot logs book dom color info
原文地址：https://www.cnblogs.com/masha2017/p/11617572.html
