您的位置：首页 > Web前端 > CSS

商品信息管理布局样式

2017-09-19 20:59 197 查看

只是实现了布局和查找（主要是布局）

效果如图：

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title></title>

       <script type="text/javascript" src="angular.js"></script>

       <script type="text/javascript">

           var app = angular.module("myApp", []);

           app.controller("myCtrl", function($scope) {

               $scope.shopList = [{

                       id: 1234,

                       name: "ipad",

                       price: 3400,

                       num: 10

                   },

                   {

                       id: 1244,

                       name: "iphone",

                       price: 6400,

                       num: 100

                   },

                   {

                       id: 1334,

                       name: "mypad",

                       price: 4400,

                       num: 20

                   },

                   {

                       id: 8234,

                       name: "zpad",

                       price: 8400,

                       num: 230

                   }

               ];

               $scope.remove = function(index) {

                   if(confirm("确定删除？")) {

                       $scope.shopList.splice(index, 1);

                   }

               };

               $scope.orderColumn = "name";

               $scope.orderSign = "-";

               $scope.sortProduct = function(sortColumn) {

                   $scope.orderColumn = sortColumn;

                   if($scope.orderSign == "-") {

                       $scope.orderSign = "";

                   } else {

                       $scope.orderSign = "-";

                   }

               }



           });

       </script>

       <style>

           .hg:hover {

               color: crimson;

           }

       </style>

   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

       <center>

           <table border="1px" cellpadding="0" cellspacing="0" width="600px" height="250px">

               <thead>

                   <h3>商品信息库存管理</h3>

                   <input type="text" style="text-align: left;" ng-model="search" placeholder="输入关键字" />

                   <button style="background-color: crimson; color: azure;">批量删除</button>

               </thead>

               <tbody>

                   <tr style="text-align: center;">

                       <td><input type="checkbox" value="输入关键字" id="item"></td>

                       <td class="hg" ng-click="sortProduct('id')">

                           商品编号

                       </td>

                       <td class="hg" ng-click="sortProduct('name')">

                           商品名称

                       </td>

                       <td class="hg" ng-click="sortProduct('price')">

                           商品价格

                       </td>

                       <td class="hg" ng-click="sortProduct('num')">

                           商品库存

                       </td>

                       <td class="hg">数据操作</td>

                   </tr>

                   <tr ng-repeat="shop in shopList|filter:{'name':search}|orderBy:(orderSign+orderColumn)" style="text-align: center;">

                       <td><input type="checkbox"></td>

                       <td><span>{{shop.id}}</span></td>

                       <td><span>{{shop.name}}</span></td>

                       <td><span>{{shop.price|currency:"￥"}}</span></td>

                       <td><span>{{shop.num}}</span></td>

                       <td><span><button style="background-color: coral; color: cornsilk;" ng-click="remove($index)">删除</button></span></td>

                   </tr>

               </tbody>

           </table>

       </center>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航