access表格怎么取消冻结字段_表格操作技巧上 || RUOYI框架教程（三）
“期待已久的系列，又双叒叕给大家见面啦”本系列纯干货！！有想了解的小伙伴，欢迎加微信v5coding_com(非官方)~~~01—上期回顾上期推文中，我们就若依框架进行了简单的案例和操作讲解。传送门：RUOYI框架教程(二)RUOYI框架教程(一)实战项目：《表格的使用技巧》涉及框架内容：1.1 常规表格加栏栅边框1.1.1 生成正常样式 及 代码1.1.2表格加栏栅边框...
“ 期待已久的系列，又双叒叕给大家见面啦”
本系列纯干货！！
有想了解的小伙伴，欢迎加微信v5coding_com(非官方)~~~
01
—
上期回顾
上期推文中，我们就若依框架进行了简单的案例和操作讲解。传送门：
RUOYI框架教程(二)
RUOYI框架教程(一)
实战项目：《表格的使用技巧》涉及框架内容：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 表格加栏栅边框 及 代码
核心代码：
class="col‐sm‐12 select‐table table‐bordered"><table id="bootstrap‐table">table></div>
注：只需要将正常生成的表格样式层的div样式由 tablestriped 调整成 tablebordered 即 可。
1.2 表格内容自适应内容长度
表格自适应内容长度，不换行显示
原表格代码：
class="col‐sm‐12 select‐table table‐bordered"><table id="bootstrap‐table">table></div>自适应代码：
class="col‐sm‐12 select‐table table‐bordered table‐responsive"><table id="bootstrap‐table" class="table text‐nowrap">table></div>其中，表格需要加table样式，text-nowrap控制内容不换行，表格外层必须有
>。表格里面的thead和tbody不能省略，否则Bootstrap表格样式不会被使用。
1.2 表格左侧锁定或冻列
需要在原代码中加入 fixedColumns 、fixedNumber 两个属性参数，具体如下
fixedColumns:true,fixedNumber:3,说明：
fixedColumns
Boolean
false
默认为false禁用冻结列，设为true启用冻结列(左侧)fixedNumberint0冻结列的个数，当
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 "" + value+""; }下期预告：
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】公众号“设为星标” 吧～(已经设置过的同学就不用重复操作啦)~如果想围观喵的朋友圈，或者有什么悄悄话想和喵说，可以加这个微信号哦~
我的这些文章也值得你读一读
01 |RUOYI框架教程(二)
02 |RUOYI框架教程(一)
03 | itchat替代品，追妹子神器，个人微信给多个好友(群)发消息，定时提醒妹子喝水
04 | 专题：快速开发那点事儿 | 选择最合适的轮子，量产跑车
05 | 专题：快速开发那点事儿 | 轮子怎么选
快速构建 Web 应用程序
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)