页面重新加载后保持表的扩展状态

Question

I have got a jsp page with a table.

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

When I click on the '+' on each row, it expands to display the details(taken from the JSON, orderJson) of the table. I've written it using 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;
}

Here is the function process order:

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();
    }
}

My problem is, when I click a button(Accept, Reject, Ship, Deliver) on the expanded area and when the page reloads after the form is submitted, the area is collapsed, showing only the rows of the table. I want the area in the expanded form (can't use ajax here as it will cause problems when too many persons are logged in) when the page is reloaded. Any idea how to do it?

Answer 1

You'll have to store the date locally to the user - my suggestion is using localStorage , but you can also use Cookies. When you initialize your app, you'll have to read the state back out of localStorage (or Cookie) and expand the rows that should be expanded.

Here's a quick localStorage example:

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