商品订单信息管理例子(Angularjs)
2017-12-14 14:13
246 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style>
* {
font-size: 12px;
}
#div1 {
width: 650px;
border: 1px solid #22505F;
}
button {
color: #22505F;
border-radius: 4px;
border: 1px solid #22505F;
background-color: #5CD6FF;
}
input {
border-radius: 10px;
border: 1px solid #22505F;
}
table {
border-right: 1px solid #22505F;
border-top: 1px solid #22505F;
}
td {
border-left: 1px solid #22505F;
}
td:nth-child(1) {
width: 25px;
}
td:nth-child(2) {
width: 55px;
}
td:nth-child(3) {
width: 80px;
}
td:nth-child(4) {
width: 70px;
}
td:nth-child(5) {
width: 100px;
}
td:nth-child(6) {
width: 83px;
}
td:nth-child(7) {
width: 60px;
}
td:nth-child(8) {
width: 122px;
}
td:nth-child(9) {
width: 50px;
}
tr:nth-child(even) {
background-color: #EEEEEE;
}
.true {
display: inline-block;
border-radius: 5px;
background-color: greenyellow;
}
.false {
display: inline-block;
border-radius: 5px;
4000
background-color: yellow;
}
</style>
</head>
<body ng-app="Mapp" ng-controller="Mctrl">
<div id="div1">
<button>新增订单</button>
<button ng-click="alldel()">批量删除</button>
<input style="margin-left: 44px;" type="text" id="" value="" placeholder="按商品名称查询..." ng-model="ng_goods" ng-keydown="selgoods($event)" />
<input type="text" id="" value="" placeholder="按手机号查询..." ng-model="ng_tel" ng-keydown="seltel($event)" />
<select ng-change="changestutas()" ng-model="change" ng-init="change=ss[0]">
<option ng-repeat="s in ss">{{s}}</option>
</select>
<table cellspacing="0" cellpadding="0">
<tr style="background-color: #999999;">
<td><input type="checkbox" name="" id="" value="" ng-click="all()" ng-model="all2" /></td>
<td>id<button ng-click="order_id()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="order_price()">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="order_time()">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="i in items">
<td><input type="checkbox" name="" id="" value="" class="checked1" ng-click="aclick($index)" /></td>
<td>{{i.id}}</td>
<td>{{i.goods}}</td>
<td>{{i.name}}</td>
<td>{{i.tel}}</td>
<td>{{i.price|currency:'￥:'}}</td>
<td>{{i.city}}</td>
<td>{{i.downtime|date:"MM-dd HH:mm:ss"}}</td>
<td><span ng-click="fahuo($index)" class="{{i.status1}}">{{i.status1|mFilter}}</span></td>
</tr>
</table>
<fieldset style="width: 222px;">
<legend>添加订单信息</legend>
商品名 <input type="text" id="fiel_good" value="" ng-model="fiel_good" style="width: 180px;" /><br /> 用户名 <input type="text" id="fiel_name" value="" ng-model="fiel_name" style="width: 180px;" /><br /> 手机号 <input type="text" id="fiel_tel" value="" ng-model="fiel_tel" style="width: 180px;" /><br /> 价格为 <input type="text" id="fiel_price" value="" ng-model="fiel_price" style="width: 180px;" /><br /> 城市为
<select ng-model="fiel_city" ng-init="fiel_city='北京'" style="width: 182px; border-radius: 10px;border: 1px solid #22505F;">
<option>北京</option>
<option>郑州</option>
<option>上海</option>
</select>
<input type="button" value="保存" ng-click="savedata()" style=" border-radius: 5px;border: 1px solid #22505F;padding: 5px 18px;background-color: white;margin-left: 77px;" />
</fieldset>
</div>
<!--
$scope.items显示内容数组
items存放内容数组(增删改查都是对此数组)
arrtemp临时数组用于查到的内容存放
内容介绍:
1在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息;
2在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息;
3以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货。
如：用户点击下拉菜单选择”已发货”则查询出已发货的所有订单
4用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色
5批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单
6订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列
-->
<script>
angular.module("Mapp", [])
.controller("Mctrl", function($scope) {
$scope.ss = ["--按状态查询--", "已发货", "未发货"]
var items = [{
id: 2001,
goods: 'iPhoneX',
name: '张三',
tel: '13525565588',
price: 8699,
city: '北京',
downtime: new Date(1501911189494).getTime(),
isChecked: false,
status1: false
},
{
id: 3006,
goods: 'iPhone6',
name: '王红',
tel: '18945565588',
price: 5635,
city: '郑州',
downtime: new Date(1501981189494).getTime(),
isChecked: false,
status1: false
},
{
id: 5312,
goods: 'iPhone7',
name: '赵小龙',
tel: '13547871211',
price: 6180,
city: '北京',
downtime: new Date(1501001189494).getTime(),
isChecked: false,
status1: false
},
{
id: 2132,
goods: 'iPhone8',
name: '孙强',
tel: '14956156545',
price: 7190,
city: '上海',
downtime: new Date(1501111189494).getTime(),
isChecked: false,
status1: false
},
];
$scope.items = items;
//点击发货状态
$scope.fahuo = function($index) {
items[$index].status1 = !items[$index].status1;
// alert(items[$index].status1)
}
//下拉筛选
$scope.changestutas = function() {
var arrtemp = [];
if($scope.change == '未发货') {
for(var i = 0; i < items.length; i++) {
if(!items[i].status1) {
arrtemp.push(items[i])
}
}
} else if($scope.change == '已发货') {
for(var i = 0; i < items.length; i++) {
if(items[i].status1) {
arrtemp.push(items[i])
}
}
} else {
arrtemp = items;
}
$scope.items = arrtemp;
}
//查询商品
$scope.selgoods = function($event) {
var arrtemp = [];
var keycode = $event.keyCode;
if(keycode == 13) {
for(var i = 0; i < items.length; i++) {
if(items[i].goods.indexOf($scope.ng_goods) != -1) {
arrtemp.push(items[i])
}
}
$scope.items = arrtemp;
}
}
//查询手机号
$scope.seltel = function($event) {
var arrtemp = [];
var keycode = $event.keyCode;
if(keycode == 13) {
for(var i = 0; i < items.length; i++) {
if(items[i].tel.indexOf($scope.ng_tel) != -1) {
arrtemp.push(items[i])
}
}
$scope.items = arrtemp;
}
}
//全选checkbox
$scope.all = function() {
for(var i = 0; i < items.length; i++) {
items[i].isChecked = !items[i].isChecked;
$(".checked1")[i].checked = $scope.all2;
// alert($(".checked1")[i].checked)
}
}
//批量删除
$scope.alldel = function() {
for(var i = items.length - 1; i >= 0; i--) {
var g = items[i];
var s = g.status1;
var c = g.isChecked;
console.log(s + "---" + c)
if(s && c) {
items.splice(i, 1);
}
}
$scope.items = items;
}
//点击checkbox修改
$scope.aclick = function($index) {
items[$index].isChecked = !items[$index].isChecked;
}
/*排序显示的数组*/
//id排序
var idflag = true;
$scope.order_id = function() {
if(idflag) {
$scope.items.sort(function(a, b) {
return a.id - b.id;
})
} else {
$scope.items.sort(function(a, b) {
return b.id - a.id;
})
}
idflag = !idflag;
}
//price排序
var priceflag = true;
$scope.order_price = function() {
if(priceflag) {
$scope.items.sort(function(a, b) {
return a.price - b.price;
})
} else {
$scope.items.sort(function(a, b) {
return b.price - a.price;
})
}
priceflag = !priceflag;
}
//time排序
var timeflag = true;
$scope.order_time = function() {
if(timeflag) {
$scope.items.sort(function(a, b) {
return a.downtime - b.downtime;
})
} else {
$scope.items.sort(function(a, b) {
return b.downtime - a.downtime;
})
}
timeflag = !timeflag;
}
//新增保存数据
$scope.savedata = function() {
var fiel_good = $scope.fiel_good;
var fiel_name = $scope.fiel_name;
var fiel_tel = $scope.fiel_tel;
var fiel_price = $scope.fiel_price;
var fiel_city = $scope.fiel_city;
if(fiel_good == null || fiel_good == "") {
$("#fiel_good").css("border", "1px solid red")
} else {
$("#fiel_good").css("border", "1px solid")
}
if(fiel_name == null || fiel_name == "") {
$("#fiel_name").css("border", "1px solid red")
} else {
$("#fiel_name").css("border", "1px solid")
}
if(fiel_tel == null || fiel_tel == "") {
$("#fiel_tel").css("border", "1px solid red")
} else {
$("#fiel_tel").css("border", "1px solid")
}
if(fiel_price == null || fiel_price == "") {
$("#fiel_price").css("border", "1px solid red")
} else {
$("#fiel_price").css("border", "1px solid")
}
if(fiel_good != null && fiel_good != "" && fiel_name != null && fiel_name != "" && fiel_tel != null && fiel_tel != "" && fiel_price != null && fiel_price != "" && fiel_city != null && fiel_city != "") {
items.push({
id: parseInt(Math.random() * (9999 - 1000 + 1) + 1000),
goods: fiel_good,
name: fiel_name,
tel: fiel_tel,
price: fiel_price,
city: fiel_city,
downtime: new Date().getTime(),
isChecked: false,
status1: false
})
}
/*else {
alert("订单信息所有项必填")
}*/
$scope.items = items;
}
})
.filter("mFilter", function() {
return function(input) {
if(input) {
return '已发货'
} else {
return '未发货'
}
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJs 商品订单信息管理
- AngularJs 商品订单信息管理
- 商品订单信息管理
- 从订单信息页面进入订单详细商品页面，最简单的MVC思想
- 黑马程序员---10、超市商品管理之商品信息管理模块
- 实现商品库存信息管理页面
- 三期_day09_信息+订单管理_II
- PHP基础示例：商品信息管理系统v1.1[转]
- 商品信息管理布局样式
- ASP.NET Zero--11.一个例子（4）商品分类管理-数据检验
- Nancy简单实战之NancyMusicStore(三)：完善商品信息与管理
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- AngularJS商品订单
- 商品管理信息 数据库设计
- 链表文件结构体操作例子（员工信息管理系统）
- [参考]redis存储商品信息，自增订单或商品id，缓存评论！
- 实现商品库存信息管理页面（AngularJS过滤器，orderBy排序，批量删除数据）
- 删除商品时，如何不影响订单里该商品相关的信息显示
- Angularjs学生信息管理
- Super超级ERP系统---(3)基础信息管理--商品管理