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

原创
08/13 11:55
阅读数 1.4K

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


本系列纯干货!!

有想了解的小伙伴,欢迎加微信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】公众号“设为星标” 吧~(已经设置过的同学就不用重复操作啦)~

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

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


01 |RUOYI框架教程(二)

02 |RUOYI框架教程(一)

03 | itchat替代品,追妹子神器,个人微信给多个好友(群)发消息,定时提醒妹子喝水

04 | 专题:快速开发那点事儿 |  选择最合适的轮子,量产跑车

05 | 专题:快速开发那点事儿 | 轮子怎么选

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部