BootStrap作為目前比較流行的一款前端框架，平時開發中也用到的很多，之前在寫專案頁面用的Bootstrap，資料展示用的BootStrap Table，因為專案需求，需要對表格中某些欄位可以直接在表格中編輯保存，
對于BootStrap Table表格內編輯這里整理了兩種方法，想了解BootStrap Table的小伙伴可以移步到Bootstrap Table資料表格的使用指南，
第一種方法
通過contenteditable屬性設定元素的內容是可編輯，
優點：簡單，代碼量少，
缺點：由于BootStrap Table表格可以設定顯示或隱藏列，所以指定某一列可編輯就比較麻煩，
方法思路
結合BootStrap Table中onClickCell單擊單元格事件和onDblClickCell雙擊單元格事件屬性來實作，根據專案需求設定單擊或者雙擊事件觸發編輯單元格內容事件，
在渲染表格屬性時，添加單擊單元格事件屬性，
代碼如下，
/**
-
onClickCell: 單擊單元格觸發
-
field 點擊單元格的欄位名稱
-
value 點擊單元格的資料值
-
row 點擊列的整行資料
-
$element 當前點擊td的Dom元素
*/
onClickCell: function(field, value, row, $element) {
$element.attr(‘contenteditable’, true);
//元素失去焦點事件
$element.blur(function() {
//單元格修改后的的值
let tdValue = $element.html();
console.log(field);
console.log(tdValue);
console.log(row);
})
}
添加上面代碼后，就可以看到單元格的可編輯效果了，如下圖，
修改后的資料，單元格失去焦點后控制臺輸出的資料，
可以看出表格內容是修改了，但DOM中的當前行row內容卻沒有和表格中資料同步，需要通過表格的updateCell方法來更新一下單元格的資料，
修改后代碼如下，
onClickCell: function(field, value, row, $element) {
$element.attr(‘contenteditable’, true);
//元素失去焦點事件
$element.blur(function() {
//單元格修改后的的值
let tdValue = $element.html();
let index = $element.parent().data(‘index’);
//updateCell更新某單元格資料
$("#tbClass_table").bootstrapTable(‘updateCell’, {
index: index, //行索引
field: field, //列名
value: tdValue //cell值
})
console.log(field);
console.log(tdValue);
console.log(row);
})
}
});
控制臺輸出內容，
但DOM中的當前行row內容是和表格中是同步的，之后就可以把修改的資料保存到資料庫中了，
通過AJAX向后臺發送編輯保存的請求即可，引數因為row中的資料是和表格中的資料通路邊的，所以可以直接把row整體當做引數傳遞到后臺進行修改保存，傳遞的引數中第一個引數是表格前的復選框值，后臺不做處理就可以了，
到這里第一種方法就寫完了，下面來看一下第二種方法，
第二種方法
通過bootstrap-editable插件來實作，editable組件是一款用于創建可編輯彈出框的插件，封裝的很全面，也很好用，
bootstrap-editable下載地址，
方法思路
和第一種方法一樣結合BootStrap Table中onClickCell單擊單元格事件和onDblClickCell雙擊單元格事件屬性來實作，根據專案需求設定單擊或者雙擊事件觸發編輯單元格內容事件，
之后第一步當然是引入相關的檔案了，
其中bootstrap-table-editable.js是下載檔案中沒有的，bootstrap-table-editable.js其實是對editable做了一個簡單的封裝，增加了列的editable屬性以及編輯保存后的一些事件，使其對表格的操作更簡單，bootstrap-table-editable.js檔案代碼如下，
/**
-
bootstrap-table-editable.js
-
@author zhixin wen wenzhixin2010@gmail.com
-
extensions: https://github.com/vitalets/x-editable
*/
!function ($) {
‘use strict’;
. e x t e n d ( .extend( .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;
}
});
. e x t e n d ( .extend( .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.p
《一線大廠Java面試題決議+后端開發學習筆記+最新架構講解視頻+實戰專案原始碼講義》
【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整內容開源分享
rototype.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 + ‘"’,
‘>’ + ‘’
].join(’’);
};
});
};
BootstrapTable.prototype.initBody = function () {
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395381.html
標籤：其他
上一篇：隨便寫了一個js防抖工具