使用jQuery中的引导表将ID添加到动态创建的行

Question

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

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用于行样式。

您可以在下面的“ 代码片段”中进行检查。

我希望这会帮助/指导您或达到您的要求。

 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>