用css和jQuery实现简单的购物车功能
2017-11-29 14:35
806 查看
首先导入各种jar包和样式
bootstrap.min.cssangular.min.js
bootstrap.min.js
jquery-3.2.1.min.js
布局和样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品订单(增删改查):新增订单;批量删除,发货;模糊查询,下拉菜单内容过滤(含时间);全选反选,列名排序</title> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/angular.min.js"></script> <!-- 样式布局 --> <style type="text/css"> .first { background-color: #007aff; } /* 表格奇数行变 中绿 色 */ tbody tr:nth-child(odd) { background-color: #00FA9A; } /* 表格偶数行变 弱绿 色 */ tbody tr:nth-child(even) { background-color: #98FB98; } .li { background-color: #FEB6C1; font-size: 15px; color: #93212E; } .inputErrorColor { border: 1px solid #ff3b30; } .inputSuccessColor { border: 1px solid black; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>商品订单信息表</h3> <div> <input placeholder="用户名搜索" ng-model="searchName"> <input placeholder="手机号搜索" ng-model="searchTel"> <select ng-model="selectCity"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>重庆</option> <option>天津</option> <option>深圳</option> </select> <select ng-model="selectState"> <option>选择状态</option> <option>发货</option> <option>已发货</option> <option>已收货</option> </select> <select ng-model="startMonth"> <option>开始月份</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> 16b5b <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select> - <select ng-model="endMonth"> <option>结束月份</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select> </div><br> <button ng-click="addGoods()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 192px;">新增订单</button> <button ng-click="plFahuo()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量发货</button> <button ng-click="delSelect()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;float: left;margin-left: 18px;">批量删除订单</button><br><br> <table align="center" border="1 solid #777777" cellspacing="0" cellpadding="18"> <thead> <tr> <th><input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"></th> <th>ID <!--根据商品列名 ID 排序的点击事件--> <button ng-click="sortProducts('id')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button> </th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格 <!--根据商品列名 价格 排序的点击事件--> <button ng-click="sortProducts('price')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button> </th> <th>城市</th> <th>下单时间 <!--根据商品列名 下单时间 排序的点击事件--> <button ng-click="sortProducts('time')" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">排序</button> </th> <th>状态</th> </tr> </thead> <tbody align="center"> <!--先遍历出商品数据,再过滤子元素,实现模糊查询功能,最后根据列头标题实现排序 注意:需要使用多个ng-show指令时可以用 && 连接在一起,如下 --> <tr ng-repeat="goods in Products | filter:searchName | filter:searchTel | orderBy:(sortFlag+sortName)" ng-if="CityTest(goods.city,selectCity)" ng-show="StateTest(goods.goodsState,selectState) && filterMonth($index) "> <th><input type="checkbox" ng-model="goods.state" ng-click="selectOne($index)"></th> <td>{{goods.id}}</td> <td>{{goods.goodsName}}</td> <td>{{goods.userName}}</td> <td>{{goods.tel}}</td> <td>¥{{goods.price.toFixed(2)}}</td> <td>{{goods.city}}</td> <td>{{goods.time}}</td> <td> <span ng-if="goods.goodsState == '发货'"> <a ng-click="changeState($index)" href="#">{{goods.goodsState}}</a> </span> <span ng-if="goods.goodsState == '已发货'">{{goods.goodsState}}</span> <span ng-if="goods.goodsState == '已收货'">{{goods.goodsState}}</span> </td> </tr> </tbody> </table> <!-- 比如 ng-show=“show”指令表示为方法时,内容就加上() 就是 ng-show=“show()”;表示为变量时,就是 ng-show=“show” --> <div ng-show="showTable"> <h4>新增订单表</h4> <table border="1 solid #777777" cellspacing="0" cellpadding="12"> <tr> <td align="right">商品名 </td> <td align="left"> <input ng-model="goodsName" type="text" placeholder="6-20个字符" ng-class="goodsNameClass" /> </td> </tr> <tr> <td align="right">用户名 </td> <td align="left"> <input ng-model="userName" type="text" placeholder="4-16个字符" ng-class="userNameClass" /> </td> </tr> <tr> <td align="right">手机号 </td> <td align="left"> <input ng-model="tel" placeholder="请输入手机号" ng-class="telClass" /> </td> </tr> <tr> <td align="right">城市 </td> <td align="left"> <select ng-model="city"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>重庆</option> <option>天津</option> <option>深圳</option> </select> </td> </tr> <tr> <td colspan="2" align="center"> <ul> <li ng-show="flag1">商品名不能为空!</li> <li ng-show="flag2">商品名必须是6-20个字符!</li> <li ng-show="flag3">用户名不能为空!</li> <li ng-show="flag4">用户名必须是4-16个字符!</li> <li ng-show="flag5">手机号不能为空!</li> <li ng-show="flag6">手机号格式不正确!</li> <li ng-show="flag7">请选择城市!</li> </ul> <button ng-click="sub()" style="background-color: #28a54c;color: white;border: 0 solid #28a54c;">提交</button> </td> </tr> </table> </div> </center> </body> <script type="text/javascript"> $(function() { /* 表格第一行变 天蓝 色 */ $("thead tr").addClass("first"); }); </script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.Products = [{ id: 1, goodsName: "IPhone5S", userName: "果果", tel: 13112332100, price: 4999, city: "北京", time: "08-01 10:00", goodsState: "发货", state: false }, { id: 2, goodsName: "小米6", userName: "米粉", tel: 15222991111, price: 2999, city: "深圳", time: "08-02 10:00", goodsState: "发货", state: false }, { id: 3, goodsName: "华为P9", userName: "华仔", tel: 13678953456, price: 3999, city: "上海", time: "09-03 10:00", goodsState: "已发货", state: false }, { id: 4, goodsName: "OPPO R11", userName: "欧弟", tel: 18631090582, price: 4998, city: "天津", time: "09-04 10:00", goodsState: "已收货", state: false }, { id: 5, goodsName: "VIVO", userName: "朵唯", tel: 15810266912, price: 2998, city: "重庆", time: "10-04 10:00", goodsState: "发货", state: false } ]; //1. 选择城市 $scope.selectCity = "选择城市"; $scope.CityTest = function(city, selectCity) { if(selectCity == "选择城市") { return true; } else { if(city == selectCity) { return true; } else { return false; } } } //2. 选择状态查询:待发货、已发货、已收货 $scope.selectState = "选择状态"; $scope.StateTest = function(state, selectState) { if(selectState == "选择状态") { return true; } else { if(state == selectState) { return true; } else { return false; } } } // 3. 选择“开始月份”:01~12 “结束月份”:01~12,查询开始月份和结束月份之间的订单 $scope.startMonth = "开始月份"; $scope.endMonth = "结束月份"; $scope.filterMonth = function(index) { //获得开始和结束的时间月份 var time = $scope.Products[index].time; var month = parseInt(time.split("-")[0]); if($scope.startMonth == "开始月份" || $scope.endMonth == "结束月份") { return true; } else { var startTime = parseInt($scope.startMonth); var endTime = parseInt($scope.endMonth); //当选择的月份时间在开始和结束的月份之间时,就返回内容 if(month >= startTime && month <= endTime) { return true; } else { return false; } } } // 4. 开始复选框绑定的值默认是全不选 $scope.checkedAll = false; var a = 0; //正着全选 $scope.selectAll = function() { if($scope.checkedAll) { for(var i = 0; i < $scope.Products.length; i++) { $scope.Products[i].state = true; a++; } } else { for(var i = 0; i < $scope.Products.length; i++) { $scope.Products[i].state = false; a--; } } }; //反着全选 $scope.selectOne = function(index) { if($scope.Products[index].state) { a++; } else { a--; } if(a == $scope.Products.length) { //如果小按钮全部选中了,就让大的全选按钮也选中 $scope.checkedAll = true; } else { $scope.checkedAll = false; } }; //批量发货点击事件 $scope.plFahuo = function() { if(a == 0) { alert("请选择要批量发货的商品!"); } else { if(confirm("您是否确定要批量发货选中商品?")) { for(var i = 0; i < $scope.Products.length; i++) { if($scope.Products[i].state) { $scope.Products[i].goodsState = "已发货"; $scope.Products[i].state = false; a--; } } $scope.checkedAll = false; } } }; //批量删除点击事件 $scope.delSelect = function() { if(a == 0) { alert("请选择要批量删除的商品!"); } else { if(confirm("您是否确定要批量删除选中商品?")) { for(var i = 0; i < $scope.Products.length; i++) { if($scope.Products[i].state) { $scope.Products.splice(i, 1); i--; //会出现下标越界,所以i-- a--; } } $scope.checkedAll = false; } } }; /* 5. 使用AngularJS过滤器orderBy对商品进行排序:具体是点击每一列标题名字时,产品进行正序倒序排列。*/ $scope.sortFlag = "-"; //正序标识符 $scope.sortName = "name"; //根据商品名称倒序排序 $scope.sortProducts = function(columnName) { $scope.sortName = columnName; if($scope.sortFlag == "-") { $scope.sortFlag = ""; } else { $scope.sortFlag = "-"; } }; // 6. 点击“发货”按钮,将“待发货”状态改成“已发货” $scope.changeState = function(index) { $scope.Products[index].goodsState = "已发货"; } $scope.showTable = false; // 7、点击“新增订单”,弹出 新增信息表,新增订单状态都是“待发货” $scope.addGoods = function() { $scope.showTable = true; //弹出 新增信息表 //输入框的样式 $scope.goodsNameClass = ""; $scope.userNameClass = ""; $scope.telClass = ""; $scope.goodsName = ""; $scope.userName = ""; $scope.tel = ""; $scope.city = "选择城市"; $scope.state = false; $scope.flag1 = false; //标志位 $scope.flag2 = false; //标志位 $scope.flag3 = false; //标志位 $scope.flag4 = false; //标志位 $scope.flag5 = false; //标志位 $scope.flag6 = false; //标志位 $scope.flag7 = false; //标志位 $scope.sub = function() { //(1)判断商品名是否为空 if($scope.goodsName == null || $scope.goodsName == "") { $scope.flag1 = true; $scope.goodsNameClass = "inputErrorColor"; } else { $scope.flag1 = false; $scope.goodsNameClass = "inputSuccessColor"; //判断商品名是否符合格式 6-20个字符 if($scope.goodsName.length < 6 || $scope.goodsName.length > 20) { $scope.flag2 = true; $scope.goodsNameClass = "inputErrorColor"; } else { $scope.flag2 = false; $scope.goodsNameClass = "inputSuccessColor"; } } //(2)判断用户名是否为空 if($scope.userName == null || $scope.userName == "") { $scope.flag3 = true; $scope.userNameClass = "inputErrorColor"; } else { $scope.flag3 = false; $scope.userNameClass = "inputSuccessColor"; //判断用户名是否符合格式 4-16个字符 if($scope.userName.length < 4 || $scope.userName.length > 16) { $scope.flag4 = true; $scope.userNameClass = "inputErrorColor"; } else { $scope.flag4 = false; $scope.userNameClass = "inputSuccessColor"; } } //(3)判断手机号是否为空 if($scope.tel == null || $scope.tel == "") { $scope.flag5 = true; $scope.telClass = "inputErrorColor"; } else { $scope.flag5 = false; $scope.telClass = "inputSuccessColor"; //判断手机号是否符合格式 if($scope.tel.length == 11) { //判断手机号是否为数字 if(isNaN($scope.tel)) { $scope.flag6 = true; $scope.telClass = "inputErrorColor"; } else { $scope.flag6 = false; $scope.telClass = "inputSuccessColor"; } } else { $scope.flag6 = true; $scope.telClass = "inputErrorColor"; } } //(4)选择城市 if($scope.city == "选择城市") { $scope.flag7 = true; } else { $scope.flag7 = false; } //满足条件后添加商品 if($scope.flag1 != true && $scope.flag2 != true && $scope.flag3 != true && $scope.flag4 != true && $scope.flag5 != true && $scope.flag6 != true && $scope.flag7 != true) { //全显示,格式全不正确,才能进来 //遍历数据源,拿到商品id var goodsID = 0; for(index in $scope.Products) { if($scope.Products[index].id > goodsID) { goodsID = $scope.Products[index].id; } } alert("添加成功!"); //添加发货时间 var date = new Date(); var month = date.getMonth() + 1; var day = date.getDate(); var hours = date.getHours(); var minute = date.getMinutes(); var newTime = month + "-" + day + " " + hours + ":" + minute; var newGood = { id: goodsID + 1, goodsName: $scope.goodsName, userName: $scope.userName, tel: $scope.tel, price: 3668.00, city: $scope.city, time: newTime, goodsState: "发货", state: false }; //添加新数据 $scope.Products.push(newGood); $scope.showTable = false; } else { //提交订单时,检查表单,提示错误内容,并且将文本框颜色变红色 $("ul").addClass("li"); } } } }); </script> </html>
视图
相关文章推荐
- 用css和jQuery实现简单的购物车功能
- div+css+jQuery简单实现投票功能
- jquery+css实现简单的评分功能
- jQuery使用cookie与json简单实现购物车功能
- jQuery使用cookie与json简单实现购物车功能
- div+css+jQuery简单实现投票功能..
- jQuery使用cookie与json简单实现购物车功能
- html+css+jQuery实现多种图片简单切换功能大综合
- html+css+jQuery实现多种图片简单切换功能大综合
- jquery+css实现简单的评分功能
- JavaScript、JQuery简单实现购物车功能
- PHP+MYSQL+SESSION+ThinkPHP实现简单购物车功能
- jQuery与vue分别实现超级简单的绿色拖动验证码功能
- JAVAEE中用Session简单实现购物车功能示例代码
- jquery实现的简单轮播图功能【适合新手】
- 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
- recycleView嵌套recycleView+checkbox实现简单购物车功能
- 利用jQuery 实现一个简单的侧边菜单隐藏显示功能
- 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
- 利用python实现简单的循环购物车功能示例代码