simpleCart的功能就不用解释,购物车,很6.官网上的说明太模糊了,还是GIHUb上的好一点:https://github.com/wojodesign/simplecart-js/

文章解决问题:在simpleCatrt的基础上添加一个列名,并实现增删改查。

文章的思路是:1.添加列名 2.给列名赋值 3.显示列名 4.提交列名

1.了解其列表显示的规则

这个地方的数据来中:simplecart.js这个文件里面

    cartColumns: [
{ attr: "name", label: "Name" },
{ attr: "image", label: "image" }, //添加一个image属性
{ attr: "price", label: "Price", view: "currency" },
{ view: "decrement", label: !1 },
{ attr: "quantity", label: "Qty" },
{ view: "increment", label: !1 },
{ attr: "total", label: "SubTotal", view: "currency" },
{ view: "remove", text: "Remove", label: !1 }
]

①.{ attr: "name" , label: "Name" } ,每一列代表一个字段,在这里配了在前台就是使用 class="item_name",才能在添加的使用将数据放入对象中

②.{ view: "increment" , label: false , text: "+" } 也有一些建在“视图”,将创建一个专栏。例如,一个“+”的观点:

③.这里面的数据代表前台能使用的字段名。比如

2.了解simpleCart的取值规则

                    <div class="col-md1 simpleCart_shelfItem"> //理解为,实例item化对象
<a href="single.html" >
<img class="img-responsive item_image" src="data:images/pi5.png" alt="" />//添加item.image ,点击item_add 字段会添加到单前对象中
</a>
<h3><a href="single.html" class="item_name">T-Shirt</a></h3> //添加 item.name
<div class="price">
<h5 class="item_price">$</h5> //添加 item.price
<a href="#" class="item_add">Add To Cart</a>
<div class="clearfix"> </div>
</div>
</div>

①.使用simplecart的时候最外层必须先实现 class="simpleCart_shelfItem"。用面向对象很好理解,先实力化一个模型,然后赋值给每个字段值。

②.item_{name} 相当于赋值的字段,而name的定义请看1的显示规则。

3.前台显示

            <div class="simpleCart_items">
<!--数据加载前显示的内容 开始-->
<div style="text-align: center;">
购物车数据加载中...请稍待.
</div>
<!--数据加载前显示的内容 结束-->
</div>

z注意:但是最好在购物车的界面重新重新定义一下显示列:simpleCart.cartColumns 因为在Js里面默认显示如1一样,英文显示

在购物车html页面重新实例化一下:

            <script type="text/javascript">
simpleCart({
//Setting the Cart Columns for the sidebar cart display.
cartColumns: [
{ attr: "image", label: "图片展示", view: "image" },
//Name of the item
{ attr: "name", label: "商品名称" },
//Quantity displayed as an input
{ attr: "quantity", label: "数量", view: "input" },
//Built in view for a remove link
{ view: "remove", label: "操作", text: "移除", label: "操作" },
//Price of item
{ attr: "price", label: "单价" },
//Subtotal of that row (quantity of that item * the price)
{ attr: "total", label: "小计", view: "currency" }
]
});
</script>

3.数据传送问题

数据的显示和增加都解决了,然后数据怎么传输出去了?官方的那个方法可能基础太差,我只需要简单的post提交,所以自己重写了

                var checkOut = function () {
var id = "";//Id编号
var price = "";//价格
var quantity = "";//数量
var url = "/checkout.aspx?optype=shop";
simpleCart.each(function (item) {
id += item.get("pid") + ",";
price += item.get("price") + ",";
quantity += item.get("quantity") + ",";
})
$.post(url, { id: id, price: price, quantity: quantity }, function (data) {
if (data == ) {
alert("您下单成功");
simpleCart.empty();
}
else {
alert("下单失败,请稍后再试");
}
})
};

这样只后台的数据就是:1,2,3,4,5,的形式,到后台解析下就好了:

            string[] id = baseOpen.requesStr("id").Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);

5总结

技术摆在这里,能写这么多,要更加努力。

