Bootstrap Table с X-редактируемыми элементами, проблемы при сортировке

У меня проблема с Bootstrap Table и X-редактируемой библиотекой для редактирования на месте. Я создал простой пример, чтобы описать это.

HTML

<table id="table" class="table" data-toggle="table">
    <thead>
        <tr>
            <th class="col-xs-1" data-field="name" data-sortable="true">Name</th>
            <th class="col-xs-1" data-field="value" data-sortable="true">Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>
                <span id="note1" data-toggle="#edit1">value 1</span>
                <a href="#" id="edit1"><span>edit</span></a>
            </td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>
                <span id="note2" data-toggle="#edit2">value 2</span>
                <a href="#" id="edit2"><span>edit</span></a>
            </td>
        </tr>   
    </tbody>
</table>

JavaScript

$('#note1').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    title: 'Enter value1', 
    ajaxOptions: {
        dataType: 'json'
    },
    toggle: 'manual',
});

$('#note2').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    title: 'Enter value2', 
    ajaxOptions: {
        dataType: 'json'
    },    
    toggle: 'manual',
});

$('#edit1').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#note1').editable('toggle');
});

$('#edit2').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#note2').editable('toggle');
});

//ajax emulation
$.mockjax({
    url: '/post',
    responseTime: 200,
    response: function(settings) {
        if(settings.data.value) {
            this.responseText = '{"success": true}';
        } else {
            this.responseText = '{"success": false, "msg": "required"}';
        }
    }
});

Вы также можете найти его здесь: http://jsfiddle.net/xBB5x/9498/

Итак, есть две проблемы с этим:
1) Я могу редактировать свои элементы, и с этим все в порядке, пока я не использую сортировку столбцов Bootstrap Table. Как только я что-то сортирую, мои редактируемые элементы становятся недоступными для редактирования.
2) Если я изменяю старые значения на какие-либо новые значения, а затем сортирую любой столбец, я теряю свои новые значения, а старые значения возвращаются.

Любые идеи? Благодарю вас!


jquery twitter-bootstrap bootstrap-table jsfiddle x-editable
person Roman Suvorov    schedule 22.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня была та же проблема, редактируемая работа до сортировки, использования нумерации страниц или любого другого события, касающегося таблицы.

В итоге нашел решение здесь:

Вам нужно делегировать событие таблице, «редактируемый» — это класс css, назначенный вашему редактируемому элементу.

$("#table").on("click",".editable",function() {

    $(this).editable();
  //$(this).editable('toggle');

});
person Dabriel    schedule 23.06.2017