頁面分上下兩部分，上部分是所有的數(shù)據(jù)，下部分是購物車。通過在上面選擇需要處理的數(shù)據(jù)添加進(jìn)到購物車，實(shí)現(xiàn)對購物車數(shù)據(jù)的統(tǒng)一處理。

需要注意的有兩點(diǎn)：①購物車數(shù)據(jù)可刪除，且不能重復(fù)添加 ②響應(yīng)時(shí)間考慮，購物車單次處理數(shù)據(jù)最多限制為200條

代碼如下：

/** *添加進(jìn)購物車方法 */ function addToDownGrid(){var selRows = $("#basicInfoList").datagrid("getChecked");//選擇的用戶面積if(selRows==null || selRows.length==0){$.messager.alert('提示','未選中用戶信息！','info');return;}//加入下列表var curRows = $("#ywCustomerGrid").datagrid("getRows");//已加入購物車的用戶面積//校驗(yàn)本次添加后購物車數(shù)量是否超出上限200var maxSize = 200;if(selRows.length + curRows.length > maxSize){$.messager.alert('提示：','購物車剩余可添加'+(maxSize - curRows.length)+'條數(shù)據(jù)，本次選中'+selRows.length+'條，添加失敗！','info');return;}var map = {};$.each(curRows, function(index, curRow){map[curRow.id] = curRow.id;})//校驗(yàn)重復(fù)，篩除重復(fù)選擇的數(shù)據(jù)for(var i = 0; i<selRows.length; i++){var target = map[selRows[i].id];if(target){$.messager.alert("提示", "購物車已經(jīng)存在用戶編碼：" + 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"); }

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。