购物车展示
一个商品的购物车是指用户手动填写商品数量后，能够显示该商品的总价格，并且能够计算整个购物车的总价格。下面是一个小的购物车案例。
购物车思路解析
1. 获取用户购买的所有商品信息，包括商品单价和商品数量。
2. 使用表格将商品信息展示出来。
3. 对商品价格进行计算，即商品单价乘以商品数量得到商品小计价格。
4. 计算所有商品的总价，即将所有商品的小计价格相加得到总价。
5. 当用户修改商品数量时，将修改后的商品数量保存在数据库中。
6. 商品数量修改后，重新获取商品信息并赋值到表格中，再次计算商品价格。
购物车的数据库
在购物车案例中，我们需要使用数据库来存储商品信息和用户选择的数量。通过数据库可以方便地对商品信息进行增删改查操作。
购买商品菊花茶
假设我们要购买的商品是菊花茶。我们首先需要获取菊花茶的单价和数量，并将其保存在数据库中。
购物车页面代码
以下是购物车页面的代码：
```javascript
manager window['car'] $('#goodsCarList').ligerGrid({
rowHeight: 40,
columns: [
{ display: '商品id号', name: 'goodsId', align: 'center', width: 90 },//自增id
{ display: '商品名称', name: 'goodsName', align: 'center', width: 90, type: 'text', editor: { type: 'text' } },
{ display: '商品单价', name: 'sale', align: 'center', width: 90 },
{ display: '商品数量', name: 'count', width: 100, type: 'int', isNegative: false, editor: { type: 'int' } },
{ display: '商品小计', name: 'saleSum', width: 90, render: function(row){
var saleSum {};
saleSum (row['sale'])*(row['count']);
return saleSum;
}}
],
enabledEdit: true,
data: $.extend(true, {}, CustomersData),
pageSize: 10,
toolbar: {
items: [
{ text: '删除', icon: 'delete' },
{ text: '修改', icon: 'modify' }
]
},
onAfterEdit: updateCar
});
GetData();
function GetData(){
$.ajax({
type: "POST",
url: '',
error:function(mes){
$('ajax获取购物车数据失败！');
},
success: function (html) {
eval(html);
({ data: CustomersData });
GetSumSale();
}
});
}
function GetSumSale() {
// 计算总价格
}
```
以上代码中，通过设置`{ display: '商品数量', name: 'count', width: 100, type: 'int', isNegative: false, editor: { type: 'int' },`可以修改商品数量。
数量修改展示
当用户修改商品数量时，系统会将修改后的数量保存在数据库中，并重新获取商品信息并赋值到表格中，重新计算商品价格。这样就实现了购物车中商品数量的修改功能。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
