Question

我正在使用Bootstrap表功能来管理数据报告。我有可单击的图标，可为每个数据行生成信息。我可以采取行动。单击该操作后，我无法删除任何行。

目的是运行搜索/查询，查看结果，清除一些不适用的内容，然后将剩余的记录/行推送到报告中。

我基本上有window.operateEvents函数。当我切换注释行时，我可以获得关于row.id的良好信息。当我将其删除时，什么也没发生。


/* Layout File */

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="{{ asset('sass/app.scss') }}" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Bootstrap table -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.1/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.14.1/dist/bootstrap-table.min.js"></script>

    <script src="https://unpkg.com/tableexport.jquery.plugin@1.10.1/tableExport.min.js"></script>

    <script src="https://unpkg.com/bootstrap-table@1.14.1/dist/extensions/export/bootstrap-table-export.min.js"></script>

</head>

/* Resource (View) File */

<div class="container">
    <h1>List Expenses</h1>

    @if ($expenses)
        <div class="datatable">
            <table id="expenseTable" data-toggle="table" class="table" data-search="true" data-pagination="true" data-sortable="true" data-detail-view="true" data-detail-formatter="detailFormatter" data-show-export="true" data-id-field="id" data-page-list="[5, 10, 25, 50, 100, ALL]">
                <thead>
                    <tr>
                        <th data-field="id" data-formatter="idLinkFormatter" data-sortable="true">ID</th>
                        <th data-field="payee" data-sortable="true">Payee</th>
                        <th data-field="exp_date" data-sortable="true">Date</th>
                        <th data-field="amount" data-sortable="true" formatter="totalCurrencyFormatter" data-sorter="totalCurrencySorter">Amount</th>
                        <th data-field="miles" data-sortable="true">Miles</th>
                        <th data-field="mileage_rate" data-visible="false">Mileage Rate</th>
                        <th data-field="comments" data-visible="false">Comments</th>
                        <th data-field="detail_url" data-visible="false">Detail URL</th>
                        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($expenses as $expense)
                    <tr>
                        <td>{{ $expense['id'] }}</td>
                        <td>{{ $expense['payee'] }}</td>
                        <td>{{ $expense['exp_date'] }}</td>
                        <td>${{ $expense['amount'] }}</td>
                        <td>{{ $expense['miles'] }}</td>
                        <td>${{ $expense['mileage_rate'] }}</td>
                        <td>{{ $expense['comments'] }}</td>
                        <td>{{ route('expenses.show', $expense['id']) }}</td>
                        <td></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    <script>
    var $table = $('#expenseTable');
    var $remove = $('#remove');
    var selections = [];

    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
    }

    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1;
        });
        return res;
    }

    function idLinkFormatter(value, row, index) {
        return '<a href="' + row.detail_url + '"' +row.id+ '">' +row.id+ '</a>';
    }

    function detailFormatter(index, row) {
        var html = []
        // $.each(row, function (key, value) {
        //     html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        // });
        html.push('<p><b>ID</b>: ' + row.id + '</p>');
        html.push('<p><b>Payee</b>: ' + row.payee + '</p>');
        html.push('<p><b>Date</b>: ' + row.exp_date + '</p>');
        html.push('<p><b>Amount</b>: ' + row.amount + '</p>');
        html.push('<p><b>Miles</b>: ' + row.miles + '</p>');
        html.push('<p><b>Mileage Rate</b>: ' + row.mileage_rate + '</p>');
        html.push('<p><b>Comments</b>: ' + row.comments + '</p>');
        return html.join('');
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="fa fa-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-trash"></i>',
            '</a>'
        ].join('');
    }

    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function (e, value, row, index) {


            // alert('You click delete action, row: ' + [row.id]);

            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
            console.log("ID: " + row.id);
        }
    }

    function totalTextFormatter(data) {
        return 'Total';
    }

    function totalNameFormatter(data) {
        return data.length;
    }

    function totalCurrencySorter(a, b, rowA, rowB) {
        a = +a.substring(1);  // remove $
        b = +b.substring(1);
        if (a > b) return 1;
        if (a < b) return -1;
        return 0;
    }

    function totalCurrencyFormatter(data) {
        var field = this.field
        return '$' + data.map(function (row) {
            return +row[field].substring(1)
            }).reduce(function (sum, i) {
            return sum + i;
        }, 0)
    }

</script>

    @else
        <div>No expenses found</div>
    @endif

</div>

我希望单击“删除”图标将启动remove（）方法以从HTML / Bootstrap数据表中删除该行，但是什么也没发生。

如何从Bootstrap数据表中删除行

0 个答案: