表格渲染(删除查询)

最新推荐文章于 2024-09-28 14:12:26 发布
Liuxb_zao
最新推荐文章于 2024-09-28 14:12:26 发布
阅读量305
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/Liuxb_zao/article/details/78245876
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular-1.3.0.js"></script>
    <script src="jquery.1.12.4.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);


        var data=[
            {
             done:false,
             id:"1234",
             name:"ipad",
             price:3400,
             only:10,
            },
            {
                done:false,
                id:1244,
                name:"iphone",
                price:6400,
                only:5,
            },
            {
                done:false,
                id:1334,
                name:"mypad",
                price:4400,
                only:20,
            },
            {
                done:false,
                id:8234,
                name:"zpad",
                price:8400,
                only:130,
            }
        ]
        myapp.controller("myctrl",function ($scope) {
            $scope.data=data;
            $scope.col="id";
            $scope.desc=0;
            /*删除信息*/
            $scope.del=(function (hh) {
                var con=confirm("确定删除么?");
                if(con==true){
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.data[i].name==hh)
                        {
                            $scope.data.splice(i,1);
                        }
                    }
                }else{

                }

            }) ;
            /*删除选中的*/
            $scope.delall=function () {
                var con=confirm("确定删除么?");
                if(con==true){
                    for(var i=0;i<$scope.data.length;i++)
                    {
                        if($scope.data[i].done==true)
                        {
                            $scope.data.splice(i,1);
                            i--;
                        }
                    }
                }else{

                }

            }
            /*全选*/
            $scope.checkAll=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.chec==true)
                    {
                        $scope.data[i].done=true;
                    }
                    else{
                        $scope.data[i].done=false;
                    }
                }
            }
        });
        $(function () {
            $("#a").click(function () {
                $("#a").css("color","red");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#aa").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","red");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#a3").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","red");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#a4").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","red");
                $("#a5").css("color","black");
            });
            $("#a5").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","red");
            });
        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
      <div>
          <h3>商品库存信息管理</h3>
          <hr>
          <div style="background-color: #E8FBFF;height: 25px">
              <input type="text" value="" placeholder="请输入关键字..." ng-model="search">
              <button type="button" style="margin-left:1270px;color: #c3c3c3;background-color: red"ng-click="delall()">批量删除</button>
          </div>
          <div>
          <table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center">
              <thead>
              <tr>
                  <td ><input type="checkbox"ng-click="checkAll()" ng-model="chec"></td>
                  <td id="a" ng-click="desc=!desc;col='id'" >商品编号</td>
                  <td id="aa" ng-click="desc=!desc;col='name'">商品名称</td>
                  <td id="a3" ng-click="desc=!desc;col='price'">商品价格</td>
                  <td id="a4"ng-click="desc=!desc;col='only'">商品库存</td>
                  <td id="a5"ng-click="desc=!desc;col=''">数据操作</td>
              </tr>
              </thead>
              <tr ng-repeat="item in data|filter:{'name':search}|orderBy:col:desc">
                  <td><input type="checkbox" ng-model="item.done"></td>
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.price|currency:"¥"}}</td>
                  <td>{{item.only}}</td>
                  <td>
                      <button style="color: #E8FBFF;background-color: yellow" ng-click="del(item.name)">删除</button>
                  </td>
              </tr>

          </table>
          </div>
      </div>

</body>
</html>