easyui添加购物车同时附上easyui两个常用插件的使用方法
给你们介绍个好用的前端工具 HBuilder X
可以去网上下载
也可以去我的网盘下载
链接：https://pan.baidu.com/s/1fZleqK7wd4kCoM4bwSVwTw
提取码：e9xr
其他废话不多说，直接上代码，
<!doctype html>
<html>
<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.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.products {
overflow: auto;
height: 100%;
background: #fafafa;
}
.products ul {
list-style: none;
margin: 0;
padding: 0px;
}
.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 {
float: right;
position: relative;
width: 260px;
height: 100%;
background: #ccc;
padding: 0px 10px;
}
.ctitle {
text-align: center;
color: #555;
font-size: 18px;
padding: 10px;
}
</style>
</head>
<body style="height: 100%;">
<h2>购物车</h2>
<div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
<div class="cart">
<div class="ctitle">购物车</div>
<div style="background:#fff">
<table id="cartcontent" fitColumns="true" style="width1:300px;height:auto;">
<thead>
<tr>
<th field="name" width=140>商品名称</th>
<th field="quantity" width=60 align="right">数量</th>
<th field="price" width=60 align="right">价格</th>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:40px">把商品拖到这里添加到购物车</div>
</div>
<div class="products">
<ul>
<li>
<a href="#" class="item">
<img src="img/shirt1.jpg" />
<div>
<p>气球</p>
<p>价格:RMB25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="img/shirt2.jpg" />
<div>
<p>黑色</p>
<p>价格:RMB30</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="img/shirt3.jpg" />
<div>
<p>大象</p>
<p>价格:RMB35</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="img/shirt4.jpg" />
<div>
<p>涂鸦</p>
<p>价格:RMB40</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="img/shirt5.jpg" />
<div>
<p>绿色</p>
<p>价格:RMB45</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="img/shirt6.jpg" />
<div>
<p>黄色</p>
<p>价格:RMB50</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<script>
$(function() {
$('#cartcontent').datagrid({
singleSelect: true,
showFooter: true
});
$('.item').draggable({
/* 拖动后回到起始位置 */
revert: true,
proxy: 'clone',
/* true表示不能被拖拽 */
// disabled: true,
/* 拖动之前触发 */
/* onBeforeDrag: function(e,source) {
alert('拖动之前触发！');
//return false;
}, */
/* 拖动时触发 */
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('RMB')[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 nums = 0;
var rows = dg.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
cost += rows[i].price * rows[i].quantity;
nums += rows[i].quantity;
}
dg.datagrid('reloadFooter', [{
name: '总计',
quantity: nums,
price: cost
}]);
}
</script>
</body>
</html>
实现后是这样的
script写在下面，加载的更快w3c说的(全当是对的)
Draggable，Droppable插件的使用方法
http://www.bubuko.com/infodetail-1049242.html
http://www.jeasyui.net/plugins/152.html