保持頁面重新加載後表格的擴展狀態

Question

我有一個帶有表格的jsp頁面。

<table class="table table-striped table-bordered table-hover" id="sample_3"> 
<thead> <tr><input type=hidden value="hidden value" id="" lass="cls" /> 
           <th> 
            Order ID 
           </th> 
           <th> 
            Customer Name 
           </th> 
           <th> 
            Delivery Date & Time 
           </th> 
           <th> 
            Amount 
           </th> 
           <th> 
            Payment Method 
           </th> 

          </tr> 
          </thead> 
          <tbody> 
          <c:forEach var="order" items="${orderList}" varStatus="status"> 
          <tr id="mainOrderRow_${order.header.orderId}"> 

           <form name="orderItemListForm${order.header.orderId}" id="orderItemListForm${order.header.orderId}" action="processOrder" method="POST"> 
             <input type="hidden" name="orderId" id="orderId" value="${order.header.orderId}" /> 
             <input type="hidden" name="orderAction" id="orderAction" value="" /> 
             <input type="hidden" name="approverNotes" id="approverNotes" value=""/> 
             <input type="hidden" name="inStockItems" id="inStockItems" value=""/> 
               <td> 
                 ${order.header.orderId} 
               </td> 
               <td> 
                ${order.header.user.userName} 
               </td> 
               <td> 
                ${order.header.deliveryTime} 
               </td> 
               <td> 
                ${order.header.totalAmount.currency} 
                   <fmt:formatNumber value="${order.header.totalAmount.value}" type="number" 
                   maxFractionDigits="2" minFractionDigits="2" /> 
               </td> 
               <td> 
                 ${order.header.paymentMethod} 
               </td> 
               </td> 
           </form>        
          </tr> 
     </c:forEach> 
          </tbody> 
          </table> 

當我上的「+」點擊的每一行，它展開以顯示細節表中的（從JSON，orderJson截取）。我已經使用JavaScript編寫它。

function fnFormatDetails(oTable, nTr) { 
    var aData = oTable.fnGetData(nTr); 

    selectedOrderId = aData[1]; 

     var orderJsonString = orderMap[''+selectedOrderId]; 


     var orderJson = JSON.parse(orderJsonString); 


     var Items = orderJson.order.Items; 

      var sOut = '<div class="row">'; 
      sOut += '<div class="col-md-7"><h3>Order Details for ID: '+selectedOrderId+'</h3><div class="table-responsive"><table class="table table-bordered orderDetails orderDetails">'; 

      sOut += '<thead><tr><th>Product Name</th><th>Quantity</th><th>Price/Unit</th><th>Availability</th><th>Total Price</th></tr></thead>'; 
      sOut += '<tbody>'; 
      var Currency = ""; 
      for(var itemLoop in Items){ 

            sOut += '<tr><td><del>'+Items[itemLoop].ProductName+'</del></td><td><del>'+Items[itemLoop].Quantity+'</del></td><td><del>'+Items[itemLoop].Currency+' '+Items[itemLoop].UnitPrice+'</del></td><td><del> <input type="checkbox" class="inStockItems" name="inStockItems" id="inStockItems" value="'+Items[itemLoop].ItemId+'" disabled> In Stock</del></td><td><del>'+Items[itemLoop].Currency+' '+Items[itemLoop].TotalItemPrice+'</del></td></tr>'; 


       Currency = ''+Items[itemLoop].Currency; 
      } 
      sOut += '</tbody>'; 

      sOut += '<tfoot><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>'+Currency+' '+orderJson.order.TotalItemsPrice+'</td></tr></tfoot>'; 


      sOut += '</div></div><div class="col-md-5"><div class="col-md-12">'; 

      sOut += '<h3>'; 
      if(orderJson.order.Status == "Submitted"){ 
       sOut += '<input type="button" value="Accept" class="btn btn-info" onclick="processOrder('+selectedOrderId+','+'\'accept\''+')">'; 
       sOut += '<input type="button" value="Reject" class="btn btn-danger" onclick="processOrder('+selectedOrderId+','+'\'reject\''+')">&nbsp;'; 

      }else if(orderJson.order.Status == "Accepted"){ 
       sOut += '<input type="button" value="Ship" class="btn btn-warning" onclick="processOrder('+selectedOrderId+','+'\'ship\''+')">'; 
      }else if(orderJson.order.Status == "Shipped"){ 
       sOut += '<input type="button" value="Deliver" class="btn btn-success" onclick="processOrder('+selectedOrderId+','+'\'deliver\''+')">'; 
      } 
      sOut += '<a href="#" class="btn btn-primary" onclick="window.open(&quot;printDeliveryDetails?orderId='+selectedOrderId+'&quot;,&quot;tandc&quot;,&quot;width=650,height=200,left=50,top=50,menubar=no,titlebar=no,toolbar=no,location=no&quot;); return false;">Print Delivery Details</a></h3>'; 
      sOut += '<div class="table-responsive">'; 
      sOut += '<table class="table table-bordered orderSummery">'; 
      sOut += '<tr><td>Customer Address</td><td>'+orderJson.order.Address+'</td></tr><tr><td>Delivery Method</td><td>'+orderJson.order.DeliveryMethod+'</td></tr>'; 
      if (orderJson.order.CustomerNote == null) { 
       sOut += '<tr><td>Customer&#39;s Note</td><td></td></tr>'; 
      } else { 
       sOut += '<tr><td>Customer&#39;s Note</td><td>'+orderJson.order.CustomerNote+'</td></tr>'; 
      } 

      sOut += '</table>'; 
      sOut += '</div></div></div></div>'; 
     return sOut; 
} 

下面是函數處理順序：

function processOrder(orderId, actionName) { 
    var formName = "orderItemListForm" + orderId; 
    if (actionName == 'accept') { 

       document.forms[formName].orderAction.value = actionName; 

         document.forms[formName].submit(); 
       } 
      } 
    }else if(actionName == 'reject'){ 
     if(document.getElementById("t_approverNotes").value == ''){ 
      alert("Please provide a reason for rejection"); 
      document.getElementById("t_approverNotes").focus(); 
     }else{ 
     document.forms[formName].orderAction.value = actionName; 
     document.forms[formName].approverNotes.value = $.trim($("#t_approverNotes").val()); 
     document.forms[formName].submit(); 
     } 
    }else { 
     document.forms[formName].orderAction.value = actionName; 
     document.forms[formName].submit(); 
    } 
} 

我的問題是，當我點擊一個按鈕（接受，拒絕，船舶，交付）在擴展區域時後的頁面重新加載表單被提交，該區域被摺疊，只顯示錶格的行。當頁面重新加載時，我希望擴展表單中的區域（在這裏不能使用ajax，因爲它會導致太多人登錄時出現問題）。任何想法如何做到這一點？

Answer 1

您必須將本地日期存儲到用戶 - 我的建議是使用localStorage，但您也可以使用Cookies。初始化應用程序時，必須從localStorage（或Cookie）中讀取狀態，並展開應展開的行。

下面是一個簡單localStorage例如：

var appState = { openRows: [1, 3, 5] }; // example state object with IDs of rows that are expanded 
// Storing your app state 
if (localStorage) { 
    localStorage.setItem('appState', JSON.stringify(appState)); 
} 

// Reading your app state 
var appState = JSON.parse(localStorage.getItem('appState')); 
// Code that expands all the rows that should be expanded