文档章节

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

o
 osc_4nmshwhm
发布于 2018/08/06 22:53
字数 271
阅读 13
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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;
}
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

渗透测试的概念和实战

目录 1. 前言 2. 常见web安全漏洞 3. 思路 3.1渗透测试思路 3.2黑客攻击思路 4. 暴力破解 4.1谷歌黑语法 4.1.1 黑语法inurl:搜索url包含指定字符串 4.1.2 黑语法intitle:搜索网页中的标题名...

六道木
31分钟前
19
0
Nginx搭建

Web服务器 放置网站文件,全世界浏览 可以放置数据文件,让全世界可以下载。 Nginx官方网站www.nginx.org #rz nginx-1.11.6.tar.gz #ls #rpm -q zlib-devel pcre-devel #yum –y install zli...

osc_fnto2dbd
42分钟前
14
0
如何在1分钟内CSDN收益1000万,走上人生巅峰?!

事情的起因源于前几日CSDN专栏作者群中有位同志自曝收益:426584.46元(不用数了42万+,未证实是否属实),瞬间刷屏。 那么作为一位普通的技术分享者,是否有机会利用开源项目短时间内赢取白...

osc_8db3mwb5
43分钟前
23
0
【java基础(五十)】为什么要使用泛型程序设计

从Java程序设计语言1.0版发布以来,变化最大的部分就是泛型。致使Java SE 5.0中增加泛型机制的主要原因是为了满足1999年制定的最早的Java规范需求之一(JSR 14)。专家组花费了5年左右的时间...

osc_qcm2mqmy
45分钟前
20
0
如何将Unix时间戳转换为DateTime,反之亦然? - How can I convert a Unix timestamp to DateTime and vice versa?

问题: There is this example code, but then it starts talking about millisecond / nanosecond problems. 有此示例代码,但随后开始谈论毫秒/纳秒问题。 The same question is on MSDN, ......

javail
46分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部