閱讀目錄

一、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。大緻效果如下圖：

JS元件系列——BootstrapTable 行内編輯解決方案：x-editable 一、x-editable元件介紹二、bootstrapTable行内編輯初始方案三、bootstrapTable行内編輯最終方案四、總結

根據部落客一貫的風格，這裡肯定是選用第一種喽。首先還是給出開源位址吧。

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兩種模式，預設是popup
            validate: 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兩種模式，預設是popup
            validate: 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/

歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接配接，否則保留追究法律責任的權利

JS元件系列——BootstrapTable 行内編輯解決方案：x-editable 一、x-editable元件介紹二、bootstrapTable行内編輯初始方案三、bootstrapTable行内編輯最終方案四、總結

一、x-editable元件介紹

二、bootstrapTable行内編輯初始方案

三、bootstrapTable行内編輯最終方案

1、文本框

2、時間選擇框

3、下拉框

4、複選框

5、“陰魂不散”的select2

四、總結

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

JS元件系列——BootstrapTable 行内編輯解決方案：x-editable 一、x-editable元件介紹 二、bootstrapTable行内編輯初始方案 三、bootstrapTable行内編輯最終方案 四、總結

一、x-editable元件介紹

二、bootstrapTable行内編輯初始方案

三、bootstrapTable行内編輯最終方案

1、文本框

2、時間選擇框

3、下拉框

4、複選框

5、“陰魂不散”的select2

四、總結

繼續閱讀

JS元件系列——BootstrapTable 行内編輯解決方案：x-editable 一、x-editable元件介紹二、bootstrapTable行内編輯初始方案三、bootstrapTable行内編輯最終方案四、總結