Bootstrap复选框表

时间:2015-01-12 15:34:26

标签: jquery twitter-bootstrap

我有以下引导程序表。我想获取选择复选框,但是当我点击按钮时它不起作用。 这是我的表:

<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")));
        });
    }); 
});

如何获取选择复选框?

3 个答案:

答案 0 :(得分:0)

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

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

使用您的示例代码显示&#34;州&#34;。

更新1:

JSFiddle

上查看

答案 1 :(得分:0)

将#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

});

答案 2 :(得分:0)

编辑本

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