simpleCart让我理解的代码模块化,不要制造同样的轮子,你要理解的是他的构造。为什么我写了这么多东西,但是写网站又要重新写?因为没有标准化。

1.bootstrap 这套框架好在,标准化了样式,样式做到了很好。我们只需要记住基本类名,就能在所有项目中调用。

2.simpleCart的思路我更加佩服,将类名动态化。在前台使用新的字段,我们在.js里面只需要加入字段。以空间换时间,这种代码,换到哪里都能直接使用。

simpleCart的简单使用及配置的更多相关文章

  1. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  2. 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  3. 简单几步配置gitlab

    简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...

  4. Spring简单的文件配置

    Spring简单的文件配置 “计应134(实验班) 凌豪” 一.Spring文件配置 spring至关重要的一环就是装配,即配置文件的编写,接下来我按刚才实际过程中一步步简单讲解. 首先,要在web. ...

  5. Redhat 简单本地yum 配置

    Redhat 简单本地yum 配置 一.将redhat 系统的镜像挂载到系统上 Vmware Workstion 环境下: [虚拟机设置]--[硬件]--[CD/DVD]--[使用ISO映像文件]-- ...

  6. Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块

    文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...

  7. Spring Boot项目简单上手+swagger配置+项目发布(可能是史上最详细的)

    Spring Boot项目简单上手+swagger配置 1.项目实践 项目结构图 项目整体分为四部分:1.source code 2.sql-mapper 3.application.properti ...

  8. maven pom文件简单模板和配置详解

    https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解

  9. 简单安装与配置mysql数据库(绿色版)

    目录 绿色版下载 mysql绿色版(5.7版本的安装与配置) 绿色版下载: mysql官网下载地址:https://www.oracle.com/index.html mysql绿色版(5.7版本的安 ...

随机推荐

  1. REST服务介绍二

           之前一篇文章写过REST服务介绍, 今天再次来自回顾一下. REST是一种架构风格. 首次出现在2000年Roy Fielding的博士论文中,Roy Fielding是 HTTP 规范 ...

  2. Azure IoT带来更高效的新能源生产和会看人脸色的无人超市

    全球分析机构都认为物联网将在未来几年呈现爆发式增长,到2020年,各种传感器.新型物联网设备,再加上传统PC.智能手机.平板电脑.网络电视,以及各类可穿戴智能设备,将交织成一个由300亿到500亿台设 ...

  3. View and Data API 现在支持IE11了

    By Daniel Du After a long time waiting, IE11 finally supports WebGL, which enables us viewing our 3D ...

  4. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  5. 《javascript权威指南》读书笔记——第一篇

    <javascript权威指南>读书笔记——第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本 ...

  6. css sprite简便方法切 《评分五角星》

    摘抄自我趣同伴的心得: 大家可以会遇到过要做满意度用星级来评分的情况,类似这种 实现的方法有很多,大家最初想到的可能是根据满意度有多少种情况就切多少种图,然后拼在一张图里面,通过控制图片的位置来实现. ...

  7. Java源码分析之LinkedList

    LinkedList与ArrayList正好相对,同样是List的实现类,都有增删改查等方法,但是实现方法跟后者有很大的区别. 先归纳一下LinkedList包含的API 1.构造函数: ①Linke ...

  8. Windows 10 IoT Serials 2 - Windows 10 IoT RTM 升级教程

    7月29日,微软推出了Windows 10 for PC的正式版,其版本号是Build 10240.近两天官方说已经有4700万的下载安装量,同时这个数字还在不断攀升.另外,除了Windows 10 ...

  9. ORACLE临时表总结

    临时表概念 临时表就是用来暂时保存临时数据(亦或叫中间数据)的一个数据库对象,它和普通表有些类似,然而又有很大区别.它只能存储在临时表空间,而非用户的表空间.ORACLE临时表是会话或事务级别的,只对 ...

  10. javascript - 享元模式

    享元模式笔记  运用共享技术有效的支持大量的细粒度对象,避免对象间拥有相同内容造成多余的开销  享元模式主要还是对其数据.方法共享分离,它将数据和方法分成内部数据.内部方法和外部数据.外部方法.  内 ...