混合开发之模糊查询增删改查

最新推荐文章于 2024-06-20 21:45:40 发布

ch5211314

最新推荐文章于 2024-06-20 21:45:40 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/ch5211314/article/details/79794325

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           #but{
               background-color: #008000;
           }


body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #EEE;}

ul{
   list-style-type: none;
}
       </style>
   </head>
   <body ng-app="myapp" ng-controller="ctrl">
       <center>
       <div>
           <input type="text" id="input" value="" placeholder="按电影名称模糊查询" ng-model="searchkey"/>

       <input type="button" id="" value="搜索" ng-click="sou"/>
       <select style="margin-left: 30px;" ng-model="orderkey"><option>--按要求排序--</option>
           <option value="fsdate">按上映时间正序排列</option>
           <option value="-fdaoyan">按导演倒叙排列</option>
       </select>
       <input type="button" id="input2" value="批量删除" ng-click="plsc_btn()" />
          <input type="button" name="" id="" value="入库" ng-click="isAdd=!isAdd"/>
           <div>

       </div>
       <table border="1" cellspacing="0" cellpadding="0">
           <thead>
               <tr>
                   <th><input type="checkbox" name="" id="" value="" ng-model="checkAll" /></th>
                   <th>电影名称</th>
                   <th>类别</th>
                   <th>时长</th>
                   <th>导演</th>
                   <th>售价</th>
                   <th>上映时间</th>
                   <th>评分</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr ng-repeat="x in film|filter:searchkey|orderBy:orderkey">
                   <td><input type="checkbox" name="" id="" value="" ng-model="checkAll" /></td>
                   <td>{{x.fname}}</td>
                   <td>{{x.ftype}}</td>
                   <td>{{x.fdate}}</td>
                   <td>{{x.fdaoyan}}</td>
                   <td>{{x.fmuch|currency:"￥："}}</td>
                   <td>{{x.fsdate}}</td>
                   <td>{{x.fpinfen}}</td>
                   <td><input type="button" id="" value="删除" ng-click="delgoods(x.fname)"/></td>
               </tr>
           </tbody>
       </table>
   <span id="g_totalprice" class="cal">总价是：{{getTotalPrice()|currency:"￥："}}</span>     
                      
               
<input type="button" id="input_clear" value="清空购物车" ng-click="clearGoods()" />
       </div>


       <ul ng-show="isAdd">
           <li>电影名称<input type="text" id="" value="" ng-model="dname" /></li>
           <li> <td><span id="ming_span"></span></td></li>
           <li>类别<input type="text" id="" value="" ng-model="dtype"/></li>
           <li>时长<input type="text" id="" value="" ng-model="ddate"/></li>
           <li>导演<input type="text" id="" value="" ng-model="ddaoyan"/></li>
           <li>售价<input type="text" id="" value="" ng-model="dmuch"/></li>
           <li>上映时间<input type="text" id="" value="" ng-model="dsdate"/></li>
           <li>评分<input type="text" id="" value="" ng-model="dpingfeng"/></li>
           <li><input type="button" id="" value="添加" ng-click="saveGoods()"/></li>
       </ul>
       </center>


       <script type="text/javascript">
           var app=angular.module("myapp",[]);
           app.controller("ctrl",function($scope){


               //搜索关键字
               $scope.searchkey="";

               $scope.film=[
               {fname:"前三任",ftype:"喜剧，爱情",fdate:"120分钟",fdaoyan:"田羽生",fmuch:35.9,fsdate:"2017-11-09 08：22：29",fpinfen:9.3},
               {fname:"速度与激情8",ftype:"动作，冒险",fdate:"145分钟",fdaoyan:"格雷",fmuch:45.9,fsdate:"2015-03-09 08：10：29",fpinfen:9.5},
               {fname:"羞羞的铁拳",ftype:"喜剧，爱情",fdate:"135分钟",fdaoyan:"宋扬",fmuch:38.9,fsdate:"2017-11-28 21：22：29",fpinfen:8.3}
               ]


               $scope.delgoods=function(gname){
                   var c=confirm("确定要删除吗");
                   if (c) {//点击了确定按钮
                       for (var i = 0; i <$scope.film.length; i++) {
                           if($scope.film[i].fname==gname){
                               $scope.film.splice(i,1);
                               break;

                           }

                       }
                       alert("删除成功");
                   }
               }

               //计算总价格
               $scope.getTotalPrice=function(){
                   var fmuch=0;
                   for (var i = 0; i < $scope.film.length; i++) {
                       fmuch+=($scope.film[i].fmuch*$scope.film[i].fpinfen)
                   }
                   return fmuch;
               }

               $scope.clearGoods=function(){
                   //清空所有购物车数据
                   $scope.film=[];
               }

               $scope.delect_1=function(){
                   alert("删除")
               }


                  //批量删除状态
                $scope.plsc_btn=function(){
                    var deall=$("input:checked");//选中的删除
                         for (var i = deall.length-1; i >=0; i--) {
                        //得到序号--从0开始
                        var index=deall[i].value;
                        //进行删除
                        $scope.film.splice(index,1);
                    }
                }


                $scope.saveGoods=function(){
                   var newsfilm={};
                   newsfilm.fname=$scope.dname;
                   newsfilm.ftype=$scope.dtype;
                   newsfilm.fdate=$scope.ddate;
                   newsfilm.fdaoyan=$scope.ddaoyan;
                   newsfilm.fmuch=$scope.dmuch;
                   newsfilm.fsdate=$scope.dsdate;
                   newsfilm.fpinfen=$scope.dpingfeng;

     //进行添加
     $scope.film.push(newsfilm);
                }



                  var ming=$scope.dname;
                    if (ming=="") {
                        $("#ming_span").html("商品名不能为空");
                        return;
                    } else{
                        $("#ming_span").html("");
                    }
               });

               </script>
   </body>
</html>

ch5211314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发之模糊查询增删改查

#but{ background-color: #008000; } body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}table{width:500px;border:0
复制链接

扫一扫