實現根據後臺返回的數據屬性設置頁面樣式

時間 2019-12-19

標籤實現根據後臺返回數據屬性設置頁面樣式简体版

原文原文鏈接

需求：後臺返回的數據爲此種格式，子與父無層級區分，都是一條條數據返回的，只能夠根據pid去判斷是否爲父級列表，並和子列表樣式進行區別設置。javascript

效果圖：css

代碼以下：html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>實現根據後臺返回的數據屬性設置頁面樣式</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.css">
        <style type="text/css">
            .table-center td.parent:before
            {
                content:"|-";
                text-align: left;
            }
            .table-center td.parent
            {
                content:"|-";
                text-align: left;
            }
            .table-center td.son:before
            {
                content:"|--";
                text-align: left;
            }
            .table-center td.son{
                text-align: left;
                text-indent: 2em;
            }
        </style>
    </head>
    <body ng-app='app'>
        <div class="container-fluid" ng-controller="authorityManageCtrl">
        <div class="clearfix row">
            <table  class="table table-bordered table-striped table-center" style="margin-top: 20px;">
                <thead>
                <tr>

                    <th rowspan="2" style="vertical-align: middle !important;">節點描述</th>
                    <th rowspan="2">節點名稱</th>
                    <th rowspan="2" style="width:400px;">類型</th>
                    <th rowspan="2">操做</th>

                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="(index,tabledata) in nodeLists">
                    <td ng-bind="tabledata.title" ng-class="{'parent':tabledata.isParent,'son':!tabledata.isParent}"></td>
                    <td ng-bind="tabledata.name"></td>
                    <td ng-bind="tabledata.levelMsg"></td>
                    <td>
                        <button class="btn btn-xs btn-danger" type="button" ng-click="delete(index,tabledata.id)">刪除</button>
                        <!--<button class="btn btn-xs btn-warning" type="button" ng-click="modifyNode(index,tabledata)">修改</button>-->
                    </td>
                </tr>

                </tbody>
            </table>

        </div>
    </div>
    <script type="text/javascript" src='angular.js'></script>
    <script type="text/javascript">
        var module = angular.module("app",[]);
        module.controller("authorityManageCtrl",["$scope",function($scope){
            $scope.nodeLists=[
                {
                    "id": "1",
                    "name": "App",
                    "title": "APP數據彙總",
                    "pid": "0",
                    "level": "2",
                    "sort": "0",
                    "remark": null
                },
                {
                    "id": "2",
                    "name": "getAppLaunchCount",
                    "title": "啓動數",
                    "pid": "1",
                    "level": "3",
                    "sort": "1",
                    "remark": null
                },
                {
                    "id": "3",
                    "name": "getAppActivateCount",
                    "title": "激活數",
                    "pid": "1",
                    "level": "3",
                    "sort": "3",
                    "remark": null
                },
                {
                    "id": "5",
                    "name": "getAppSignupCount",
                    "title": "註冊數",
                    "pid": "1",
                    "level": "3",
                    "sort": "4",
                    "remark": null
                },
                {
                    "id": "9",
                    "name": "Loanmarket",
                    "title": "貸款超市",
                    "pid": "0",
                    "level": "2",
                    "sort": "0",
                    "remark": null
                },
                {
                    "id": "11",
                    "name": "getLoanmarketCount",
                    "title": "UVPV統計",
                    "pid": "9",
                    "level": "3",
                    "sort": "1",
                    "remark": null
                },
                {
                    "id": "14",
                    "name": "getLoanmarketCount2",
                    "title": "UVPV統計2",
                    "pid": "9",
                    "level": "3",
                    "sort": "14",
                    "remark": null
                },
                {
                    "id": "6",
                    "name": "Datamonitor",
                    "title": "數據監控",
                    "pid": "0",
                    "level": "2",
                    "sort": "1",
                    "remark": null
                },
                {
                    "id": "7",
                    "name": "getOrderCountHour",
                    "title": "下單監控",
                    "pid": "6",
                    "level": "3",
                    "sort": "1",
                    "remark": null
                },
                {
                    "id": "8",
                    "name": "getRegistCountHour",
                    "title": "註冊監控",
                    "pid": "6",
                    "level": "3",
                    "sort": "2",
                    "remark": null
                },
                {
                    "id": "10",
                    "name": "getTestCountHour",
                    "title": "渠道監控",
                    "pid": "6",
                    "level": "3",
                    "sort": "3",
                    "remark": null
                },
                {
                    "id": "12",
                    "name": "Test",
                    "title": "測試",
                    "pid": "0",
                    "level": "2",
                    "sort": "12",
                    "remark": null
                },
                {
                    "id": "13",
                    "name": "getTestCount1",
                    "title": "測試子級一",
                    "pid": "12",
                    "level": "3",
                    "sort": "13",
                    "remark": null
                },
                {
                    "id": "18",
                    "name": "1113",
                    "title": "1113",
                    "pid": "12",
                    "level": "3",
                    "sort": "1113",
                    "remark": null
                },
                {
                    "id": "19",
                    "name": "1114",
                    "title": "1114",
                    "pid": "12",
                    "level": "3",
                    "sort": "1114",
                    "remark": null
                },
                {
                    "id": "15",
                    "name": "1111",
                    "title": "1111",
                    "pid": "0",
                    "level": "2",
                    "sort": "111",
                    "remark": null
                },
                {
                    "id": "17",
                    "name": "111-1",
                    "title": "1111",
                    "pid": "15",
                    "level": "3",
                    "sort": "1111",
                    "remark": null
                },
                {
                    "id": "16",
                    "name": "222",
                    "title": "222",
                    "pid": "0",
                    "level": "2",
                    "sort": "222",
                    "remark": null
                }
            ];
            angular.forEach($scope.nodeLists, function(item,index,array){

                if($scope.nodeLists[index]['pid'] == 0){
                    
                    $scope.nodeLists[index]['isParent']= true;
                }else {
                    $scope.nodeLists[index]['isParent']= false;
                    $scope.parent=false;
                   
                }

                if($scope.nodeLists[index]['level']==1){
                            $scope.nodeLists[index]['levelMsg'] = '項目';
                        }else if ($scope.nodeLists[index]['level']==2){
                            $scope.nodeLists[index]['levelMsg'] = '模塊';
                        }else {
                            $scope.nodeLists[index]['levelMsg'] = '操做';
                        }
            });
            console.log($scope.nodeLists);

        }])    

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

若是pid=0，就給當前的$scope.nodeLists[index]的'isParent'屬性設爲TRUE，頁面經過ng-repeat="(index,tabledata) in nodeLists"就能夠得到isParent的屬性，由ng-class="{'parent':tabledata.isParent,'son':!tabledata.isParent}"可知，當isParent=TRUE時，綁定的class爲parent,當isParent=FALSE時，綁定的class爲son。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。