當(dāng)前位置：首頁(yè) >

bootstrap table使用参考

發(fā)布時(shí)間：2024/10/12 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap table使用参考小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

https://www.cnblogs.com/landeanfen/p/5821192.html? 轉(zhuǎn)載

閱讀目錄

一、x-editable組件介紹
二、bootstrapTable行內(nèi)編輯初始方案
三、bootstrapTable行內(nèi)編輯最終方案
- 1、文本框
- 2、時(shí)間選擇框
- 3、下拉框
- 4、復(fù)選框
- 5、“陰魂不散”的select2
四、總結(jié)

正文

前言：之前介紹bootstrapTable組件的時(shí)候有提到它的行內(nèi)編輯功能，只不過(guò)為了展示功能，將此一筆帶過(guò)了，罪過(guò)罪過(guò)！最近項(xiàng)目里面還是打算將行內(nèi)編輯用起來(lái)，于是再次研究了下x-editable組件，遇到過(guò)一些坑，再此做個(gè)采坑記錄吧！想要了解bootstrapTable的園友可以移步?JS組件系列——表格組件神器：bootstrap table。

本文原創(chuàng)地址：http://www.cnblogs.com/landeanfen/p/5821192.html

回到頂部

一、x-editable組件介紹

x-editable組件是一個(gè)用于創(chuàng)建可編輯彈出框的插件，它支持三種風(fēng)格的樣式：bootstrap、Jquery UI、Jquery。大致效果如下圖：

根據(jù)博主一貫的風(fēng)格，這里肯定是選用第一種嘍。首先還是給出開(kāi)源地址吧。

x-editable開(kāi)源地址：https://github.com/vitalets/x-editable

x-editable文檔地址：http://vitalets.github.io/x-editable/docs.html

x-editable在線Demo：http://vitalets.github.io/x-editable/demo-bs3.html

?1、x-editable初體驗(yàn)。

首先下載基于bootstrap的源碼到本地。引用相關(guān)文件。

?頁(yè)面元素

js初始化

$(function () {$('#username').editable();});

效果展示

上面是通過(guò)html的data屬性去設(shè)置x-editable的參數(shù)，當(dāng)然，我也可以在初始化的時(shí)候去設(shè)置參數(shù)，比如，我僅僅給一個(gè)空的a標(biāo)簽：

js初始化

