使用jquery中的bootstrap表将id添加到动态创建的行

Question

我正在使用JSON值创建Bootstrap表。我可以动态地将类添加到行。但是在创建动态引导表时我无法将行添加到行。请找我的代码，

HTML：

<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

JS：

$.ajax({
        type: "POST",
        url: "apilist",
        data: "",
        success: function (response) {
                    if (response != null) {
                        var data = [];
                        $.each(response.Slip, function (index) {
                            var obj = {};
                            obj.SlipID = response.Slip[index].SlipID;
                            obj.Client = response.Slip[index].Client;
                            data.push(obj);
                        });
                        $('#eventsTable').bootstrapTable({
                            columns: [
                                { field: "state", checkbox: true },
                                { field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
                                { field: "Client", title: 'Client', sortable: true },
                            ],
                            data: data,
                        });
                    }
          }
});

请让我知道这些建议，谢谢。

Answer 1

为此你可以使用rowAttributes行attributes和rowStyle用于行样式。

以下是您可以查看的CODE SNIPPET。

我希望这将有助于/指导您或实现您的要求。

var data = [{
        "name": "Bahrain",
        "code": "BH"
    }, {
        "name": "Burundi",
        "code": "BI"
    }, {
        "name": "Benin",
        "code": "BJ"
    }, {
        "name": "Bhutan",
        "code": "BT"
    }, {
        "name": "Jamaica",
        "code": "JM"
    }, {
        "name": "Bouvet Island",
        "code": "BV"
    }, {
        "name": "Botswana",
        "code": "BW"
    }, {
        "name": "Samoa",
        "code": "WS"
    }, {
        "name": "Bonaire, Saint Eustatius and Saba ",
        "code": "BQ"
    }, {
        "name": "Brazil",
        "code": "BR"
    }];

    $('#eventsTable').bootstrapTable({
        columns: [{
            title: "Conutry Code",
            field: 'code',
            sortable: true
        }, {
            title: "Conutry name",
            field: 'name',
            sortable: true
        }],
        data: data,
        rowStyle: function(row, index) {
            return {
                classes: `row-border ${index%2==1?'row-even':'row-odd'}`
            };
        },
        rowAttributes: function(row, index) {
            return {
                id: `x-bootstrap-row-${index+1}`
            };
        }
    });

.row-border{
  border-bottom: 1px solid #ccc;
}
.row-odd{
  background-color: wheat;
}
.row-even{
  background-color: whitesmoke;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>


<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>