jquery easyui shopping cart [on hold]

497
November 21, 2016, at 4:31 PM

I'm looking to do is change the quantity value in the drop area of the cart to a number spinner or an input box and make the price rise as the spinner goes up and decrease as the spinner goes down my code is the same as the easyui website

$(function() { 
    $('#cartcontent').datagrid({ 
        singleSelect: true, 
        showFooter: 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) { 
    var dg = $('#cartcontent'); 
    var data = dg.datagrid('getData'); 
    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(); 
    dg.datagrid('loadData', data); 
    var cost = 0; 
    var rows = dg.datagrid('getRows'); 
    for(var i = 0; i < rows.length; i++) { 
        cost += rows[i].price*rows[i].quantity; 
    } 
    dg.datagrid('reloadFooter', [{name:'Total',price:cost}]); 
} 
    
<!DOCTYPE html> 
<html style="height:100%"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>Building a drag-drop shopping cart - 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"> 
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.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> 
    </head> 
    <body style="height:100%;"> 
        <h2>Shopping Cart</h2> 
        <div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden"> 
            <div class="cart"> 
                <div class="ctitle">Shopping Cart</div> 
                <div style="background:#fff"> 
                <table id="cartcontent" fitColumns="true" style="width1: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> 
                <div class="ctitle" style="position:absolute;bottom:10px">Drop here toadd to cart4</div> 
            </div> 
            <div class="products"> 
                 <ul> 
                    <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> 
        </div> 
    </body> 
</html>

Rent Charter Buses Company
READ ALSO
Enable Checkbox based on Radio Button Selection

Enable Checkbox based on Radio Button Selection

I have Group of Checkbox , inside Treeview (bootstrap)[nnn]I'm Trying to create from each in the top Radio Button , Show and Hide function for specif Checkbox.

302