JS表格組件BootstrapTable行內編輯解決方案x-editable
前言：之前介紹bootstrapTable組件的時候有提到它的行內編輯功能，只不過為了展示功能，將此一筆帶過了，罪過罪過！最近項目里面還是打算將行內編輯用起來，于是再次研究了下x-editable組件，遇到過一些坑，再此做個采坑記錄吧！想要了解bootstrapTable的朋友可以移步JS組件系列——表格組件神器：bootstrap table。
一、x-editable組件介紹
x-editable組件是一個用于創(chuàng)建可編輯彈出框的插件，它支持三種風格的樣式：bootstrap、Jquery UI、Jquery。大致效果如下圖：
根據(jù)博主一貫的風格，這里肯定是選用第一種嘍。首先還是給出開源地址吧。
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>
頁面元素
js初始化
$(function () {
$('#username').editable();
});
效果展示
上面是通過html的data屬性去設置x-editable的參數(shù)，當然，我也可以在初始化的時候去設置參數(shù)，比如，我僅僅給一個空的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: "開發(fā)部" }, { value: 2, text: "銷售部" }, {value:3,text:"行政部"}],
title: "選擇部門", //編輯框的標題
disabled: false, //是否禁用編輯
emptytext: "空文本", //空值的默認文本
mode: "popup", //編輯框的模式：支持popup和inline兩種模式，默認是popup
validate: function (value) { //字段驗證
if (!$.trim(value)) {
return '不能為空';
}
}
});
});
查看效果
上文只是給出了一些常用字段，當然x-editable組件還有很多其他的功能參數(shù)，有興趣可以看看文檔，官方文檔對每個參數(shù)都有詳細的說明。
二、bootstrapTable行內編輯初始方案
說了這么半天，上面的只是鋪墊，我們最終是希望在bootstrapTable里面實現(xiàn)行內編輯。根據(jù)上面的規(guī)則，我們想要使用x-editable實現(xiàn)行內編輯，表格的單元格里面必須要有一個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>
后臺方法
后臺測試方法
public JsonResult GetUsers()
{
var lstRes = new List<User>();
lstRes.Add(new User() { Id = "1", UserName = "張三", Age = 22, Birthday = Convert.ToDateTime("1994-12-21"), DeptId = "1", DeptName = "研發(fā)部" });
lstRes.Add(new User() { Id = "2", UserName = "李四", Age = 28, Birthday = Convert.ToDateTime("1988-09-09"), DeptId = "2", DeptName = "銷售部" });
lstRes.Add(new User() { Id = "3", UserName = "風衣大叔", Age = 40, Birthday = Convert.ToDateTime("1976-09-01"), DeptId = "2", DeptName = "銷售部" });
lstRes.Add(new User() { Id = "4", UserName = "閃電大蝦", Age = 37, Birthday = Convert.ToDateTime("1979-03-12"), DeptId = "4", DeptName = "創(chuàng)意部" });
lstRes.Add(new User() { Id = "5", UserName = "韓梅梅", Age = 29, Birthday = Convert.ToDateTime("1987-05-01"), DeptId = "5", DeptName = "事業(yè)部" });
return Json(lstRes, JsonRequestBehavior.AllowGet);
}
public JsonResult Edit(User user)
{
//反序列化之后更新
return Json(new { }, JsonRequestBehavior.AllowGet);
}
這樣確實是可以實現(xiàn)想要的效果，貌似也能行內編輯了，可是如果沒個列都需要行內編輯，并且列的個數(shù)很多，那么是不是每個列都得這樣去formmater？并且這種寫法狠顯然很死板，博主著實難以接受。于是又找了找例子，發(fā)現(xiàn)在bootstrapTable的擴展里面存在bootstrap-table-editable.js這個js。
三、bootstrapTable行內編輯最終方案
好吧，博主承認，上面還是鋪墊，因為博主覺得這可能是解決問題的一般思路，所以將這些鋪墊的篇幅可能有點多。首先來看看bootstrap-table-editable.js這個文件：
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* extensions: https://github.com/vitalets/x-editable
*/
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
editable: true,
onEditableInit: function () {
return false;
},
onEditableSave: function (field, row, oldValue, $el) {
return false;
},
onEditableShown: function (field, row, $el, editable) {
return false;
},
onEditableHidden: function (field, row, $el, reason) {
return false;
}
});
$.extend($.fn.bootstrapTable.Constructor.EVENTS, {
'editable-init.bs.table': 'onEditableInit',
'editable-save.bs.table': 'onEditableSave',
'editable-shown.bs.table': 'onEditableShown',
'editable-hidden.bs.table': 'onEditableHidden'
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initTable = BootstrapTable.prototype.initTable,
_initBody = BootstrapTable.prototype.initBody;
BootstrapTable.prototype.initTable = function () {
var that = this;
_initTable.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.editable) {
return;
}
$.each(this.columns, function (i, column) {
if (!column.editable) {
return;
}
var _formatter = column.formatter;
column.formatter = function (value, row, index) {
var result = _formatter ? _formatter(value, row, index) : value;
return ['<a href="javascript:void(0)"',
' data-name="' + column.field + '"',
' data-pk="' + row[that.options.idField] + '"',
' data-value="' + result + '"',
'>' + '</a>'
].join('');
};
});
};
BootstrapTable.prototype.initBody = function () {
var that = this;
_initBody.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.editable) {
return;
}
$.each(this.columns, function (i, column) {
if (!column.editable) {
return;
}
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('save').on('save', function (e, params) {
var data = that.getData(),
index = $(this).parents('tr[data-index]').data('index'),
row = data[index],
oldValue = row[column.field];
row[column.field] = params.submitValue;
that.trigger('editable-save', column.field, row, oldValue, $(this));
});
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('shown').on('shown', function (e, editable) {
var data = that.getData(),
index = $(this).parents('tr[data-index]').data('index'),
row = data[index];
that.trigger('editable-shown', column.field, row, $(this), editable);
});
that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
.off('hidden').on('hidden', function (e, reason) {
var data = that.getData(),
index = $(this).parents('tr[data-index]').data('index'),
row = data[index];
that.trigger('editable-hidden', column.field, row, $(this), reason);
});
});
this.trigger('editable-init');
};
}(jQuery);
這個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('提交數(shù)據(jù)成功');
}
},
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 '年齡必須是數(shù)字';
var age = parseInt(v);
if (age <= 0) return '年齡必須是正整數(shù)';
}
}
}
其他基本不用做任何修改。
代碼釋疑：上文在初始化的columns屬性里面通過editable屬性來配置可編輯的參數(shù)，注意這里每個列的editable屬性對應的Json對象即為x-editable里面的初始化的Json對象，也就是說我們初始化x-editable的時候可以配置哪些屬性，在列的editable屬性里面也可以同樣配置，這樣用起來就爽多了吧。編輯后的提交方法統(tǒng)一放到onEditableSave事件里面統(tǒng)一處理。
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提供了許多配置日期框的參數(shù)，如下：
當然，如果精確到時分秒，可以使用datetime類型的編輯框。如下是官方給出的時間框編輯效果，看著還不錯。
3、下拉框
表單編輯里面還有一個重要的標簽就是select了。上文我們知道x-editable為我們提供了下拉框的編輯模式，比如我們的部門這一列的編輯可以寫成這樣：
{
field: "DeptId",
title: "部門",
editable: {
type: 'select',
title: '部門',
source:[{value:"1",text:"研發(fā)部"},{value:"2",text:"銷售部"},{value:"3",text:"行政部"}]
}
}
得到效果
當然，這種本地設置數(shù)據(jù)源的方法肯定是不能滿足我們需求的，因為很多情況下拉框里面的選項是從數(shù)據(jù)庫遠程得到的。當然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 = "研發(fā)部" });
lstRes.Add(new Department() { ID = "2", Name = "銷售部" });
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);
}
同樣能達到我們想要的結果。
代碼釋疑：這里有一點需要說明一下，細心的園友可能發(fā)現(xiàn)了，我們這里的 field: "DeptId" ，為什么這里要配置DeptId而不是DeptName呢?很簡單，因為我們需要和數(shù)據(jù)源里面的value值對應。
4、復選框
除了上述幾種常見的編輯框，x-editable還為我們提供了復選框組的編輯。比如：
{
field: "Hobby",
title: "愛好",
editable: {
type: "checklist",
separator:",",
source: [{ value: 'bsb', text: '籃球' },
{ value: 'ftb', text: '足球' },
{ value: 'wsm', text: '游泳' }],
}
}
得到效果：
當然，如果遠程數(shù)據(jù)，也可以使用類似上文的方法去取。
5、“陰魂不散”的select2
說到上文的復選框，博主不由自主又想到了Multiselect這些個東西，于是查找x-editable的文檔，結果發(fā)現(xiàn)它不支持Multiselect，但是支持select2，也不知道這是不是一個好消息。根據(jù)博主自己的使用經歷，也包括技術交流群里面的聊天經歷，發(fā)現(xiàn)很多人在使用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,
}
}
}
得到結果：
結果發(fā)現(xiàn)select2的選中值不能正常傳遞到后臺。反正博主試過各種參數(shù)，按照官方demo的寫法也試過，均以失敗告終。也不知道官方的demo如何成功的。這個問題先拋出來，如果有使用的園友歡迎指正與解答。后續(xù)如果博主解決了這個問題，也會在此更新。
四、總結
還有一個問題就是在編輯完成提交之后，博主在項目中遇到這樣一個問題：如果提交之后的文本內容過多，表格的thead里面th的寬度和tbody里面td的寬度不對其的問題，看著相當惡心。但是在寫demo的時候又沒有遇到這個問題。在此還是將解決方案給出來。
就這么一句話解決你的困擾！
本篇介紹了下bootstrapTable結合x-editable實現(xiàn)行內編輯的使用。文中很多問題都是根據(jù)博主的使用經歷來說明，如果你打算將它用起來，也可以試試。
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望能夠幫助大家更好的學習JS表格組件神器bootstrap table。
- Vue.js實現(xiàn)可編輯的表格
- angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
- vuejs+element UI點擊編輯表格某一行時獲取內容填入表單的示例
- 使用JavaScript實現(xiàn)表格編輯器(實例講解)
- jQuery實現(xiàn)可編輯表格并生成json結果(實例代碼)
- JavaScript簡單表格編輯功能實現(xiàn)方法
- javascript實現(xiàn)表格排序 編輯 拖拽 縮放
- 百度編輯器從Json對象中取值，完成初次渲染，在編輯器內畫表格
- editable.js 基于jquery的表格的編輯插件
- js+Html實現(xiàn)表格可編輯操作
相關文章
閉包在JavaScript高級程序設計(第3版)中是這樣描述:閉包是指有權訪問另一個函數(shù)作用域中的變量的函數(shù),下面這篇文章主要給大家介紹了關于javascript解決閉包漏洞的一個問題的相關資料,需要的朋友可以參考下2022-11-11
這幾天chatgpt可是非?；鸬?下面這篇文章主要給大家介紹了關于利用OpenAI?ChatGPT進行編碼嘗試體驗的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
Google Map API更新實現(xiàn)用戶自定義標注坐標
由于工作需要，又要開始看Google Map API 代碼，今天再把我之前的GoogleMap類，又更新了下，加了個簡單的用戶自定義標注坐標的功能。看看吧(代碼沒怎么優(yōu)化，別見笑)2009-07-07
用media="print"的css來控制要打印的文件，media為print的樣式，表示打印時該樣式才起作用，下面為大家詳細介紹下，感興趣的朋友不要錯過2014-01-01
在js中處理Date時,發(fā)現(xiàn)Safari和其他瀏覽器的支持方式不一致。下面通過本文給大家分享js中Safari瀏覽器中的Date，感興趣的朋友一起學習吧2017-07-07
這篇文章主要為大家詳細介紹了js+h5 canvas實現(xiàn)圖片驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
點擊頁面上的按紐，彈出一個層，背景變灰，這樣的效果現(xiàn)在網頁應用的比較多，這里只是個簡單的實現(xiàn)方式2010-06-06
這篇文章主要介紹了分享12個非常實用的JavaScript小技巧,這些小技巧可能在你的實際工作中或許能幫助你解決一些問題，需要的朋友可以參考下2016-05-05
網站開發(fā)時經常需要在某個頁面需要實現(xiàn)對大量圖片的瀏覽;用javascript來實現(xiàn)一個圖片瀏覽器，讓用戶無需等待過長的時間就能看到其他圖片2012-12-12
Date() 日期對象是一個構造函數(shù)必須使用new來調用創(chuàng)建我們的日期對象,本文給大家介紹JS中的Date()使用小結,感興趣的朋友一起看看吧2024-01-01