1

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>
4

1 回答 1

3

Remove在您的购物车表中又添加了一列

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
});

添加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);
}

我还将 jsFiddle 选项更改onLoadNo wrap - in <head>sodata并且totalCost可以在全球范围内访问

jsFiddle

于 2013-07-07T11:03:09.220 回答