Редактировать поля в таблице bootstrap-table

Я пытаюсь преобразовать поля в таблицу в Bootstrap-Table, которую можно редактировать, как в этом примере, но я не могу этого сделать: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html

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

<head>
    <title>custom-sort</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="assets/examples.css">
    <script src="assets/jquery.min.js"></script>
    <script src="assets/jquery.dataTables.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-table/src/bootstrap-table-custom.min.js"></script>
    <script src="assets/bootstrap-table/src/bootstrap-table-editable.js"></script>
    <script src="ga.js"></script>
</head>
<body>
    <div class="container">
        <h1>Custom Sort</h1>
        <p>Use <code>sorter</code> column option to define the custom sort of bootstrap table.</p>
        <table id="table" class="table table-bordered table-striped" data-editable="true" data-toggle="table" data-url="json/data1.json" data-pagination="true"></table>
    </div>

$('#table').bootstrapTable({
    url: 'json/data1.json',
    columns: [{
        field: 'id',
        title: 'Item ID',
        sortable: 'true',
        editable: 'true'
    }, {
        field: 'name',
        title: 'Item Name',
        sortable: 'true',
        editable: 'true'
    }, {
        field: 'price',
        title: 'Item Price',
        sortable: 'true',
        editable: 'true'
    }, ]
});

var $table = $('#table');

$(function () {
    $table.on('click-row.bs.table', function (e, row, $element) {
        $('.success').removeClass('success');
        $($element).addClass('success');
    });
});

JSON

[{
    "id": 0,
    "name": "Item 0",
    "price": "$0"
},{
    "id": 1,
    "name": "Item 1",
    "price": "$1"
},{
    "id": 2,
    "name": "Item 2",
    "price": "$2"
}]

Не могли бы вы помочь мне сделать все поля таблицы редактируемыми, пожалуйста.


json jquery bootstrap-table twitter-bootstrap-3
person derek    schedule 15.01.2016    source источник

Ответы (4)


arrow_upward
3
arrow_downward

В приведенном ниже примере показана инициализация таблицы с полем «имя», которое можно редактировать:

 function initTable() {
        $table.bootstrapTable({
            height: getHeight(),
            columns: [
                [
                    {
                        field: 'state',
                        checkbox: true,
                        rowspan: 2,
                        align: 'center',
                        valign: 'middle'
                    }, {
                        title: 'Item ID',
                        field: 'id',
                        rowspan: 2,
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        footerFormatter: totalTextFormatter
                    }, {
                        title: 'Item Detail',
                        colspan: 3,
                        align: 'center'
                    }
                ],
                [
                    {
                        field: 'name',
                        title: 'Item Name',
                        sortable: true,
                        editable: true,
                        footerFormatter: totalNameFormatter,
                        align: 'center'
                    }, {
                        field: 'price',
                        title: 'Item Price',
                        sortable: true,
                        align: 'center',
                        editable: {
                            type: 'text',
                            title: 'Item Price',
                            validate: function (value) {
                                value = $.trim(value);
                                if (!value) {
                                    return 'This field is required';
                                }
                                if (!/^\$/.test(value)) {
                                    return 'This field needs to start width $.'
                                }
                                var data = $table.bootstrapTable('getData'),
                                    index = $(this).parents('tr').data('index');
                                console.log(data[index]);
                                return '';
                            }
                        },
                        footerFormatter: totalPriceFormatter
                    }, {
                        field: 'operate',
                        title: 'Item Operate',
                        align: 'center',
                        events: operateEvents,
                        formatter: operateFormatter
                    }
                ]
            ]
        });

Источник: http://issues.wenzhixin.net.cn/bootstrap-table/#options/detail-view.html

person Wagner Bertolini Junior    schedule 07.11.2016

arrow_upward
0
arrow_downward

Editable Table — это плагин для работы с таблицами, который превращает стандартную HTML-таблицу в адаптивную редактируемую электронную таблицу с проверкой ввода на основе jQuery и bootstrap 2/3. попробуйте эту ссылку

http://www.jqueryscript.net/table/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table.html

person kannan D.S    schedule 15.01.2016
comment
Я видел этот пример раньше, но не заставил его работать, изменил JS, я поместил свою таблицу идентификаторов и включил bootstrap-table-editable.js в код, и я не знаю, что мне нужно изменить, чтобы он работал правильно - person derek; 18.01.2016

arrow_upward
0
arrow_downward

Кажется, вам не хватает некоторых файлов css (bootstrap-editable.css) и js (bootstrap-editable.js), а также вы включили некоторые другие js (jquery.dataTables.min.js).

Попробуйте просмотреть источник еще раз.

person Calvin    schedule 21.01.2016

arrow_upward
0
arrow_downward

Я только вчера разобрался с ajax-стороной. Я включу необходимые файлы библиотеки и часть кода, необходимую для запуска ajax (при условии, что вы будете это делать, поскольку вы загружаете с помощью json).

<link rel="stylesheet" href="/Includes/jquery/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Includes/jquery/bootstrapTable/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/Includes/jquery/bootstrap3-editable/css/bootstrap-editable.css">

<script src="/Includes/jquery/jquery-3.1.1.min.js"></script>
<script src="/Includes/jquery/bootstrap/js/bootstrap.min.js"></script>
<script src="/Includes/jquery/bootstrapTable/bootstrap-table.min.js"></script>
<script src="../../Includes/jquery/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="/Includes/jquery/bootstrapTable/bootstrap-table-editable.min.js"></script>

    idField: 'id',
    columns: [
        {field: 'id', title: 'ID', visible: false},
        {
            field: 'deadline', 
            title: 'Scheduling<br>Deadline', 
            editable: {
                type: 'text',
                url: './edit/edit_well_list.php'
            }
        },
        {
            field: 'visit_date', 
            title: 'Visit<br>Date',
            editable: {
                type: 'text',
                url: './edit/edit_well_list.php'
            }
        },
    ]
person Jeff Bluemel    schedule 17.05.2017