页面分上下两部分,上部分是所有的数据,下部分是购物车。通过在上面选择需要处理的数据添加进到购物车,实现对购物车数据的统一处理。

需要注意的有两点:①购物车数据可删除,且不能重复添加 ②响应时间考虑,购物车单次处理数据最多限制为200条

代码如下:

/**
*添加进购物车方法
*/
function addToDownGrid(){
var selRows = $("#basicInfoList").datagrid("getChecked");//选择的用户面积
if(selRows==null || selRows.length==0){
$.messager.alert('提示','未选中用户信息!','info');
return;
}
//加入下列表
var curRows = $("#ywCustomerGrid").datagrid("getRows");//已加入购物车的用户面积 //校验本次添加后购物车数量是否超出上限200
var 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代码实现购物车效果的更多相关文章

  1. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  2. js代码跑马灯效果-----轮播图字效果!

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  3. js代码实现放大镜效果

    每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...

  4. 圣诞节,把网站所有的js代码都压缩成圣诞树吧。

    本文分两章节,分别讲解如何使用js2image这个库生成可以运行的圣诞树代码 和 js2image的原理. github地址:https://github.com/xinyu198736/js2ima ...

  5. js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码

    一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...

  6. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  7. IE6-能让png图片有透明效果的js代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  9. js实现仿购物车加减效果

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

随机推荐

  1. HttpWebRequest 对象池 HTTP协议 HttpWebRequest和 Socket的一点总结

    相信接触过网络开发的人对HTTP.HttpWebRequest.Socket这些东西都不陌生吧.它们之间的一些介绍和关系我这里都忽略了.开我们平时开发过程中也是很少有机会接触大什么大并发这个东东,一般 ...

  2. laravel 5.5 整合 jwt 报错Method Tymon\JWTAuth\Commands\JWTGenerateCommand::handle() does not exist解决

    今天介绍一个在laravel5.5新版本整合jwt  执行 php artisan jwt:generate 再生成密钥时报的一个错误 Method Tymon\JWTAuth\Commands\JW ...

  3. 【Java】PS-查看Java进程-线程数

    PS-查看Java进程-线程数 ps 线程 个数_百度搜索 查看进程的线程数命令 - CSDN博客 java命令行运行jar里的main类 - coderland - 博客园

  4. 【转】Linux基础与Linux下C语言编程基础

    原文:https://www.cnblogs.com/huyufeng/p/4841232.html ------------------------------------------------- ...

  5. CHtmlEditCtrl(1) : Use CHtmlEditCtrl to Create a Simple HTML Editor

    I needed a lightweight HTML editor to generate "rich text" emails, so I decided to explore ...

  6. Office WPS如何在页眉页脚添加一条横线

    点击样式,页眉,修改   然后设置格式,可以添加一条或者两条横线,也可以设置不同的线型   最后效果如下图所示  

  7. android studio中为项目添加依赖包的方法

    右键项目,Open Module Settings 打开后选择Dependencies选项卡,点最右边的加号: 选择Libriay dependencies,从下拉列表里面选择就可以了.

  8. 用javascript请求动态页url返回更新

    例如我们用Ajax请求一个动态页返回的信息,或一个图片验证码请求一个*.ashx页面,第一次请求没问题,而第二次请求时,不变化,为啥? 因为第二次及以后请求的url与第一次是一样的,所以服务器(或是浏 ...

  9. uni-app - 支付(app支付、小程序支付、h5(微信端)支付)

    App支付.小程序支付.h5(微信端)支付 APP支付(内置) appPay.js /** * 5+App支付,仅支持支付宝以及微信支付 * * 支付宝Sdk集成,微信sdk未集成 * * @para ...

  10. httpclient Accept-Encoding 乱码

    解决方法 HttpEntity httpEntity = httpResponse.getEntity(); if (httpEntity != null) { if (httpEntity.getC ...