上QQ阅读APP看书，第一时间看更新
3.5 实战：购物车的拖放
【本节详细代码参见随书源码：\源码\easyui\example\ c3\shoppingCart.html】
本节将向读者演示如何利用拖放和放置组件开发一个购物车程序。该程序允许用户将商品拖放到购物车内，并在购物车内显示商品的名称、单价以及数量，最后统计购物车内物品的总价。
首先在购物车应用中拖放的元素是一个个的产品，这些产品包含名称、图片、价格信息。为了能拖动产品的全部信息，通常会将产品的各类信息放到一个父容器中，并在父容器中定义产品的相关属性供放置区域获取，相关代码如下：
01 <div style="margin:20px" class="element" productname='空调' productprice=’3550’> 02 <image src="img/air.jpg" width='120px' style="display:inherit"></image> 03 <span style="margin:10px">空调</span> 04 <span>3550元</span> 05 </div>
本例在放置区域中以数据网格来代替购物车，当产品被拖放到放置区域时，可以通过父容器中定义的属性获取产品的信息，并新增或更新数据网格的相关数据，部分代码如下：
01 $('.right').droppable({
02 accept:'.element',
03 onDrop:function(e,source){
04 var name = $(source).attr('productname');
05 var price = $(source).attr('productprice');
06 //获取数据网格中的全部数据
07 var data = $('#dg').datagrid('getData');
08 var rows = data.rows;
09 //当前状态，0代表新增产品，1代表更新产品
10 var state = 0;
11 //总价
12 var sum = 0;
13 //遍历数据网格中的所有行
14 rows.forEach(function(item, index){
15 //假如该产品存在的话则更新数据网格中对应的行
16 if(item.name == name ){
17 var num = item.num+1;
18 $('#dg').datagrid('updateRow',{
19 index:index,
20 row:{
21 'name': name,
22 'price': price,
23 'num':num
24 }
25 });
26 state = 1;
27 sum += price*num;
28 }else{
29 sum += item.price*item.num;
30 }
31 });
32 //假如产品不存在的话则在数据网格中新增该产品
33 if(state ==0){
34 $('#dg').datagrid('appendRow',{
35 'name': name,
36 'price': price,
37 'num':1
38 });
39 sum += price*1;
40 }
41 //底部区域显示产品的总价
42 $('#dg').datagrid('reloadFooter',[
43 {name: '总价', price: sum},
44 ]);
45 }
46 });
最终运行结果如图3.8所示。
图3.8 购物车演示