頁面分上下兩部分，上部分是所有的數據，下部分是購物車。通過在上面選擇需要處理的數據添加進到購物車，實現對購物車數據的統一處理。

需要注意的有兩點：①購物車數據可刪除，且不能重復添加 ②響應時間考慮，購物車單次處理數據最多限制為200條

代碼如下：

/** *添加進購物車方法 */ function addToDownGrid(){var selRows = $("#basicInfoList").datagrid("getChecked");//選擇的用戶面積if(selRows==null || selRows.length==0){$.messager.alert('提示','未選中用戶信息！','info');return;}//加入下列表var curRows = $("#ywCustomerGrid").datagrid("getRows");//已加入購物車的用戶面積//校驗本次添加后購物車數量是否超出上限200var maxSize = 200;if(selRows.length + curRows.length > maxSize){$.messager.alert('提示：','購物車剩余可添加'+(maxSize - curRows.length)+'條數據，本次選中'+selRows.length+'條，添加失敗！','info');return;}var map = {};$.each(curRows, function(index, curRow){map[curRow.id] = curRow.id;})//校驗重復，篩除重復選擇的數據for(var i = 0; i<selRows.length; i++){var target = map[selRows[i].id];if(target){$.messager.alert("提示", "購物車已經存在用戶編碼：" + selRows[i].code + "的信息！！","info");return ;}}$.each(selRows, function(index, selRow){$("#ywCustomerGrid").datagrid("appendRow", selRow);})$.messager.alert('提示：','添加成功！','info');//清空上列表選擇$("#basicInfoList").datagrid("uncheckAll"); }/** *移出購物車方法 */ function removeFromDownGrid(){var customerRow = $("#ywCustomerGrid").datagrid("getSelected");if(!customerRow){$.messager.alert('提示：','未選中用戶！','info');return false;}var selRows = $("#ywCustomerGrid").datagrid("getChecked");if(selRows!=null && selRows.length>0){for(var i=0;i<selRows.length;i++){var rowIndex = $("#ywCustomerGrid").datagrid("getRowIndex",selRows[i]);$("#ywCustomerGrid").datagrid("deleteRow",rowIndex);}}//清空購物車選擇 $("#ywCustomerGrid").datagrid("uncheckAll"); }

?

總結

以上是生活随笔為你收集整理的js代码实现购物车效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。