AngularJs表格 增加、删除、关键字查询、按数量排序
2018-01-12 19:12
513 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
//导入类库
<script src="../libs/jquery-1.11.0.min.js"></script>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.min.js"></script>
<style type="text/css">
.div1 {
width: 700px;
height: 50px;
}
.div2 {
float: right;
border: 1px solid blue;
width: 100px;
background: greenyellow;
text-align: center;
margin-top: 15px;
}
.table {
width: 700px;
height: 50px;
}
.div2 a {
text-decoration: none;
}
select {
margin-top: 15px;
margin-left: 200px
}
//偶数行变色
tr:nth-of-type(odd) {
background: #CCCCCC;
}
tr:nth-of-type(odd):hover {
background-color: hotpink;
}
//奇数行变色
tr:nth-of-type(even) {
background-color: lightpink;
}
tr:nth-of-type(even):hover {
background-color: lightblue ;
}
fieldset {
width: 700px;
}
</style>
<body ng-app="App" ng-controller="DemoCtrl">
<h1>商品库存管理系统</h1>
<div class="div1">
<input type="text" placeholder="请输入关键词" ng-model="chaxu" style="margin-top: 15px;" />
<input type="button" value="查询" ng-click="cx()" style="margin-top: 15px;" />
<select ng-change="x1()" ng-model="count1" ng-init="count1=counts[1]">
<option ng-repeat="count in counts">{{count}}</option>
</select>
<div class="div2">
<a href="#" ng-click="rk()">入库</a>
</div>
</div><br />
<table border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物的生产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.gname}}</td>
<td>{{good.gcount}}</td>
<td>{{good.gsite}}</td>
<td>{{good.gprice | currency:"￥"}}</td>
<td>{{good.gdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td><input type="button" value="删除" ng-click="dele($index)" /></td>
</tr>
</table>
<fieldset style="margin-top: 20px;" ng-show="sos">
<legend>新增物品</legend>
货物名称<input type="text" ng-model="name1" />
<span id="sp1"></span><br /> 货物数量
<input type="text" ng-model="counts1" />
<span id="sp2"></span><br /> 货物产地
<input type="text" ng-model="site1" />
<span id="sp3"></span><br /> 货物单价
<input type="text" ng-model="price1" />
<span id="sp4"></span><br />
<input type="button" value="保存" ng-click="bz()" />
</fieldset>
<script type="text/javascript">
var mo = angular.module("App", []);
mo.controller("DemoCtrl", function($scope) {
var aa = new Date();
$scope.counts = ["按数量正序", "按数量倒叙"];
var good_1 = [{
"gname": "云南白药",
"gcount": "100",
"gsite": "云南",
"gprice": "19.9",
"gdate": aa
}, {
"gname": "999感冒颗粒",
"gcount": "30",
"gsite": "北京",
"gprice": "12.9",
"gdate": aa
}, {
"gname": "感康",
"gcount": "20",
"gsite": "河北",
"gprice": "16.9",
"gdate": aa
}]
$scope.goods = good_1;
// 5.实现排序功能。可以按照库存数量正（倒）排序。
$scope.x1 = function() {
var s1 = $scope.count1;
alert(s1);
if(s1 == "按数量正序") {
$scope.goods.sort(function(a, b) {
return a.gcount - b.gcount;
})
} else {
$scope.goods.sort(function(a, b) {
return b.gcount - a.gcount;
})
}
}
//实现删除的功能
$scope.dele = function($index) {
var flas = confirm("是否删除");
if(flas = true) {
$scope.goods.splice($index, 1);
// ）splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
}
}
//关键字查询的功能
$scope.cx = function() {
$scope.goods = [{
"gname": "云南白药",
"gcount": "100",
"gsite": "云南",
"gprice": "19.9",
"gdate": aa
}, {
"gname": "999感冒颗粒",
"gcount": "30",
"gsite": "北京",
"gprice": "12.9",
"gdate": aa
}, {
"gname": "感康",
"gcount": "20",
"gsite": "河北",
"gprice": "16.9",
"gdate": aa
}]
var zz = [];
var cc = $scope.chaxu;
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname.indexOf(cc) != -1 || $scope.goods[i].gsite.indexOf(cc) != -1) {
zz.push($scope.goods[i]);
}
}
$scope.goods = zz;
}
//实现入库的功能
$scope.rk = function() {
$scope.sos = true;
}
//把数据保存
adc7
//把数据保存
$scope.bz = function() {
var name = $scope.name1;
var count = $scope.counts1;
var site = $scope.site1;
var price = $scope.price1;
//判断名称栏非空
var flas_name = true
if(name == null || name == "") {
$("#sp1").html("名称不能为空")
flas_name = false;
return
} else {
$("#sp1").html("");
flas_name = true
}
//判断数量栏非空
var flas_count = true
if(count == null || count == "") {
$("#sp2").html("不能为空")
flas_count = false;
return
} else {
$("#sp2").html("")
flas_count = true
}
//判断产地栏非空
var flas_site = true
if(site == null || site == "") {
$("#sp3").html("不能为空")
flas_site = false
return
} else {
$("#sp3").html("")
flas_site = true
}
//判断单价栏非空
var flas_price = true
if(price == null || price == "") {
$("#sp4").html("不能为空")
flas_price = false;
return
} else {
$("#sp4").html("")
flas_price = true
}
//添加到表格中相对应 该值的位置
var qiu2 = {
"gname": $scope.name1,
"gcount": $scope.counts1,
"gsite": $scope.site1,
"gprice": $scope.price1,
"gdate": aa
}
//添加到默认的数组中
good_1.push(qiu2);
$scope.goods = good_1;
//添加完毕后隐藏添加界面
$scope.sos = false;
//把输入框恢复成空白
$scope.name1 = ""
$scope.counts1 = ""
$scope.site1 = ""
$scope.price1 = ""
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
//导入类库
<script src="../libs/jquery-1.11.0.min.js"></script>
<script src="../libs/angular.min.js"></script>
<script src="../libs/angular-route.min.js"></script>
<style type="text/css">
.div1 {
width: 700px;
height: 50px;
}
.div2 {
float: right;
border: 1px solid blue;
width: 100px;
background: greenyellow;
text-align: center;
margin-top: 15px;
}
.table {
width: 700px;
height: 50px;
}
.div2 a {
text-decoration: none;
}
select {
margin-top: 15px;
margin-left: 200px
}
//偶数行变色
tr:nth-of-type(odd) {
background: #CCCCCC;
}
tr:nth-of-type(odd):hover {
background-color: hotpink;
}
//奇数行变色
tr:nth-of-type(even) {
background-color: lightpink;
}
tr:nth-of-type(even):hover {
background-color: lightblue ;
}
fieldset {
width: 700px;
}
</style>
<body ng-app="App" ng-controller="DemoCtrl">
<h1>商品库存管理系统</h1>
<div class="div1">
<input type="text" placeholder="请输入关键词" ng-model="chaxu" style="margin-top: 15px;" />
<input type="button" value="查询" ng-click="cx()" style="margin-top: 15px;" />
<select ng-change="x1()" ng-model="count1" ng-init="count1=counts[1]">
<option ng-repeat="count in counts">{{count}}</option>
</select>
<div class="div2">
<a href="#" ng-click="rk()">入库</a>
</div>
</div><br />
<table border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>货物名称</td>
<td>货物数量</td>
<td>货物产地</td>
<td>货物单价</td>
<td>货物的生产日期</td>
<td>操作</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.gname}}</td>
<td>{{good.gcount}}</td>
<td>{{good.gsite}}</td>
<td>{{good.gprice | currency:"￥"}}</td>
<td>{{good.gdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td><input type="button" value="删除" ng-click="dele($index)" /></td>
</tr>
</table>
<fieldset style="margin-top: 20px;" ng-show="sos">
<legend>新增物品</legend>
货物名称<input type="text" ng-model="name1" />
<span id="sp1"></span><br /> 货物数量
<input type="text" ng-model="counts1" />
<span id="sp2"></span><br /> 货物产地
<input type="text" ng-model="site1" />
<span id="sp3"></span><br /> 货物单价
<input type="text" ng-model="price1" />
<span id="sp4"></span><br />
<input type="button" value="保存" ng-click="bz()" />
</fieldset>
<script type="text/javascript">
var mo = angular.module("App", []);
mo.controller("DemoCtrl", function($scope) {
var aa = new Date();
$scope.counts = ["按数量正序", "按数量倒叙"];
var good_1 = [{
"gname": "云南白药",
"gcount": "100",
"gsite": "云南",
"gprice": "19.9",
"gdate": aa
}, {
"gname": "999感冒颗粒",
"gcount": "30",
"gsite": "北京",
"gprice": "12.9",
"gdate": aa
}, {
"gname": "感康",
"gcount": "20",
"gsite": "河北",
"gprice": "16.9",
"gdate": aa
}]
$scope.goods = good_1;
// 5.实现排序功能。可以按照库存数量正（倒）排序。
$scope.x1 = function() {
var s1 = $scope.count1;
alert(s1);
if(s1 == "按数量正序") {
$scope.goods.sort(function(a, b) {
return a.gcount - b.gcount;
})
} else {
$scope.goods.sort(function(a, b) {
return b.gcount - a.gcount;
})
}
}
//实现删除的功能
$scope.dele = function($index) {
var flas = confirm("是否删除");
if(flas = true) {
$scope.goods.splice($index, 1);
// ）splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
}
}
//关键字查询的功能
$scope.cx = function() {
$scope.goods = [{
"gname": "云南白药",
"gcount": "100",
"gsite": "云南",
"gprice": "19.9",
"gdate": aa
}, {
"gname": "999感冒颗粒",
"gcount": "30",
"gsite": "北京",
"gprice": "12.9",
"gdate": aa
}, {
"gname": "感康",
"gcount": "20",
"gsite": "河北",
"gprice": "16.9",
"gdate": aa
}]
var zz = [];
var cc = $scope.chaxu;
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname.indexOf(cc) != -1 || $scope.goods[i].gsite.indexOf(cc) != -1) {
zz.push($scope.goods[i]);
}
}
$scope.goods = zz;
}
//实现入库的功能
$scope.rk = function() {
$scope.sos = true;
}
//把数据保存
adc7
//把数据保存
$scope.bz = function() {
var name = $scope.name1;
var count = $scope.counts1;
var site = $scope.site1;
var price = $scope.price1;
//判断名称栏非空
var flas_name = true
if(name == null || name == "") {
$("#sp1").html("名称不能为空")
flas_name = false;
return
} else {
$("#sp1").html("");
flas_name = true
}
//判断数量栏非空
var flas_count = true
if(count == null || count == "") {
$("#sp2").html("不能为空")
flas_count = false;
return
} else {
$("#sp2").html("")
flas_count = true
}
//判断产地栏非空
var flas_site = true
if(site == null || site == "") {
$("#sp3").html("不能为空")
flas_site = false
return
} else {
$("#sp3").html("")
flas_site = true
}
//判断单价栏非空
var flas_price = true
if(price == null || price == "") {
$("#sp4").html("不能为空")
flas_price = false;
return
} else {
$("#sp4").html("")
flas_price = true
}
//添加到表格中相对应 该值的位置
var qiu2 = {
"gname": $scope.name1,
"gcount": $scope.counts1,
"gsite": $scope.site1,
"gprice": $scope.price1,
"gdate": aa
}
//添加到默认的数组中
good_1.push(qiu2);
$scope.goods = good_1;
//添加完毕后隐藏添加界面
$scope.sos = false;
//把输入框恢复成空白
$scope.name1 = ""
$scope.counts1 = ""
$scope.site1 = ""
$scope.price1 = ""
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS在页面对表格进行增加、查询、排序
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选
- jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选
- AngularJS实现购物车功能,表格的删除,查询,排序功能
- angularJS 增加 删除 修改 查询 排序
- AngularJS 表格案例（排序，批删，查询，全选）
- AngularJS实现购物车模糊查询,价格区间查找,根据名字删除,点击排序
- 使用angularjs实现查询、增加验证、修改、删除、以及批量删除等
- AngularJs球员的增加查询排序的方法
- jQuery增加和删除表格项目及实现表格项目排序的方法
- angularJs 删除 查询 排序
- HTML,angularJS表格内容排序,点击删除,删除当前,输入内容显示包含内容的数据
- php 数组操作(增加，删除，查询，排序)等函数说明第1/2页
- 封装链表库实现单链表：增加，删除，查询，修改，排序，逆转
- angularJs 表格添加删除修改查询方法
- php 数组操作(增加，删除，查询，排序)等函数说明第1/2页
- AngularJS 查询、添加、删除、全选、反选、点击排序
- angularJs 表格添加删除修改查询
- angularJs 增加 删除 排序
- AngularJS 查询 删除 增加 修改