easyui添加购物车同时附上easyui两个常用插件的使用方法

最新推荐文章于 2023-04-20 08:34:35 发布

I`M程序员天花板

最新推荐文章于 2023-04-20 08:34:35 发布

阅读量373

点赞数

分类专栏： easyui easyui 文章标签： easyui 前端开发

easyui 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

easyui

1 篇文章 0 订阅

订阅专栏

给你们介绍个好用的前端工具 HBuilder X

可以去网上下载

http://www.dcloud.io/

也可以去我的网盘下载

链接：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

I`M程序员天花板

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui添加购物车同时附上easyui两个常用插件的使用方法

不多废话，直接上代码&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Building a drag-drop shopping ca...
复制链接

扫一扫