Bootstrap Table - x-editable doesnt update footer
Bootstrap table - x-editable (editable plugin) doesnt update footer contents. See https://github.com/wenzhixin/bootstrap-table/issues/1991
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<div class="container">
<table id="table"></table>
</div>
<div class="col-xs-2 bar_option">
<a class="insert" href="javascript:addRow(2);" title="新增行">
<i class="glyphicon glyphicon-plus" id="editTable_add_kjcg"></i>
新增
</a>
</div>
JavaScript
// Bootstrap table - x-editable (editable plugin) doesnt update footer contents. See https://github.com/wenzhixin/bootstrap-table/issues/1991
// Solution is to call `resetFooter` following changes (if `showFooter` true)
// This fiddle acts as proof of concept for PR, using inline copy of js file with required change
// CHANGE - include copy of https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js
// - see ~line 117
/**
* @author zhixin wen <[email protected]>
* 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;
},
onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
if(reason === 'save') {
var $td = $el.closest('tr').children();
$td.eq(-1).html((row.price*row.number).toFixed(2));
$el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
} else if(reason === 'nochange') {
$el.closest('tr').next().find('.editable').editable('show');
}
},
onEditableSave: function (field, row, oldValue, $el) {
$table = $('#table').bootstrapTable({});
$table.bootstrapTable('updateRow', {index: row.rowId, row: row});
},
onEditableShown: function (field, row, $el, editable) {
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,
...