使用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>