商品库存管理界面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40015237/article/details/78049796
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品库存信息管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/angular1.4.6.min.js"></script>
    <style>
        table, tr, td {
            border-width: 2px;
            border-color: #0a9dc7;
            border-style: solid;
        }

        .active {
            color: yellow;
        }

    </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
    <tr>
        <td colspan="5"><input type="text" ng-model="search" placeholder="输入关键字"></td>

        <td>
            <button style="background-color: #ff3b30" ng-click="removeall()">批量删除</button>
        </td>
    </tr>
    <tr ng-click="dianji()">
        <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
        <td ng-click="sortProduct('bh')" ng-class="{active :'bh'==orderColumn}">商品编号</td>
        <td ng-click="sortProduct('name')" ng-class="{active:'name'==orderColumn}">商品名称</td>
        <td ng-click="sortProduct('price')" ng-class="{active:'price'==orderColumn}">商品价格</td>
        <td ng-click="sortProduct('num')" ng-class="{active:'num'==orderColumn}">商品库存</td>
        <td>数据操作</td>
    </tr>
    <tr ng-repeat="goods in goodslist | filter:{'name': search} | orderBy:(orderSign+orderColumn)">
        <td><input type="checkbox" ng-checked="goods.checked" ng-click="echoChange(goods.bh,goods.checked,selectAll)">
        </td>
        <td>{{goods.bh}}</td>
        <td>{{goods.name}}</td>
        <td>{{goods.price|currency :'¥' }}</td>
        <td>{{goods.num}}</td>
        <td>
            <button style="background-color: #e6b500" ng-click="remove($index)">删除</button>
        </td>
    </tr>
</table>
</body>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("myCtrl", function ($scope) {
        $scope.goodslist = [{
            "bh": "1234",
            "name": "ipad",
            "price": 3400.00,
            "num": 10,
            "checked": false
        }, {
            "bh": "1244",
            "name": "iphone",
            "price": 6400.00,
            "num": 100,
            "checked": false
        }, {
            "bh": "1334",
            "name": "mypad",
            "price": 4400.00,
            "num": 20,
            "checked": false
        }, {
            "bh": "8234",
            "name": "zpad",
            "price": 8400.00,
            "num": 130,
            "checked": false
        }];

        $scope.orderColumn = 'name';
        $scope.orderSign = '-';


        $scope.sortProduct = function (sortColumn) {

            $scope.orderColumn = sortColumn;
            if ($scope.orderSign == "-") {
                $scope.orderSign = "";
            } else {
                $scope.orderSign = "-";
            }
        }

        $scope.selectAllClick = function (sa) {
            for (var i = 0; i < $scope.goodslist.length; i++) {
                $scope.goodslist[i].checked = sa;
            }

        }
        $scope.remove = function (index) {
            if (confirm('确定删除此项吗?')) {
                $scope.goodslist.splice(index, 1);
            }
        }


        $scope.removeall = function () {
            if (confirm('确定删除全部吗?')) {
                $scope.goodslist = "";
            }
        }

    })
</script>
</html>