https://www.cnblogs.com/landeanfen/p/5821192.html? 轉載

?

閱讀目錄

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

?

正文

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

本文原創地址：http://www.cnblogs.com/landeanfen/p/5821192.html

回到頂部

一、x-editable組件介紹

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

根據博主一貫的風格，這里肯定是選用第一種嘍。首先還是給出開源地址吧。

x-editable開源地址：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初體驗。

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

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>

?頁面元素

<a href="#" id="username" data-type="text" data-title="用戶名">用戶名</a>

js初始化

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

效果展示

上面是通過html的data屬性去設置x-editable的參數，當然，我也可以在初始化的時候去設置參數，比如，我僅僅給一個空的a標簽：

<a href="#" id="username">用戶名</a>

js初始化

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

查看效果

再來個稍微復雜一點的

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

查看效果

上文只是給出了一些常用字段，當然x-editable組件還有很多其他的功能參數，有興趣可以看看文檔，官方文檔對每個參數都有詳細的說明。?

回到頂部

二、bootstrapTable行內編輯初始方案

說了這么半天，上面的只是鋪墊，我們最終是希望在bootstrapTable里面實現行內編輯。根據上面的規則，我們想要使用x-editable實現行內編輯，表格的單元格里面必須要有一個a標簽，然后對a標簽做x-editable的初始化。有了這個想法，我們按照這種思路先試試。

引用相關文件

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

bootstrapTable的相關初始化

<script type="text/javascript">var curRow = {};$(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: "用戶名",formatter: function (value, row, index) {return "<a href=\"#\" name=\"UserName\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"用戶名\">" + value + "</a>";}}, {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: "部門"}, {field: "Hodd",title: "愛好"}],onClickRow: function (row, $element) {curRow = row;},onLoadSuccess: function (aa, bb, cc) {$("#tb_user a").editable({url: function (params) {var sName = $(this).attr("name");curRow[sName] = params.value;$.ajax({type: 'POST',url: "/Editable/Edit",data: curRow,dataType: 'JSON',success: function (data, textStatus, jqXHR) {alert('保存成功！');},error: function () { alert("error");}});},type: 'text'});},});});</script>

后臺方法

?后臺測試方法

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

回到頂部

三、bootstrapTable行內編輯最終方案

好吧，博主承認，上面還是鋪墊，因為博主覺得這可能是解決問題的一般思路，所以將這些鋪墊的篇幅可能有點多。首先來看看bootstrap-table-editable.js這個文件

?bootstrap-table-editable.js

這個js其實是對x-editable做了一個簡單的封裝，增加了列的editable屬性以及編輯保存后的一些事件。有了這個作為基礎，于是我們行內編輯的代碼變成了這樣。

需要引用的文件如下：

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /><script src="/Scripts/jquery-1.9.1.min.js"></script> <script src="/Content/bootstrap/js/bootstrap.min.js"></script> <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script> 回到頂部

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: "部門"}, {field: "Hobby",title: "愛好" }],onEditableSave: function (field, row, oldValue, $el) {$.ajax({type: "post",url: "/Editable/Edit",data: row,dataType: 'JSON',success: function (data, status) {if (status == "success") {alert('提交數據成功');}},error: function () {alert('編輯失敗');},complete: function () {}});}});});

后臺對應的更新方法

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

經過測試，用戶名這一列基本可以自由編輯。同樣，年齡這一列也可改成這樣

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

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

代碼釋疑：上文在初始化的columns屬性里面通過editable屬性來配置可編輯的參數，注意這里每個列的editable屬性對應的Json對象即為x-editable里面的初始化的Json對象，也就是說我們初始化x-editable的時候可以配置哪些屬性，在列的editable屬性里面也可以同樣配置，這樣用起來就爽多了吧。編輯后的提交方法統一放到onEditableSave事件里面統一處理。

回到頂部

2、時間選擇框

有了上面的知識作為基礎，我們來初始化生日這一列：

{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的默認樣式，如果你看著不爽，可以自行配置，x-editable提供了許多配置日期框的參數，如下：

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

回到頂部

3、下拉框

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

　　　　　　 {field: "DeptId",title: "部門",editable: {type: 'select',title: '部門',source:[{value:"1",text:"研發部"},{value:"2",text:"銷售部"},{value:"3",text:"行政部"}]}}

得到效果

當然，這種本地設置數據源的方法肯定是不能滿足我們需求的，因為很多情況下拉框里面的選項是從數據庫遠程得到的。當然x-editable也為我們考慮到了，比如我們可以這樣寫：

　　　　　　　　{field: "DeptId",title: "部門",editable: {type: 'select',title: '部門',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;}}}

后臺我們配置一個方法

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

同樣能達到我們想要的結果。

代碼釋疑：這里有一點需要說明一下，細心的園友可能發現了，我們這里的?field: "DeptId"?，為什么這里要配置DeptId而不是DeptName呢?很簡單，因為我們需要和數據源里面的value值對應。

回到頂部

4、復選框

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

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

得到效果：

當然，如果遠程數據，也可以使用類似上文的方法去取。

回到頂部

5、“陰魂不散”的select2

說到上文的復選框，博主不由自主又想到了Multiselect這些個東西，于是查找x-editable的文檔，結果發現它不支持Multiselect，但是支持select2，也不知道這是不是一個好消息。根據博主自己的使用經歷，也包括技術交流群里面的聊天經歷，發現很多人在使用select2的時候都遇到過各種各樣的樣式問題，并且不太好解決。

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

?

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

引用select2文件

<link href="~/Content/select2-bootstrap.css" rel="stylesheet" /> <link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" /> <script src="~/Content/select2-master/dist/js/select2.full.min.js"></script>

代碼嘗試

　　　　　　　　{field: "Hobby",title: "愛好",editable: {type: 'select2',title: '愛好',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,} }}

得到結果：

?結果發現select2的選中值不能正常傳遞到后臺。反正博主試過各種參數，按照官方demo的寫法也試過，均以失敗告終。也不知道官方的demo如何成功的。這個問題先拋出來，如果有使用的園友歡迎指正與解答。后續如果博主解決了這個問題，也會在此更新。?

回到頂部

四、總結

還有一個問題就是在編輯完成提交之后，博主在項目中遇到這樣一個問題：如果提交之后的文本內容過多，表格的thead里面th的寬度和tbody里面td的寬度不對其的問題，看著相當惡心。但是在寫demo的時候又沒有遇到這個問題。在此還是將解決方案給出來。

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

本篇介紹了下bootstrapTable結合x-editable實現行內編輯的使用。文中很多問題都是根據博主的使用經歷來說明，如果你打算將它用起來，也可以試試。如果本文能夠幫到你，歡迎推薦！

本文原創出處：http://www.cnblogs.com/landeanfen/

轉載于:https://www.cnblogs.com/qinhan/p/9429247.html

總結

以上是生活随笔為你收集整理的bootstrap table使用参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。