我有一个带表的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> </td><td> </td><td> </td><td> </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\''+')"> ';
}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("printDeliveryDetails?orderId='+selectedOrderId+'","tandc","width=650,height=200,left=50,top=50,menubar=no,titlebar=no,toolbar=no,location=no"); 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's Note</td><td></td></tr>';
} else {
sOut += '<tr><td>Customer'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，因为当登录的人太多时会导致问题）。知道怎么做吗？
答案 0 :(得分：0)
您必须在本地将日期存储到用户 - 我的建议是使用localStorage，但您也可以使用Cookie。初始化应用时，您必须从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