Question

我正在使用bootstrap-table.js创建表。我目前的麻烦是每次编辑行数据都会在排序后消失。即使我对该列进行排序，如何永久编辑行？

这是显示表格的javascript

    $(function () {
    $('#table').bootstrapTable({
        idField: 'name',
        pagination: true,
        search: true,
        url: '/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/',
        columns: [{
            field: 'name',
            sortable: true,
            title: 'Name'
        }, {
            field: 'stargazers_count',
            sortable: true,
            title: 'Stars'
        }, {
            field: 'forks_count',
            sortable: true,
            title: 'Forks'
        }, {
            field: 'description',
            sortable: true,
            title: 'Description'
        }],
        onPostBody: function () {
            $('#table').editableTableWidget({editor: $('<textarea>')});
        }
    });
});

这是我的jsfiddle：

http://jsfiddle.net/dyaskur/vxbfzke5/

顺便说一句，我当前的项目使用bootstrap-table而不是数据表我不是试图找到将数据保存到数据库的解决方案，而是将数据保存到bootstrap-table，以便可以动态排序

Answer 1

您需要保存可编辑数据，然后应用于排序。当你编辑你的表时，你对表进行排序是暂时的，所以插件会获取你存储的数据并对它们进行排序。

$(function () {
$('#table').bootstrapTable({
    idField: 'name',
    pagination: true,
    search: true,
    url: '/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/',
    columns: [{
        field: 'name',
        sortable: true,
        title: 'Name'
    }, {
        field: 'stargazers_count',
        sortable: true,
        title: 'Stars'
    }, {
        field: 'forks_count',
        sortable: true,
        title: 'Forks'
    }, {
        field: 'description',
        sortable: true,
        title: 'Description'
    }],
    onPostBody: function () {
        $('#table').editableTableWidget({editor: $('<textarea>')});
    }
});

$('table td').on('change', function(evt, newValue) {
    // do something with the new cell value 
    if (....) { 
        return false; // reject change
    }
});
});

可永久引导编辑行？

1 个答案: