“ 期待已久的系列,又双叒叕给大家见面啦”
本系列纯干货!!
有想了解的小伙伴,欢迎加微信v5coding_com(非官方)~~~
01
—
上期回顾
上期推文中,我们就若依框架进行了简单的案例和操作讲解。传送门:
实战项目:《表格的使用技巧》
涉及框架内容:
1.1 常规表格加栏栅边框
1.1.1 生成正常样式 及 代码
1.1.2 表格加栏栅边框 及 代码
1.2 表格内容自适应内容长度
1.2 表格左侧锁定或冻列
1.3 表格列调色
1.4 表格数据自动排序依照某个字段
1.5 表格中修改单元格内容的样式
02
—
本期精髓
1.1 常规表格加栏栅边框
1.1.1 生成正常样式 及 代码
核心代码:
1 <div class="col‐sm‐12 select‐table table‐striped">
2 <table id="bootstrap‐table"></table>
3 </div>
1.1.2 表格加栏栅边框 及 代码
核心代码:
<div class="col‐sm‐12 select‐table table‐bordered">
<table id="bootstrap‐table"></table>
</div>
注:只需要将正常生成的表格样式层的div样式由 tablestriped 调整成 tablebordered 即 可。
1.2 表格内容自适应内容长度
表格自适应内容长度,不换行显示
原表格代码:
<div class="col‐sm‐12 select‐table table‐bordered">
<table id="bootstrap‐table">
</table>
</div>
自适应代码:
<div class="col‐sm‐12 select‐table table‐bordered table‐responsive">
<table id="bootstrap‐table" class="table text‐nowrap">
</table>
</div>
其中,表格需要加table样式,text-nowrap控制内容不换行,表格外层必须有<div class="table-responsive">。
表格里面的thead和tbody不能省略,否则Bootstrap表格样式不会被使用。
1.2 表格左侧锁定或冻列
需要在原代码中加入 fixedColumns 、fixedNumber 两个属性参数,具体如下
fixedColumns:true,
fixedNumber:3,
说明:
fixedColumns
|
Boolean
|
false
|
默认为false禁用冻结列,设为true启用冻结列(左侧) |
fixedNumber | int | 0 | 冻结列的个数,当 fixedColumns设为true有效 (左侧) |
1.3 表格列调色
除表头外的列调色
cellStyle:function (value, row, index) {
return {css: {"background‐color": "red"}};
}
参考:
{
title: '运单编号',
field: 'waybillNumber',
align: 'center',
valign: 'middle',
cellStyle: function (value, row, index) {
if (row.focusMark == "0") {
return {css: {"background‐color": "red"}};
}
if (row.coordinateMark == "1") {
return {css: {"background‐color": "#cb7f71"}};
}
if (row.coordinateMark == "2") {
return {css: {"background‐color": "#71cbb9"}};15 }
return '';
}
}
1.4 表格数据自动排序依照某个字段
在需要排序的字段下添加 sortable:true sortable
{
field: 'zdfxProcess',
title: '完成率%',
sortable:true
},
1.5 表格中修改单元格内容的样式
例如单元格内容是超链接,其他样式同理
field: 'url',
title: '下载地址',
formatter: function (value, row, index) {
return "<a href="+www.baidu.com+">" + value+"</a>";
}
下期预告:
1.6 表格,表单,下拉框 内显示数据库对应的数据
1.7 bootstrap-select 下拉多选取值及重置
1.8 去掉Bootstrap Table 右上角的图标工具栏
1.9 对Bootstrap Table 表格加入序号
1.9.1 序号翻页自动增加
1.9.2 序号翻页重新开始计算自动增加
1.10 表格倒序排列
1.11 表格列宽设置
如果觉得这篇文章对你有启发,帮喵点个“在看”,我会很开心的~
微信又双叒叕改版了,不再按照时间顺序展示,而是根据互动量出现。为了防止接收不到推文消息,快来把【V5codings】公众号“设为星标” 吧~(已经设置过的同学就不用重复操作啦)~
如果想围观喵的朋友圈,或者有什么悄悄话想和喵说,可以加这个微信号哦~
我的这些文章也值得你读一读
如果想了解更多若依教程,你也可能对这些感兴趣:
小白都能学会的笔记管理模块开发教程-RUOYI框架教程(二)
小白都能学会的笔记管理模块开发教程-RUOYI框架教程(二)
本文分享自微信公众号 - V5codings(gh_c1ec2d16ec93)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。