表格操作技巧-上 || RUOYI框架教程(三)

原创
2020/08/13 11:55
阅读数 1.3W

 期待已久的系列,又双给大家见面啦

 

本系列纯干货!!

有想了解的小伙伴,欢迎加微信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 表格加栏栅边框 及 代码

核心代码:

<div class="col‐sm‐12 select‐table table‐bordered"><table id="bootstrap‐table"></table></div>

注:只需要将正常生成的表格样式层的div样式由 table­striped 调整成 table­bordered 可。

 

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.9Bootstrap Table 表格加入序号    1.9.1 序号翻页自动增加    1.9.2 序号翻页重新开始计算自动增加  1.10 表格倒序排列  1.11 表格列宽设置 

如果觉得这篇文章对你有启发,帮喵点个“在看”,我会很开心的~

 

 

微信又双叒叕改版了,不再按照时间顺序展示,而是根据互动量出现。为了防止接收不到推文消息,快来把【V5codings】公众号“设为星标” 吧~(已经设置过的同学就不用重复操作啦)~

如果想围观喵的朋友圈,或者有什么悄悄话想和喵说,可以加这个微信号哦~

我的这些文章也值得你读一读

如果想了解更多若依教程,你也可能对这些感兴趣:

小白都能学会的笔记管理模块开发教程-RUOYI框架教程(二)

小白都能学会的笔记管理模块开发教程-RUOYI框架教程(二)

若依操作小技巧,快看看你掌握了多少!(第一篇~)

若依操作小技巧,快看看你学"废"了吗!(第二篇~)

若依Excell导入这么做,0经验小白都能写!(第三篇~)

若依日期操作居然这么多写法,你敢信么!(第四篇~)

若依js设置高度及自适应居然这么简单,你敢信么!(第五篇~)

若依给页面加水印这么简单,你见过么!(第l篇~)

若依数据权限这样控制到个人,你是这么用的么!(第七篇~)

若依Excell数据导出及小数处理,你会么!(第八篇~)

本文分享自微信公众号 - V5codings(gh_c1ec2d16ec93)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
自适应不起作用
2020/12/31 16:34
回复
举报
更多评论
打赏
1 评论
0 收藏
0
分享
返回顶部
顶部