12

Используется таблица из библиотеки bootstrap-table и её расширение table editable (оригинал: x-editable). Проблема заключается в том, что предложенные для использования события editable-init.bs.table и editable-save.bs.table либо не срабатывают, либо я что-то не так делаю. Конечная цель - сохранить значение в базу. Кто-нибудь сталикивался? Если да, то как вы работаете с указанными выше событиями?

Создание таблицы:

function createBootstrapTable(tab_wrapper_id, targetUrl) { 
    $('#'+tab_wrapper_id).bootstrapTable({
        method: 'get',
        url: targetUrl,
        cache: false,
        pagination: false,
        showRefresh: true,
        showFooter: true,
        editable: true,
        sidePagination: 'server',
        pageSize: 100,
        pageList: [10, 25, 50, 100]
    }); 
}

Событие:

$('#' + tab_wrapper_id).on('editable-save.bs.table', function() {
   $('.editable').on('save',function(e, params){
      console.log(123);
   });
});
5
  • 1
    Советую добавить в текст вопроса код для воспроизведения проблемы.
    – Kyubey
    19 мая 2015 в 15:29
  • Спасибо за совет! 19 мая 2015 в 16:19
  • А можно оформить весь код в песочнице?
    – YozhEzhi
    18 мар 2017 в 19:00
  • Возможно ваш элемент добавлен в DOM после его загрузки.Попробуйте так $(document).find('#' + tab_wrapper_id).on('editable-save.bs.table', function() { $('.editable').on('save',function(e, params){ console.log(123); }); }); 21 мая 2017 в 7:31
  • Да и проверьте уникальность вашего id элемента.Вообще старайтесь это фсе провернуть используя классы. 21 мая 2017 в 7:33

1 ответ 1

0

Без полного примера сказать сложно. Скорее всего как вам и сказали:

  • вы ловите не там (неправильный элемент для прослушки событий, динамическая привязка или опечатка)
  • вы ловите не то (опечатка в названии события)

Вот полностью работающий пример:

HTML

<div class="alert alert-success" id="eventsResult">
  Here is the result of event.
</div>
<table id="eventsTable">
</table>
<hr>

JS

var data = [{
  "id": 0,
  "name": "Item 0",
  "price": "$0"
}, {
  "id": 1,
  "name": "Item 1",
  "price": "$1"
}, {
  "id": 2,
  "name": "Item 2",
  "price": "$2"
}, {
  "id": 3,
  "name": "Item 3",
  "price": "$3"
}];

$(document).ready(function() {
  var $result = $('#eventsResult');

  $('#eventsTable').on('all.bs.table', function(e, name, args) {
      console.log('Событие:', name, ', data:', args);
    })
    .on('click-row.bs.table', function(e, row, $element) {
      $result.text('Событие: click-row.bs.table');
    })
    .on('dbl-click-row.bs.table', function(e, row, $element) {
      $result.text('Событие: dbl-click-row.bs.table');
    })
    .on('sort.bs.table', function(e, name, order) {
      $result.text('Событие: sort.bs.table');
    })
    .on('check.bs.table', function(e, row) {
      $result.text('Событие: check.bs.table');
    })
    .on('uncheck.bs.table', function(e, row) {
      $result.text('Событие: uncheck.bs.table');
    })
    .on('check-all.bs.table', function(e) {
      $result.text('Событие: check-all.bs.table');
    })
    .on('uncheck-all.bs.table', function(e) {
      $result.text('Событие: uncheck-all.bs.table');
    })
    .on('load-success.bs.table', function(e, data) {
      $result.text('Событие: load-success.bs.table');
    })
    .on('load-error.bs.table', function(e, status) {
      $result.text('Событие: load-error.bs.table');
    })
    .on('column-switch.bs.table', function(e, field, checked) {
      $result.text('Событие: column-switch.bs.table');
    })
    .on('page-change.bs.table', function(e, number, size) {
      $result.text('Событие: page-change.bs.table');
    })
    .on('search.bs.table', function(e, text) {
      $result.text('Событие: search.bs.table');
    })
    .on('editable-save.bs.table', function(editable, field, row, oldValue, $el) {
      $result.text('Событие: editable-save.bs.table');
    })
    .on('editable-shown.bs.table', function(editable, field, row, $el) {
      $result.text('Событие: editable-shown.bs.table');
    })
    .on('editable-hidden.bs.table', function(editable, field, row, oldValue, $el) {
      $result.text('Событие: editable-hidden.bs.table');
    })
    .on('editable-init.bs.table', function() {
      $result.text('Событие: editable-init.bs.table');
    });

  $('#eventsTable').bootstrapTable({
    columns: [{
      field: 'id',
      title: 'id'
    }, {
      field: 'name',
      title: 'name',
      editable: {
        type: 'text'
      }
    }, {
      field: 'price',
      title: 'price',
      editable: {
        type: 'text'
      }
    }],
    data: data
  });

});

Ссылка на песочницу: http://jsfiddle.net/pvkovalev/71m1yqz9/

Надеюсь это вам поможет. Удачи. 🙂

3
  • Май, 2015. Не поздно ли? :)
    – user207618
    31 авг 2017 в 22:50
  • @Aid не, нормально 🙂 может ещё кому поможет. Я включил в ответ много событий, пока не надоело печатать, так что шансы есть 🙂 31 авг 2017 в 23:23
  • 1
    @pvkovalev Спасибо большое за столь развёрнутый ответ! :-) Вроде как действительно отлавливается событие editable-save.bs.table. 4 сен 2017 в 7:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.