“ 期待已久的系列，又双叒叕给大家见面啦”
本系列纯干货！！
有想了解的小伙伴，欢迎加微信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源创计划”，欢迎正在阅读的你也加入，一起分享。