$(function () {$('#username').editable({type: "text", //編輯框的類型。支持text|textarea|select|date|checklist等title: "用戶名", //編輯框的標(biāo)題disabled: false, //是否禁用編輯emptytext: "空文本", //空值的默認(rèn)文本mode: "inline", //編輯框的模式：支持popup和inline兩種模式，默認(rèn)是popupvalidate: function (value) { //字段驗(yàn)證if (!$.trim(value)) {return '不能為空';}}});});

查看效果

再來(lái)個(gè)稍微復(fù)雜一點(diǎn)的

<a href="#" id="department">選擇部門(mén)</a> $(function () {$('#department').editable({type: "select", //編輯框的類型。支持text|textarea|select|date|checklist等source: [{ value: 1, text: "開(kāi)發(fā)部" }, { value: 2, text: "銷(xiāo)售部" }, {value:3,text:"行政部"}],title: "選擇部門(mén)", //編輯框的標(biāo)題disabled: false, //是否禁用編輯emptytext: "空文本", //空值的默認(rèn)文本mode: "popup", //編輯框的模式：支持popup和inline兩種模式，默認(rèn)是popupvalidate: function (value) { //字段驗(yàn)證if (!$.trim(value)) {return '不能為空';}}});});

查看效果

上文只是給出了一些常用字段，當(dāng)然x-editable組件還有很多其他的功能參數(shù)，有興趣可以看看文檔，官方文檔對(duì)每個(gè)參數(shù)都有詳細(xì)的說(shuō)明。?

回到頂部

二、bootstrapTable行內(nèi)編輯初始方案

說(shuō)了這么半天，上面的只是鋪墊，我們最終是希望在bootstrapTable里面實(shí)現(xiàn)行內(nèi)編輯。根據(jù)上面的規(guī)則，我們想要使用x-editable實(shí)現(xiàn)行內(nèi)編輯，表格的單元格里面必須要有一個(gè)a標(biāo)簽，然后對(duì)a標(biāo)簽做x-editable的初始化。有了這個(gè)想法，我們按照這種思路先試試。

引用相關(guān)文件

bootstrapTable的相關(guān)初始化

后臺(tái)方法

?后臺(tái)測(cè)試方法

這樣確實(shí)是可以實(shí)現(xiàn)想要的效果，貌似也能行內(nèi)編輯了，可是如果沒(méi)個(gè)列都需要行內(nèi)編輯，并且列的個(gè)數(shù)很多，那么是不是每個(gè)列都得這樣去formmater？并且這種寫(xiě)法狠顯然很死板，博主著實(shí)難以接受。于是又找了找例子，發(fā)現(xiàn)在bootstrapTable的擴(kuò)展里面存在bootstrap-table-editable.js這個(gè)js。

回到頂部

三、bootstrapTable行內(nèi)編輯最終方案

好吧，博主承認(rèn)，上面還是鋪墊，因?yàn)椴┲饔X(jué)得這可能是解決問(wèn)題的一般思路，所以將這些鋪墊的篇幅可能有點(diǎn)多。首先來(lái)看看bootstrap-table-editable.js這個(gè)文件

?bootstrap-table-editable.js

這個(gè)js其實(shí)是對(duì)x-editable做了一個(gè)簡(jiǎn)單的封裝，增加了列的editable屬性以及編輯保存后的一些事件。有了這個(gè)作為基礎(chǔ)，于是我們行內(nèi)編輯的代碼變成了這樣。

需要引用的文件如下：

1、文本框

　　$(function () {$("#tb_user").bootstrapTable({toolbar: "#toolbar",idField: "Id",pagination: true,showRefresh: true,search: true,clickToSelect: true,queryParams: function (param) {return {};},url: "/Editable/GetUsers",columns: [{checkbox: true}, {field: "UserName",title: "用戶名",editable: {type: 'text',title: '用戶名',validate: function (v) {if (!v) return '用戶名不能為空';}}}, {field: "Age",title: "年齡",}, {field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy-MM-dd");}},{field: "DeptName",title: "部門(mén)"}, {field: "Hobby",title: "愛(ài)好" }],onEditableSave: function (field, row, oldValue, $el) {$.ajax({type: "post",url: "/Editable/Edit",data: row,dataType: 'JSON',success: function (data, status) {if (status == "success") {alert('提交數(shù)據(jù)成功');}},error: function () {alert('編輯失敗');},complete: function () {}});}});});

后臺(tái)對(duì)應(yīng)的更新方法

public JsonResult Edit(User user){//更新實(shí)體return Json(new { }, JsonRequestBehavior.AllowGet);}

經(jīng)過(guò)測(cè)試，用戶名這一列基本可以自由編輯。同樣，年齡這一列也可改成這樣

　　　　　　 {field: "Age",title: "年齡",editable: {type: 'text',title: '年齡',validate: function (v) {if (isNaN(v)) return '年齡必須是數(shù)字';var age = parseInt(v);if (age <= 0) return '年齡必須是正整數(shù)';}}}

其他基本不用做任何修改。

代碼釋疑：上文在初始化的columns屬性里面通過(guò)editable屬性來(lái)配置可編輯的參數(shù)，注意這里每個(gè)列的editable屬性對(duì)應(yīng)的Json對(duì)象即為x-editable里面的初始化的Json對(duì)象，也就是說(shuō)我們初始化x-editable的時(shí)候可以配置哪些屬性，在列的editable屬性里面也可以同樣配置，這樣用起來(lái)就爽多了吧。編輯后的提交方法統(tǒng)一放到onEditableSave事件里面統(tǒng)一處理。

回到頂部

2、時(shí)間選擇框

有了上面的知識(shí)作為基礎(chǔ)，我們來(lái)初始化生日這一列：

{field: "Birthday",title: "生日",formatter: function (value, row, index) {var date = eval('new ' + eval(value).source)return date.format("yyyy-MM-dd");},editable: {type: 'date',title: '生日'}}

其他地方不用做任何修改，得到效果：

這是x-editable的默認(rèn)樣式，如果你看著不爽，可以自行配置，x-editable提供了許多配置日期框的參數(shù)，如下：

當(dāng)然，如果精確到時(shí)分秒，可以使用datetime類型的編輯框。如下是官方給出的時(shí)間框編輯效果，看著還不錯(cuò)。

回到頂部

3、下拉框

表單編輯里面還有一個(gè)重要的標(biāo)簽就是select了。上文我們知道x-editable為我們提供了下拉框的編輯模式，比如我們的部門(mén)這一列的編輯可以寫(xiě)成這樣：

　　　　　　 {field: "DeptId",title: "部門(mén)",editable: {type: 'select',title: '部門(mén)',source:[{value:"1",text:"研發(fā)部"},{value:"2",text:"銷(xiāo)售部"},{value:"3",text:"行政部"}]}}

得到效果

當(dāng)然，這種本地設(shè)置數(shù)據(jù)源的方法肯定是不能滿足我們需求的，因?yàn)楹芏嗲闆r下拉框里面的選項(xiàng)是從數(shù)據(jù)庫(kù)遠(yuǎn)程得到的。當(dāng)然x-editable也為我們考慮到了，比如我們可以這樣寫(xiě)：

　　　　　　　　{field: "DeptId",title: "部門(mén)",editable: {type: 'select',title: '部門(mén)',source: function () {var result = [];$.ajax({url: '/Editable/GetDepartments',async: false,type: "get",data: {},success: function (data, status) {$.each(data, function (key, value) {result.push({ value: value.ID, text: value.Name });});}});return result;}}}

后臺(tái)我們配置一個(gè)方法

public JsonResult GetDepartments(){var lstRes = new List<Department>();lstRes.Add(new Department() { ID = "1", Name = "研發(fā)部" });lstRes.Add(new Department() { ID = "2", Name = "銷(xiāo)售部" });lstRes.Add(new Department() { ID = "3", Name = "行政部" });lstRes.Add(new Department() { ID = "4", Name = "創(chuàng)意部" });lstRes.Add(new Department() { ID = "5", Name = "事業(yè)部" });return Json(lstRes, JsonRequestBehavior.AllowGet);}

同樣能達(dá)到我們想要的結(jié)果。

代碼釋疑：這里有一點(diǎn)需要說(shuō)明一下，細(xì)心的園友可能發(fā)現(xiàn)了，我們這里的?field: "DeptId"?，為什么這里要配置DeptId而不是DeptName呢?很簡(jiǎn)單，因?yàn)槲覀冃枰蛿?shù)據(jù)源里面的value值對(duì)應(yīng)。

回到頂部

4、復(fù)選框

除了上述幾種常見(jiàn)的編輯框，x-editable還為我們提供了復(fù)選框組的編輯。比如：

　　　　　　　{field: "Hobby",title: "愛(ài)好",editable: {type: "checklist",separator:",",source: [{ value: 'bsb', text: '籃球' },{ value: 'ftb', text: '足球' },{ value: 'wsm', text: '游泳' }],}}

得到效果：

當(dāng)然，如果遠(yuǎn)程數(shù)據(jù)，也可以使用類似上文的方法去取。

回到頂部

5、“陰魂不散”的select2

說(shuō)到上文的復(fù)選框，博主不由自主又想到了Multiselect這些個(gè)東西，于是查找x-editable的文檔，結(jié)果發(fā)現(xiàn)它不支持Multiselect，但是支持select2，也不知道這是不是一個(gè)好消息。根據(jù)博主自己的使用經(jīng)歷，也包括技術(shù)交流群里面的聊天經(jīng)歷，發(fā)現(xiàn)很多人在使用select2的時(shí)候都遇到過(guò)各種各樣的樣式問(wèn)題，并且不太好解決。

既然x-editable支持select2，那我們就用用試試唄，反正官方demo說(shuō)得挺好的，下面是官方demo的使用示例：

懷著忐忑的心情，博主自己嘗試了一把。

引用select2文件

代碼嘗試

　　　　　　　　{field: "Hobby",title: "愛(ài)好",editable: {type: 'select2',title: '愛(ài)好',name: 'Hobby',placement: 'top',success: function (response, newValue) {debugger;},error: function(response, newValue) {debugger;},url: function(params) {debugger;},source: [{ id: 'bsb', text: '籃球' },{ id: 'ftb', text: '足球' },{ id: 'wsm', text: '游泳' }],inputclass: 'input-large',select2: {allowClear: true,multiple: true,} }}

得到結(jié)果：

?結(jié)果發(fā)現(xiàn)select2的選中值不能正常傳遞到后臺(tái)。反正博主試過(guò)各種參數(shù)，按照官方demo的寫(xiě)法也試過(guò)，均以失敗告終。也不知道官方的demo如何成功的。這個(gè)問(wèn)題先拋出來(lái)，如果有使用的園友歡迎指正與解答。后續(xù)如果博主解決了這個(gè)問(wèn)題，也會(huì)在此更新。?

回到頂部

四、總結(jié)

還有一個(gè)問(wèn)題就是在編輯完成提交之后，博主在項(xiàng)目中遇到這樣一個(gè)問(wèn)題：如果提交之后的文本內(nèi)容過(guò)多，表格的thead里面th的寬度和tbody里面td的寬度不對(duì)其的問(wèn)題，看著相當(dāng)惡心。但是在寫(xiě)demo的時(shí)候又沒(méi)有遇到這個(gè)問(wèn)題。在此還是將解決方案給出來(lái)。

就這么一句話解決你的困擾！

本篇介紹了下bootstrapTable結(jié)合x(chóng)-editable實(shí)現(xiàn)行內(nèi)編輯的使用。文中很多問(wèn)題都是根據(jù)博主的使用經(jīng)歷來(lái)說(shuō)明，如果你打算將它用起來(lái)，也可以試試。如果本文能夠幫到你，歡迎推薦！

本文原創(chuàng)出處：http://www.cnblogs.com/landeanfen/

轉(zhuǎn)載于:https://www.cnblogs.com/qinhan/p/9429247.html

總結(jié)

以上是生活随笔為你收集整理的bootstrap table使用参考的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：追随自己的价值观：用研经理 Anne D
下一篇：非经营性资产包括什么