js代码实现购物车效果

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

需要注意的有两点:①购物车数据可删除,且不能重复添加 ②响应时间考虑,购物车单次处理数据最多限制为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");
}

原文地址:https://www.cnblogs.com/zjfjava/p/9263861.html

时间: 2024-10-28 15:30:03

js代码实现购物车效果的相关文章

如何撤销浏览器注入JS代码的执行效果?

如何撤销浏览器注入JS代码的执行效果? 可用的方法: 放弃所有本地修改,整体重新reload当前的URL(这相当于大粒度的savepoint/snapshot,应确保用户数据/视图状态能够按期望恢复) 内核实现immutable的DOM树,对DOM树的每个修改均产生一个新的版本快照,修改可以直接回退,比如提供一个document.revertTo方法 immutable数据结构上实现MVCC事务,事务本身的执行是原子的,但是并没有考虑用户如何手工反转事务 实现细粒度的对应每个业务逻辑层次写操作的

js代码实现放大镜效果

每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕竟好记性不如烂笔头. 主要事件: onmouseout onmouseover onmousemove 这种实现也是比较简单的,代码如下所示: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-

.Net中使用response.write(&#39;js代码&#39;)后css失去效果,解决办法。

net中使用response.write输出js会将js放在源代码的最前面,这样就可能出现破坏网页css的效果,让css失去效果 .net中使用Page.ClientScript.RegisterStartupScript(this.GetType(), "", " <script lanuage=javascript>if(confirm('确定要交卷吗?')==false){history.back()}; </script>"); 可以

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

写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病,总感觉不完美,心里一直惦记着那件事,也是在我写过那篇文章之后,没多久,在博客园首页看到了一篇文章较复杂js的书写格式,这里的代码看着比较简介,就想着抽时间将之前的那段js代码进行重构.说做就做,不想一想起之前写过那样的代码,心里就有疙瘩.所以也就有了这篇文章. $.extend 在开始重构之前,需要先学习一

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

一.想要实现eCharts线状图表的断点效果,如图 这种效果,在设置数据的时候应该是这样: data:[, 2, 3, , 5, 6, 7]:但是想要动态添加数据,实现方式有两种 1.拼接字符串法:var str='[, 2, 3, , 5, 6, 7]';var arr=eval(str); 2.改变数组长度法: var arr=[]; for(var i=1;i<8;i++){ if(i==1||i==4){ arr.length=arr.length+1; continue; }arr.p

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

上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分效果, 那个走路的孩子技术很简单,和以前的春分秋分Google的Doodles类似,就没有模仿,换成一个头像] 3.视屏拼图 4.百度地图api简单应用集合 5.财经数据 6.天气预报 [nodejs搭建,express框架,nodejs简单页面抓取,JS

js 技巧 (十)广告JS代码效果大全 【1】

广告JS代码效果大全 1.[普通效果]     现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面就是实现效果所需代码: var delta=0.015 var collection;     function floaters() {     this.items = [];     this.addItem = function(

js 技巧 (十)广告JS代码效果大全 【3】

3.[允许关闭]     与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码: var delta=0.015;     var collection;     var closeB=false;     function floaters() {     this.items = [];     this.addItem = function(id,x,y,content)     {     document.write('<DI

js实现仿购物车加减效果

代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ width: 500