一个不包含后台的,仅仅是静态网页上的表格的增删改查的一些方法,上代码:
这里,本人使用的是第三方的导入的jar包,不是直接从网络上获取的
效果如下图
下面就是代码了
<!DOCTYPE html> <html ng-app="MyApp"> <head> <meta charset="utf-8" /> <title></title> <style> .bb{ width: 100px; height: 50px; color: #800080; margin-left: 10px; background-color: yellowgreen; border-radius: 15%; } .bb:hover{ transform: scale(1.1); } #rkbut{ font-size: 15px; font-family: "微软雅黑"; border: 0px; margin-left: 280px; } #plbut{ font-size: 15px; font-family: "微软雅黑"; border: 0px; } #qkbut{ font-size: 15px; font-family: "微软雅黑"; border: 0px; } /*实现隔行换色的效果 odd为奇数 even为偶数*/ .tab tr:nth-child(odd){ background-color: #D2B48C; } .tab tr:nth-child(even){ background-color: #F5DEB3; } .tab tr:hover{ background-color: #9ACD32; } .j{ border: 0px; background-color: white; height: 20px; border-radius: 20%; } .j:active{ transform: scale(1.1); background-color: fuchsia; } .but{ border: 0px; background-color: #8A2BE2; width: 45px; height: 30px; color: white; border-radius: 10%; } .but:hover{ transform: scale(1.1); } </style> <script type="text/javascript" src="libs/angular.min.js" ></script> <script type="text/javascript" src="libs/angular-route.min.js" ></script> <script> var app = angular.module("MyApp",[]); app.controller("Mycon",function($scope){ //获取系统当前时间 var aa = new Date(); //初始化数据,json格式数据(自定义数据) $scope.goods = [ { "names":"云南白药", "numbers":100, "louders":"云南", "prices":19.9, "datas":aa, "ss":false }, { "names":"999感冒灵", "numbers":30, "louders":"北京", "prices":12.5, "datas":aa, "ss":false }, { "names":"感康", "numbers":20, "louders":"河北", "prices":16.9, "datas":aa, "ss":false }, { "names":"板蓝根", "numbers":120, "louders":"河北", "prices":16.9, "datas":aa, "ss":false } ]; //入库的按钮点击事件 $scope.rk = function(){ //sos等于true的目的是,点击入库按钮,使下方的新增数据展示出来,它默认是不展示的 $scope.sos = true; } //把初始化的数据赋值给goodis,是为了下面点击保存时,只需保存一个对象 $scope.goodis = $scope.goods; //点击保存的点击事件 $scope.bc = function(){ var flag = false; //判断货物名称不能为空 if($scope.n==""||$scope.n==null){ flag = false; alert("货物名称不能为空哦!☺"); return; }else{ flag = true; } //判断获无数量不能为空和货物数量必须是数字 if($scope.num==""||$scope.num==null){ flag = false; alert("货物数量不能为空哦!☺"); return; }else if(isNaN($scope.num)){//isNaN(x)的意思是 :x必须是字符串,不能是数字,是数字返回false flag = false; alert("货物数量必须是数字哦!☺"); return; }else{ flag = true; } //判断货物产地不能为空 if($scope.loud==""||$scope.loud==null){ flag = false; alert("货物产地不能为空哦!☺"); }else{ flag = true; } //判断货物价钱不能为空 if($scope.p==""||$scope.p==null){ flag = false; alert("货物价钱不能为空哦!☺"); return; }else if(isNaN($scope.p)){//isNaN(x)的意思是 :x必须是字符串,不能是数字,是数字返回false flag = false; alert("货物价钱必须是数字哦!☺"); return; }else{ flag = true; } //点击把新增的数据通过push()方法增加到table表格中 if(flag&&confirm("确定增加吗?")){ //把从输入框中获取到的值重新给数据赋值 $scope.goodis ={ "id":$scope.id1, "names":$scope.n, "numbers":$scope.num, "louders":$scope.loud, "prices":$scope.p, "datas":aa }; $scope.goods.push($scope.goodis); //sos等于false的目的是点击保存按钮,使下方的新增数据再隐藏起来 $scope.sos = false; } //增加过后,清空表格中的数据 $scope.id1 = ""; $scope.n = ""; $scope.num = ""; $scope.loud = ""; $scope.p = ""; } //点击删除的点击事件 $scope.remove = function(index){ if(confirm("您确定要删除吗?")){ $scope.goods.splice(index,1); if($scope.goods.length==0){ alert("惨了,咱家没货了!┭┮﹏┭┮"); } }else{ alert("您取消了删除哟!(^U^)ノ~YO"); } } //点击查询的点击事件 $scope.cx = function(){ $scope.zz = []; var txt = $scope.txt; if(txt==""||txt==null){ alert("您输入的为空哦!"); $scope.goods = [ { "names":"云南白药", "numbers":100, "louders":"云南", "prices":19.9, "datas":aa }, { "names":"999感冒灵", "numbers":30, "louders":"北京", "prices":12.5, "datas":aa }, { "names":"感康", "numbers":20, "louders":"河北", "prices":16.9, "datas":aa }, { "names":"板蓝根", "numbers":120, "louders":"河北", "prices":16.9, "datas":aa } ]; }else{ for(var i = 0 ; i < $scope.goods.length;i++){ names = $scope.goods[i].names; if(names.indexOf(txt)!=-1){ $scope.zz.push($scope.goods[i]); $scope.goods = $scope.zz; }else{ if(i==1){ alert("您输入的物品好像不存在哎!"); } } } } } $scope.op = "按数量倒序"; //这是下拉框的改变事件,原理是冒泡排序 $scope.cc = function(){ if($scope.op=="按数量正序"){ $scope.goods.sort(function(a,b){ return a.numbers - b.numbers; }); }else{ $scope.goods.sort(function(a,b){ return b.numbers - a.numbers; }); } } var index1 = 0; //点击展示修改页面 $scope.updateShow = false; $scope.updateId = ""; $scope.updateName = ""; $scope.updateNum = ""; $scope.updateloc = ""; $scope.updatePrice = ""; $scope.updateShowFun = function(index) { index1 = index; if(window.confirm("你确定要修改吗? 请在考虑一下!")) { $scope.updateShow = true; $scope.updateID = $scope.goods[index].id; $scope.updateName = $scope.goods[index].names; $scope.updateNum = $scope.goods[index].numbers; $scope.updateloc = $scope.goods[index].louders; $scope.updatePrice = $scope.goods[index].prices; } else { alert("你已经取消了修改哟!(^U^)ノ~YO"); } } //点击修改按钮 $scope.updateSub = function() { var flag = false; if($scope.updateName==""||$scope.updateName==null){ flag = false; alert("货物名称不能为空哦!☺"); return; }else{ flag = true; } //判断获无数量不能为空和货物数量必须是数字 if($scope.updateNum==""||$scope.updateNum==null){ flag = false; alert("货物数量不能为空哦!☺"); return; }else if(isNaN($scope.updateNum)){//isNaN(x)的意思是 :x必须是字符串,不能是数字,是数字返回false flag = false; alert("货物数量必须是数字哦!☺"); return; }else{ flag = true; } //判断货物产地不能为空 if($scope.updateloc==""||$scope.updateloc==null){ flag = false; alert("货物产地不能为空哦!☺"); }else{ flag = true; } //判断货物价钱不能为空 if($scope.updatePrice==""||$scope.updatePrice==null){ flag = false; alert("货物价钱不能为空哦!☺"); return; }else if(isNaN($scope.updatePrice)){//isNaN(x)的意思是 :x必须是字符串,不能是数字,是数字返回false flag = false; alert("货物价钱必须是数字哦!☺"); return; }else{ flag = true; } if(flag&&confirm("确认修改吗?")){ $scope.goods[index1].names = $scope.updateName, $scope.goods[index1].numbers = $scope.updateNum, $scope.goods[index1].louders = $scope.updateloc, $scope.goods[index1].prices = $scope.updatePrice, $scope.goods[index1].datas = aa; $scope.updateShow = false; } } //点击全选和全不选 $scope.ck = function(){ if($scope.cck){ for(var i=0;i<$scope.goods.length;i++){ $scope.goods[i].ss = true; } }else{ for(var i=0;i<$scope.goods.length;i++){ $scope.goods[i].ss = false; } } } //点击反选 $scope.fx = function(){ if($scope.ffx){ for(var i=0;i<$scope.goods.length;i++){ if($scope.goods[i].ss){ $scope.goods[i].ss = false; }else{ $scope.goods[i].ss = true; } } }else{ for(var i=0;i<$scope.goods.length;i++){ if($scope.goods[i].ss){ $scope.goods[i].ss = false; }else{ $scope.goods[i].ss = true; } } } } //点击批量删除的方法 $scope.plremove = function(){ var arr = []; for(var i=0; i < $scope.goods.length; i++){ if($scope.goods[i].ss){ arr.push($scope.goods[i].names); } } if(arr.length<=0){ alert("请您选中一条数据再进行删除哦!☺"); }else{ for (var j = 0; j<arr.length; j++) { for (var i=0; i < $scope.goods.length; i++) { if((arr[j]==$scope.goods[i].names)){ $scope.goods.splice(i,1); } } } if($scope.goods.length==0){ alert("惨了,咱家没货了!┭┮﹏┭┮"); } } } //计算总价的方法 $scope.goodsPrices = function(){ var price = 0; for(var i=0;i<$scope.goods.length;i++){ price+=$scope.goods[i].numbers*$scope.goods[i].prices; } return price; } //计算总量的方法 $scope.goodsNums = function(){ var num = 0; for(var i=0;i<$scope.goods.length;i++){ num+=$scope.goods[i].numbers; } return num; } //点击增加货物数量 $scope.jia = function(index){ $scope.goods[index].numbers++; } //点击货物数量减减 $scope.jian = function(index){ $scope.goods[index].numbers--; if($scope.goods[index].numbers<=0){ if(confirm("是否要删除?")){ $scope.goods.splice(index,1); }else{ alert("您取消了删除!"); $scope.goods[index].numbers+=1; return; } } } //清空库存的方法(一键清空) $scope.removeAll = function(){ if(confirm("确定清空吗?")){ $scope.goods = []; alert("已清空..."); }else{ alert("取消清空"); } } }); </script> </head> <body ng-controller="Mycon"> <h1 style="margin-left: 330px;">商品库存管理系统</h1><br /> <input type="text" placeholder="请输入关键词" ng-model="txt" /> <input type="button" value="查询" ng-click="cx()" /> <select ng-change="cc()" ng-model="op"> <option>按数量倒序</option> <option>按数量正序</option> </select> <input id="rkbut" class="bb" type="button" value="入库" ng-click="rk()" /> <input id="plbut" class="bb" type="button" value="批量删除" ng-click="plremove()" /> <input id="qkbut" class="bb" type="button" value="清空库存" ng-click="removeAll()" /> <br /><br /> <table class="tab" border="1" cellpadding="6" cellspacing="0"> <tr style="background-color: darkcyan;"> <td> <input type="checkbox" ng-click="ck()" ng-model="cck"/>全选/全不选<br /> <input type="checkbox" ng-click="fx()" ng-model="ffx"/>反选 </td> <th>货物编号</th> <th>货物名称</th> <th>货物数量</th> <th>货物产地</th> <th>货物单价</th> <th>货物的生产日期</th> <th>操作</th> </tr> <tr ng-repeat="good in goods | filter : {names:txt}"> <td> <input type="checkbox" ng-model="good.ss" /> </td> <td>{{$index+1}}</td> <td>{{good.names}}</td> <td><input class="j" type="button" value="-" ng-click="jian($index)" /><input type="number" placeholder="0" ng-model="good.numbers" /><input class="j" type="button" value="+" ng-click="jia($index)" /></td> <td>{{good.louders}}</td> <td>{{good.prices | currency:'¥'}}</td> <td>{{good.datas | date:'yyyy-MM-dd HH:mm:ss'}}</td> <td> <input class="but" type="button" value="删除" ng-click="remove($index)"/> <button class="but" ng-click="updateShowFun($index)" class="sb">修改</button> </td> </tr> </table> <br /> <b>货物总价:</b><span>{{goodsPrices() | currency:'¥'}}</span><br /> <b>货物总量:</b><span>{{goodsNums() | number}}</span><br /> <fieldset style="border: 1px solid blue; width: 550px; background-color: #D2B48C;" ng-show="sos"> <legend style="background-color: cornflowerblue; color: aliceblue;"><b>新增货物</b></legend> <table border="0"> <tr> <td>货物名称</td> <td><input type="text" value="" placeholder="请输入货物名称" ng-model="n"/></td> </tr> <tr> <td>货物数量</td> <td><input type="number" value="" placeholder="请输入货物数量" ng-model="num"/></td> </tr> <tr> <td>货物产地</td> <td><input type="text" value="" placeholder="请输入货物产地" ng-model="loud"/></td> </tr> <tr> <td>货物单价</td> <td><input type="number" value="" placeholder="请输入货物单价" ng-model="p"/></td> </tr> <tr> <td><input class="but" type="button" value="保存" ng-click="bc()"/></td> </tr> </table> </fieldset> <br /> <fieldset style="border: 1px solid blue; width: 550px; background-color: #D2B48C;" ng-show="updateShow"> <legend style="background-color: cornflowerblue; color: aliceblue;"><b>修改商品</b></legend> 货物名称: <input type="text" placeholder="请输入要修改的货物名称" ng-model="updateName" /><br /><br /> 货物数量: <input type="number" placeholder="请输入要修改的货物数量" ng-model="updateNum" /><br /><br /> 货物产地: <input type="text" placeholder="请输入要修改的货物产地" ng-model="updateloc" /><br /><br /> 货物单价: <input type="number" placeholder="请输入要修改的货物单价" ng-model="updatePrice" /><br /><br /> <input type="button" class="but" value="提交" ng-click="updateSub()" class="sb" /> </fieldset> </body> </html>