删除按钮，使用jquery拖放购物车 [英] Remove button for drag and drop shopping cart using jquery

问题描述

我现在是jquery的新手。我正在开发一个网站作为我的项目的一部分。我可以拖放产品在购物车，但我无法添加一个删除按钮，也改变了总计

我尝试了所有可能的方式，也看到了重复的，但它为我工作。

$ b $我有办法做到这一点.Plz帮助我。
我将对所有人感到满意。

< h1> http://jsfiddle.net/Vwu37/3/

HEAD

 < meta http-equiv =Content-Typecontent =text / html; charset = UTF-8> 
< meta name =keywordscontent =jquery，ui，easy，easyui，web> 
< meta name =descriptioncontent =easyui可以帮助您轻松构建您的网页！> 
< title> jQuery EasyUI演示< / title> 
< link rel =stylesheettype =text / csshref =http://www.jeasyui.com/easyui/themes/default/easyui.css> 
< link rel =stylesheettype =text / csshref =http://www.jeasyui.com/easyui/themes/icon.css> 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.6.1.min.js>< / script> 
< script type =text / javascriptsrc =http://www.jeasyui.com/easyui/jquery.easyui.min.js>< / script> 
  

CSS

  .products {
 list-style：none; 
 margin-right：300px; 
 padding：0px; 
 height：100％; 
} 
 .products li {
显示：inline; 
 float：left; 
 margin：10px; 
} 
 .item {
 display：block; 
 text-decoration：none; 
} 
 .item img {
 border：1px solid＃333; 
} 
 .item p {
 margin：0; 
 font-weight：bold; 
 text-align：center; 
颜色：＃c3c3c3; 
} 
 .cart {
 position：fixed; 
 right：0; 
顶部：0; 
 width：300px; 
 height：100％; 
背景：#ccc; 
 padding：0px 10px; 
} 
 h1 {
 text-align：center; 
颜色：＃555; 
} 
 h2 {
 position：absolute; 
 font-size：16px; 
左：10px; 
 bottom：20px; 
颜色：＃555; 
} 
 .total {
 margin：0; 
 text-align：right; 
 padding-right：20px; 
} 
  

JS

  var data = {total：0，rows：[]}; 
 var totalCost = 0; 
 
 $（function（）{
 $（'＃cartcontent'）。datagrid（{
 singleSelect：true 
}）; 
 $（' 。$（$）$（$）$（$）$ {
 $ b $ ）.cursor ='not-allowed'; 
 $（this）.draggable（'proxy'）。css（'z-index'，10）; 
}，
 onStopDrag：function （）{
 $（this）.draggable（'options'）。cursor ='move'; 
} 
}）; 
 $（'。cart'）droppable （{
 onDragEnter：function（e，source）{
 $（source）.draggable（'options'）。cursor ='auto'; 
}，
 onDragLeave：function （e，source）{
 $（source）.draggable（'options'）。cursor ='not-allowed'; 
}，
 onDrop：function（e，source）{
 var name = $（source）.find（'p：eq（0）'）。html（）; 
 var price = $（source）.find（' p：eq（1）'）。html（）; 
 addProduct（name，parseFloat（price.split（'$'）[1]））; 
} 
}）; 
}）; 
 
 function addProduct（name，price）{
 function add（）{
 for（var i = 0; i< data.total; i ++）{
 var row = data.rows [i]; 
 if（row.name == name）{
 row.quantity + = 1; 
 return; 
} 
} 
 data.total + = 1; 
 data.rows.push（{
 name：name，
 quantity：1，
 price：price 
}）; 
} 
 add（）; 
 totalCost + = price; 
 $（'＃cartcontent'）。datagrid（'loadData'，data）; 
 $（'div.cart .total'）。html（'Total：$'+ totalCost）; 
} 
  

HTML

 < body style =margin：0; padding：0; height：100％; background：#fafafa;> 
< ul class =products> 
< li> 
< a href =＃class =item> 
< img src =images / shirt1.gif/> 
< div> 
< p>气球< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt2.gif/> 
< div> 
< p>感觉< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt3.gif/> 
< div> 
< p> Elephant< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt4.gif/> 
< div> 
< p>邮票< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt5.gif/> 
< div> 
< p> Monogram< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< li> 
< a href =＃class =item> 
< img src =images / shirt6.gif/> 
< div> 
< p>滚动< / p> 
< p>价格：$ 25< / p> 
< / div> 
< / a> 
< / li> 
< / ul> 
< div class =cart> 
< h1>购物车< / h1> 
< div style =background：#fff> 
< table id =cartcontentfitColumns =truestyle =width：300px; height：auto;> 
< thead> 
< tr> 
< th field =namewidth = 140> Name< / th> 
< th field =quantitywidth = 60 align =right>数量< / th> 
< th field =pricewidth = 60 align =right> Price< / th> 
< / tr> 
< / thead> 
< / table> 
< / div> 
< p class =total>总计：$ 0< / p> 
< h2>将此添加到购物车< / h2> 
< / div> 
< / body> 
  

解决方案

我还添加了另外一列在您的购物车表中删除

HTML

 < th field =namewidth = 140> Name< / th> 
< th field =quantitywidth = 60 align =right>数量< / th> 
< th field =pricewidth = 60 align =right> Price< / th> 
< th field =removewidth = 60 align =right>删除< / th> //在这里添加
  

