在引导表上保存选定的行答案

【问题标题】：Save selected row on bootstrap-table在引导表上保存选定的行
【发布时间】：2019-07-15 07:55:54
【问题描述】：

我的引导表有问题

我需要我的引导表来记住表和选定行的选项，因为当我刷新页面时，我想要相同的选项，我希望表格重新选择同一行，las 选择的同一页。有没有办法保存表格状态？

<div class="tab-content">
<div class="tab-pane active" id="idContatti">
   <div class="table-responsive" ">
      <!--data-pagination="true"-->
      <table id="tableConttatti" data-state-save="true" data-state-save-id-table="save" data-height="500" data-id-field="Codice" data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true" data-search="true" data-row-style="rowStyle">
         <thead>
            <tr>
               <th data-field="state" data-radio="true"></th>
               <th data-field="__rank" data-sortable="true" data-halign="center" data-align="center">N.</th>
               <th data-field="societa" data-sortable="true" data-halign="center" data-align="center">societa</th>
               <th data-field="partitaIva" data-sortable="true" data-halign="center" data-align="center">P.Iva</th>
               <th data-field="codiceFiscale" data-sortable="true" data-halign="center" data-align="center">Codice Fiscale</th>
               <th data-field="indirizzo"data-sortable="true" data-halign="center" data-align="center">indirizzo</th>
               <th data-field="citta" data-sortable="true" data-halign="center" data-align="center">citta</th>
               <th data-field="telefono1" data-sortable="true" data-halign="center" data-align="center">telefono1</th>
               <th data-field="cellulare" data-sortable="true" data-halign="center" data-align="center">cellulare</th>
               <th data-field="fax" data-sortable="true" data-halign="center" data-align="center">fax</th>
               <th data-field="email" data-sortable="true" data-halign="center" data-align="center">email</th>
            </tr>
         </thead>
      </table>
   </div>
</div>

【问题讨论】：

HTML 是无状态的。这意味着当您刷新页面时，任何表单数据或项目选择都会丢失。您必须使用诸如 JavaScript 之类的编程语言来保存您想要保留的任何类型的数据。
我在项目中显然使用了 javascript 和 jquery...如何保存我的状态？
我试图用这个方法保存状态： $("#btn_opt").click(function() { var nR = tableConttatti.bootstrapTable('getSelections')[0]; var options = tableConttatti .bootstrapTable('getOptions'); var row = sessionStorage.setItem('row', nR); var opzioni = sessionStorage.setItem('opzioni', options); console.log("riga:", sessionStorage.getItem(" row")); console.log("options:", sessionStorage.getItem("opzioni")); }) 但是log的结果是([object object]怎么取object的数据？
请在您的问题中包含所有 your JavaScript。格式正确，清晰易读

标签： jquery row bootstrap-table

【解决方案1】：

$("#tableConttatti").click(function(id, row, index) {

var nR = tableConttatti.bootstrapTable('getSelections')[0];
        var options = tableConttatti.bootstrapTable('getOptions');
        console.log("pagina=", options.pageNumber);
        console.log("lunghezza=", options.pageSize);

        var riga = localStorage.setItem("row", nR.__rank);
        var pagina = localStorage.setItem("page", options.pageNumber);
        var lunghezza = localStorage.setItem("length", options.pageSize);
        return true;

}

$(document).ready(function() {

tableConttatti.bootstrapTable({
    url: "_elabPost.php?Inst=GETCONTATTI",
    pageSize: localStorage.getItem("length"),
    pageNumber: localStorage.getItem("page"),
    onLoadSuccess: function() {
        getSelectedRow()
    }


});

函数 getSelectedRow() {

var riga_sel = localStorage.getItem("row");
console.log("riga_sel", riga_sel);
var tr = document.getElementsByTagName("tr");
var td = document.getElementsByClassName("td");
for (var i = 0; i < tr.length; i++) {
    if (tr[i].cells[1].innerText == riga_sel) {
        console.log(tr[i]);
        $(tr[i]).addClass("selected");
        return;
    }
}

}

【讨论】：