实现根据后台返回的数据属性设置页面样式

最新推荐文章于 2022-09-24 23:23:34 发布

weixin_30347335

最新推荐文章于 2022-09-24 23:23:34 发布

阅读量1.3k

点赞数

文章标签：后端 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xiaoli52qd/p/6605726.html

版权

需求：后台返回的数据为此种格式，子与父无层级区分，都是一条条数据返回的，只可以根据pid去判断是否为父级列表，并和子列表样式进行区别设置。

效果图：

代码如下：

    <!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。

转载于:https://www.cnblogs.com/xiaoli52qd/p/6605726.html