Bootstrap 复选框表

67up9zun  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(177)

我有下面的引导表。我想得到的选择复选框,但当我将点击按钮,它是不工作。这是我的表:

<div class="main">
            <button class="btn btn-default" id="get-selections">
                Get Selections
            </button>

        <table id="table-methods-table" data-toggle="table" data-url="data_out.json" data-height="200">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="PatName">Name</th>
                <th data-field="KinID">Stars</th>
                <th data-field="Service">Forks</th>

            </tr>
        </thead>
        </table>
        </div>

下面是我的javascript:

<script>
$(document).ready(function(){

    $("#table-methods").next().click(function () {
        $(this).hide();

        var id = 0,
            getRows = function () {
                var rows = [];

                for (var i = 0; i < 10; i++) {
                    rows.push({
                        id: PatName,
                        name: 'test' + PatName,
                        price: '$' + PatName
                    });
                    id++;
                }
                return rows;
            },
            // init table use data
            $table = $("#table-methods-table").bootstrapTable({
                data: getRows()
            });
        $("#get-selections").click(function () {

            alert("Selected values: " + JSON.stringify($table.bootstrapTable("getSelections")));
        });
    }); 
});

如何才能获得选择复选框?

svujldwt

svujldwt1#

你可以做一些非常简单的事情:

$('#get-selections').click(function() {
    var dataFieldValue = $('#table-methods-table th[data-checkbox="true"]').data('field');
    alert (dataFieldValue)
});

在您的示例中,代码显示“state”。
更新1:
JSFiddle上检查

p8ekf7hl

p8ekf7hl2#

将#get-selections回调放在文档就绪事件之后,如下所示:

$(document).ready(function() {

    $('#get-selections').click(function() {
        var dataFieldValue = $('#table-methods-table th[data-checkbox="true"]').data('field');
        alert (dataFieldValue)
    });
    // ... and your script here

});
ryevplcw

ryevplcw3#

编辑此

<table id="table-methods-table" data-toggle="table" data-url="data_out.json" data-height="200" data-click-to-select="true">

相关问题