JS

  data.rows.push（{
 name：name，
 quantity：1，
 price：price，
 remove：'< a href =＃class =removeonclick =removeProduct（this，event）> X< / a>'//在此添加
}）; 
  

添加删除处理程序

  function removeProduct（el，event）{
 var tr = $（el）.closest（'tr'）; 
 var name = tr.find（'td [field = name]'）。text（）; 
 var price = tr.find（'td [field = price]'）。text（）; 
 var quantity = tr.find（'td [field = quantity]'）。text（）; （var i = 0; i< data.total; i ++）{
 var row = data.rows [i]; 
 
 if（row.name == name）{
 data.rows.splice（i，1）; 
 data.total--; 
 break; 
} 
} 
 totalCost  -  = price * quantity; 
 $（'＃cartcontent'）。datagrid（'loadData'，data）; 
 $（'div.cart .total'）。html（'Total：$'+ totalCost）; 
} 
  

我还更改了jsFiddle选项 onLoad 到不包含< head> 所以数据和 totalCost 将可以全球访问

jsFiddle

I am new to jquery.I am presently developing a website as a part of my project.I am able to drag and drop the products in shopping cart but i am unable to add a remove button to it and also altering the total after removing the item from cart.

I tried all possible ways and also saw the duplicates but it dint work for me.

I there any way to do so.Plz help me. I will be gratefull to u all.

http://jsfiddle.net/Vwu37/3/

HEAD

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

CSS

.products{
    list-style:none;
    margin-right:300px;
    padding:0px;
    height:100%;
}
.products li{
    display:inline;
    float:left;
    margin:10px;
}
.item{
    display:block;
    text-decoration:none;
}
.item img{
    border:1px solid #333;
}
.item p{
    margin:0;
    font-weight:bold;
    text-align:center;
    color:#c3c3c3;
}
.cart{
    position:fixed;
    right:0;
    top:0;
    width:300px;
    height:100%;
    background:#ccc;
    padding:0px 10px;
}
h1{
    text-align:center;
    color:#555;
}
h2{
    position:absolute;
    font-size:16px;
    left:10px;
    bottom:20px;
    color:#555;
}
.total{
    margin:0;
    text-align:right;
    padding-right:20px;
}

JS

var data = {"total":0,"rows":[]};
var totalCost = 0;

$(function(){
    $('#cartcontent').datagrid({
        singleSelect:true
    });
    $('.item').draggable({
        revert:true,
        proxy:'clone',
        onStartDrag:function(){
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index',10);
        },
        onStopDrag:function(){
            $(this).draggable('options').cursor='move';
        }
    });
    $('.cart').droppable({
        onDragEnter:function(e,source){
            $(source).draggable('options').cursor='auto';
        },
        onDragLeave:function(e,source){
            $(source).draggable('options').cursor='not-allowed';
        },
        onDrop:function(e,source){
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
        }
    });
});

function addProduct(name,price){
    function add(){
        for(var i=0; i<data.total; i++){
            var row = data.rows[i];
            if (row.name == name){
                row.quantity += 1;
                return;
            }
        }
        data.total += 1;
        data.rows.push({
            name:name,
            quantity:1,
            price:price
        });
    }
    add();
    totalCost += price;
    $('#cartcontent').datagrid('loadData', data);
    $('div.cart .total').html('Total: $'+totalCost);
}

HTML

<body style="margin:0;padding:0;height:100%;background:#fafafa;">
    <ul class="products">
        <li>
            <a href="#" class="item">
                <img src="images/shirt1.gif"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt2.gif"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt3.gif"/>
                <div>
                    <p>Elephant</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt4.gif"/>
                <div>
                    <p>Stamps</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt5.gif"/>
                <div>
                    <p>Monogram</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt6.gif"/>
                <div>
                    <p>Rolling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
    </ul>
    <div class="cart">
        <h1>Shopping Cart</h1>
        <div style="background:#fff">
        <table id="cartcontent" fitColumns="true" style="width:300px;height:auto;">
            <thead>
                <tr>
                    <th field="name" width=140>Name</th>
                    <th field="quantity" width=60 align="right">Quantity</th>
                    <th field="price" width=60 align="right">Price</th>
                </tr>
            </thead>
        </table>
        </div>
        <p class="total">Total: $0</p>
        <h2>Drop here to add to cart</h2>
    </div>
</body>

解决方案

I have added one more column Remove in your cart table

HTML

<th field="name" width=140>Name</th>
<th field="quantity" width=60 align="right">Quantity</th>
<th field="price" width=60 align="right">Price</th>
<th field="remove" width=60 align="right">Remove</th> // Added here

JS

data.rows.push({
    name: name,
    quantity: 1,
    price: price,
    remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>' // Added here
});

Added remove handler

function removeProduct(el, event) {
    var tr = $(el).closest('tr');
    var name = tr.find('td[field=name]').text();
    var price = tr.find('td[field=price]').text();
    var quantity = tr.find('td[field=quantity]').text();
    for (var i = 0; i < data.total; i++) {
        var row = data.rows[i];
        if (row.name == name) {
            data.rows.splice(i, 1);
            data.total--;
            break;
        }
    }
    totalCost -= price * quantity;
    $('#cartcontent').datagrid('loadData', data);
    $('div.cart .total').html('Total: $' + totalCost);
}

I have also changed jsFiddle option onLoad to No wrap - in <head> so data and totalCost will be accessible globally

jsFiddle

这篇关于删除按钮，使用jquery拖放购物车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！