实现商品库存信息管理页面

技术要求（html+css+angularjs）

1. 完成页面布局（button按钮可以用普通按钮）

2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条

3. 用ng-repaet指令将对象遍历并渲染到页面中

4.ØFilter实现模糊查询的功能。用户在输入框中键入信息的时候商品列表会动态显示符合要求的查询信息

5.商品价格这一列需要在价格前面加上”￥：”。

6.点击删除按钮时弹出提示框询问用户确定删除，用户点击确定删除后该条数据在页面被删除

7.点击第一个checkbox,所有的复选框被选中，点击批量删除按钮提示用户是否确定删除，用户确定删除后删除页面所有商品信息，且商品信息管理页面为空白页面

<!DOCTYPE html>
<html lang="en" ng-app="cart">
<head>
<meta charset="UTF-8">
<title>购物车</title>

</head>
<style>
.table-hover tr:nth-child(odd) {
background-color: #ffffff;
}
.table-hover tr:nth-child(even) {
background-color: #f1f1f1;
}
</style>
<body ng-controller="cartCtr">
<h1>商品库存信息管理</h1>
<div style="width:100%;height:40px;background-color: darkgrey; margin-bottom: 30px;">
<input type="text" value="输入关键字..." style="margin: 10px" ng-model="search.id"><button style="background-color: red;float: right;margin: 10px" ng-click="alldelete()">批量删除</button>
</div>
<table class="table table-hover" ng-show="items.length" border="1" width="100%" style="border-collapse: collapse;">
<tr>
<th><input type="checkbox" id="all" name="selected"
ng-checked="isSelected(item.id)"
ng-click="updateSelection($event,item.id)"></th>
<th ng-click="bianhao()" id="bianhao">商品编号</th>
<th ng-click="mingcheng()">商品名称</th>
<th ng-click="jiage()">商品价格</th>
<th ng-click="kucun()">商品库存</th>
<th>数据操作</th>
</tr >
<tr ng-repeat=" item in items| filter:search | orderBy : order+orderType" align="left">
<td align="center" valign="middle"><input type="checkbox" name="check"></td>
<td align="center" valign="middle">{{item.id}}</td>
<td align="center" valign="middle">{{item.title}}</td>
<td class="bold" align="center" valign="middle">￥:{{item.price|number:2}}</td>
<td align="center" valign="middle">{{item.quantity}}</td>

<td align="center" valign="middle">
<button type="button" class="btn btn-default btn-xs" ng-click="delete(item.id)" style="background-color: darkorange">删除</button>
</td>
</tr>
</table>
<div class="empty" ng-show="!items.length">购物车空空，快去寻找宝贝</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></script><script src="app.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("table :checkbox:first").change(function(){
$(this).closest("table")
.find(":checkbox:not(:first)")
.prop("checked", this.checked);
});
</script>
</body>
</html>

js部分

/**
* Created by 努力努力再努力 on 2017/9/18.
*/
var cartModule = angular.module('cart', []);
cartModule.controller('cartCtr', ['$scope', function ($scope) {
$scope.discount = 0.9;
$scope.items = [{id: 1234,title: "ipad", price: 3400.00,quantity: 10,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywJs&id=532166746631"},
{id: 1244,title: "aphone", price: 6400.00,quantity: 100,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywJs&id=45771116847"},
{id: 1334,title: "mypad",price: 4400.00, quantity: 20,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"},
{id: 8234, title: "zpad",price: 8400.00, quantity: 130,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywJs&id=41541519814"} ];
$scope.add = function (id) {
angular.forEach($scope.items, function (item, index, array) {
if (item.id === id) {item.quantity++;} })
};
$scope.reduce = function (id) {
angular.forEach($scope.items, function (item, index, array) {
if (item.id === id) {item.quantity--; } })
};
//输入框添加keydown事件，避免输入非正整数
$scope.quantityKeydown = function (event) {
event = event || window.event;
var target=event.target||event.srcElement;
var keycode = event.keyCode;
if ((37 <= keycode && keycode <= 40)||(48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 105) || keycode == 8) {
//方向键↑→ ↓←、数字键、backspace
}
else {
console.log(keycode);
event.preventDefault();
return false;
}
};
//keyup事件，当输入数字为0时，重新刷新文本框内容
$scope.quantityKeyup = function (event) {
event = event || window.event;
var target=event.target||event.srcElement;
var keycode = event.keyCode;
if (48 === keycode || 96 === keycode ) {
target.value=parseInt(target.value);
}};
//删除商品
$scope.delete = function (id) {
$scope.items.forEach(function (item, index) {
if (item.id == id) {
if (confirm("确定要从购物车中删除此商品？")) {
$scope.items.splice(index, 1);
return;
}
}
})
};

}]);

实现商品库存信息管理页面相关推荐

前端开发-后台信息管理页面的开发流程
前端开发-后台信息管理页面的开发流程 1.项目开发流程 1.1.添加路由 1.2.设置页面跳转路径 1.3.在api文件夹中创建js文件,定义接口路径 1.4.在页面中引入js文件,使用axios进行 ...
学生信息管理页面HTML+CSS+JavaScript基础开发
简单的学生信息表页面需求分析: HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8& ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
java员工信息管理_基于jsp的员工信息管理-JavaEE实现员工信息管理 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的员工信息管理, 该项目可用各类java课程设计大作业中, 员工信息管理的系统架构分为前后台两部分, 最终实现在线上 ...
基于java家教管理系统_基于jsp的家教信息管理-JavaEE实现家教信息管理 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的家教信息管理, 该项目可用各类java课程设计大作业中, 家教信息管理的系统架构分为前后台两部分, 最终实现在线上 ...
java小区管理的项目描述,基于jsp的小区信息管理-JavaEE实现小区信息管理 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的小区信息管理, 该项目可用各类java课程设计大作业中, 小区信息管理的系统架构分为前后台两部分, 最终实现在线上 ...
【java毕业设计】基于javaEE+原生Servlet+MySql的企业员工信息管理系统设计与实现（毕业论文+程序源码）——企业员工信息管理系统
基于javaEE+原生Servlet+MySql的企业员工信息管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+原生Servlet+MySql的企业员工信息管理系统设计 ...
C#毕业设计——基于C#+asp.net+sqlserver的学生信息管理系统设计与实现（毕业论文+程序源码）——学生信息管理系统
基于C#+asp.net+sqlserver的学生信息管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于C#+asp.net+sqlserver的学生信息管理系统设计与实现,文章末尾 ...
基于C#winform的学生信息管理与成绩评价系统
一.系统页面截图系统登陆界面主界面介绍:系统用户可根据自己的教学角色选择登录相应的客户端(学生.教师.管理员),登录成功之后分别进入学生界面.教师界面和管理员界面. 2.管理员端界面 [主要功能及 ...
酒店管理之酒店信息相关页面
酒店预览界面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> & ...

实现商品库存信息管理页面

实现商品库存信息管理页面相关推荐

最新文章

热门文章