表格操做技巧-上 || RUOYI框架教程（三）

「 期待已久的系列，又雙叒叕給你們見面啦」

本系列純乾貨！！

有想了解的小夥伴，歡迎加微信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.9 對Bootstrap 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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。