Js + Bootstrap Table + adminlte - 自定义formatter，在表格内添加箭头样式，调整列宽

var drawDataTable=function(chartId){
 ???var dataList = [
 ??????????????????????{
 ??????????????????????????"criteria": "q>100",
 ??????????????????????????"count": ??"400 up",
 ??????????????????????????"cRatio": "10% up",
 ??????????????????????????"pRatio": ?"60% up"

 ??????????????????????},
 ??????????????????????{
 ?????????????????????????"criteria": "50&lt;q≤100",　　　　　　//<需要转义，否则被视为html标签
 ?????????????????????????"count": ??"400 up",
 ?????????????????????????"cRatio": "10% up",
 ?????????????????????????"pRatio": ?"60% up"

 ?????????????????????},{
 ???????????????????????????"criteria": "10&lt;q&lt;=50",
 ???????????????????????????"count": ??"400 down",
 ???????????????????????????"cRatio": "10% down",
 ???????????????????????????"pRatio": ?"60% down"

 ???????????????????????},{
 ???????????????????????????"criteria": "0&lt;q&lt;=10",
 ???????????????????????????"count": ??"400 down",
 ???????????????????????????"cRatio": "10% down",
 ???????????????????????????"pRatio": ?"60% down"

 ???????????????????????},{
 ????????????????????????????"criteria": "q=0",
 ????????????????????????????"count": ??"400 eq",
 ????????????????????????????"cRatio": "10% eq",
 ????????????????????????????"pRatio": ?"60% eq"
 ????????????????????????}
 ??????????????????]
 ???$("#" + chartId).bootstrapTable(‘destroy‘).bootstrapTable({
 ???????data: dataList，
 ???????columns:[
 ???????????{
 ???????????????field:‘criteria‘,
 ???????????????title:‘物品数量分布‘,
 ???????????????width:"30%"　　　　　　//设置宽度
 ??????????????
 ???????????},
 ???????????{
 ???????????????field:‘count‘,
 ???????????????title:‘客户数‘,
 ???????????????width:"30%",
 ???????????????formatter: operateFormatter　　　　//自定义样式，传三个参数（value，row, index）,单元格值，行值，索引
 ???????????},
 ???????????{
 ???????????????field:‘cRatio‘,
 ???????????????title:‘客户占比‘,
 ???????????????width:"25%",
 ???????????????formatter: operateFormatter
 ???????????},
 ???????????{
 ???????????????field:‘pRatio‘,
 ???????????????title:‘物品占比‘,
 ???????????????width:"25%",
 ???????????????formatter: operateFormatter, //自定义方法，添加操作按钮
 ???????????}
 ???????]
 ???});
 ???}

function operateFormatter(value, row, index){
 ???var arr=value.split(" ")
 ???return arr[0] + arrowStyle(arr[1]);　　//获取自定义箭头样式
}
function arrowStyle(category){
 ???var temp=‘‘
 ???switch (category){
 ???????case "up":
 ???????????temp=‘<span class="text-green" style="margin-left:10px"><i class="fa fa-long-arrow-up"></i></span>‘
 ???????????break;
 ???????case "down":
 ???????????temp=‘<span class="text-red" style="margin-left:10px"><i class="fa fa-long-arrow-down"></i></span>‘
 ???????????break;
 ???????case "eq":
 ???????????temp=‘<span class="text-yellow" style="margin-left:10px;">━</span>‘
 ???????????break;
 ???????default:
 ???????????break;
 ???}
 ???return temp;
}

Js + Bootstrap Table + adminlte - 自定义formatter，在表格内添加箭头样式，调整列宽

原文地址：https://www.cnblogs.com/KellyChen/p/9434081.html