01     <div style="margin:20px"  class="element" productname='空調(diào)'
productprice=’3550’>
02        <image src="img/air.jpg" width='120px' style="display:inherit"></image>
03        <span style="margin:10px">空調(diào)</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            //獲取數(shù)據(jù)網(wǎng)格中的全部數(shù)據(jù)
07            var data = $('#dg').datagrid('getData');
08            var rows = data.rows;
09            //當(dāng)前狀態(tài)，0代表新增產(chǎn)品，1代表更新產(chǎn)品
10            var state  = 0;
11            //總價(jià)
12            var sum = 0;
13            //遍歷數(shù)據(jù)網(wǎng)格中的所有行
14            rows.forEach(function(item, index){
15            //假如該產(chǎn)品存在的話則更新數(shù)據(jù)網(wǎng)格中對(duì)應(yīng)的行
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            //假如產(chǎn)品不存在的話則在數(shù)據(jù)網(wǎng)格中新增該產(chǎn)品
33     if(state ==0){
34         $('#dg').datagrid('appendRow',{
35              'name': name,
36              'price': price,
37              'num':1
38         });
39         sum += price*1;
40         }
41         //底部區(qū)域顯示產(chǎn)品的總價(jià)
42         $('#dg').datagrid('reloadFooter',[
43              {name: '總價(jià)', price: sum},
44         ]);
45     }
46  });