angularJS ng-grid 配置

Posted 2020-07-31 觉信
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJS ng-grid 配置相关的知识，希望对你有一定的参考价值。
以下是按我的需求修改的简单的demo 可以自己扩展
<!DOCTYPE html>
<html class="no-js" ng-app="test"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title></title>
    <meta content="width=device-width" name="viewport">

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link href="css/ui-grid.min.css" rel="stylesheet">

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/ui-grid.min.js"></script>

    <style>
        body {
            padding: 60px;
            /*min-height: 600px;*/
        }
        .grid {
            width: 1200px;
            /*height: 5000px;*/
            margin:0 auto;
        }
        .placeholder {
            height: 50%;
            width: 50%;
            border: 3px solid black;
            background: #ccc;
        }
        .nav-ul{
            overflow: hidden;
            zoom:1;
        }
        .nav-ul li{
            float: left;
            list-style: none; margin-right: 15px;
            -webkit-user-select: none; /* Chrome all / Safari all */
            -moz-user-select: none; /* Firefox all */
            -ms-user-select: none; /* IE 10+ */ /* No support for these yet, use at own risk */
            -o-user-select: none;
            user-select: none;
        }
        .nav-ul li a{
            cursor: pointer!important;
        }
        .nav-ul li p.active{
            color:red;
        }
        .nav-ul li input[type=‘checkbox‘]{
            position: relative;
            top: 1px;
        }
    </style>
</head>
<body ng-controller="Main">
<!-- <h1>Test</h1> -->

<!-- <div class="row main"> -->
<h2>Grid{{gridName}}  </h2>
<!--<ul class="nav-ul">-->
    <!--<li>address.state <a ng-click="addColumn(‘address.state‘,150)">[+]</a> <a ng-click="removeColumn(‘address.state‘)">[-]</a></li>-->
    <!--<li>address.zip <a ng-click="addColumn(‘address.zip‘,150)">[+]</a></li>-->
    <!--<li>company <a ng-click="addColumn(‘company‘,150)">[+]</a></li>-->
    <!--<li>email <a ng-click="addColumn(‘email‘,100)">[+]</a></li>-->
    <!--<li>phone <a ng-click="addColumn(‘phone‘,100)">[+]</a></li>-->
    <!--<li>about <a ng-click="addColumn(‘about‘,100)">[+]</a></li>-->
<!--</ul>-->
<!--<ul class="nav-ul">-->
    <!--<li ng-repeat="col in baseData">-->
        <!--{{col.name}}&nbsp;<a ng-click="addColumn(col.name,col.width)">[+]</a>&nbsp;<a ng-click="removeColumn(col.name)">[-]</a>-->
    <!--</li>-->
<!--</ul>-->
<!--<ul class="nav-ul">-->
    <!--<li ng-repeat="col in baseData">-->
        <!--<p class="{{col.name}} active">{{col.name}}&nbsp;<a ng-click="addColumn(col.name,col.width,col.key)">[+]</a>&nbsp;<a ng-click="removeColumn(col.name)">[-]</a></p>-->
    <!--</li>-->
<!--</ul>-->
<ul class="nav-ul">
    <li ng-repeat="col in baseData">
        <label><input ng-click="changeColumn(col.name,col.displayName,col.width,col.key,$event)" type="checkbox" checked/>&nbsp;{{col.displayName}}</label>
    </li>
</ul>
<!--<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div>-->
<div ui-grid="gridOptions" class="grid" ui-grid-selection ui-grid-edit ui-grid-importer ui-grid-exporter></div>
<!-- <div class="placeholder"> -->
<!-- </div> -->

<br>
<br>
<style>
    .grid1467082016751 .ui-grid-render-container-body .ui-grid-viewport{
        height: inherit!important;
    }
</style>
<script>
    var iArray = [
        { name:‘id‘,displayName:"编号", width:50 , key:1},
        { name:‘name‘,displayName:"姓名", width:100, pinnedLeft:true , key:2},
        { name:‘age‘,displayName:"年龄", width:100, pinnedRight:true, key:3 },
        { name:‘address.street‘,displayName:"街道", width:150 , key:4 },
        { name:‘address.city‘,displayName:"城市", width:150, key:5 },
        { name:‘address.state‘,displayName:"社区", width:150 , key:6},
        { name:‘address.zip‘,displayName:"详细地址", width:150, key:7 },
        { name:‘company‘,displayName:"公司名称", width:120 , key:8},
        { name:‘email‘,displayName:"邮箱", width:100, key:9},
        { name:‘phone‘,displayName:"手机", width:200 , key:10},
        { name:‘about‘,displayName:"关于", width:300 , key:11}
    ];
//    iArray.sort(function(a,b){
//        if(a.key> b.key) return 1;
//        if(a.key> b.key) return -1;
//        return 0;
//    })
    var iArray2 = iArray.concat();//复制数组1array1.concat()

    var app = angular.module(‘test‘, [‘ui.grid‘, ‘ui.grid.pinning‘, ‘ui.grid.resizeColumns‘]);
    app.controller(‘Main‘, function($scope, $http) {
        $scope.gridOptions = {};
        $scope.gridOptions.columnDefs = iArray2;
        $scope.baseData = iArray;
        $scope.gridName = "员工信息";
        $scope.datas = null;
        var dataName = null;

        $http.get(‘https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json‘,{params: {pageSize:10,pageNo:3}
        }).success(function(data) {
            $scope.datas = data;
            dataName = data;
            $scope.gridOptions.data = dataName;
        });

        $scope.getFields = function () {
            var data = $scope.$parent[dataName];
            if (data && data.length > 0) {
                var keys = _.keys(data[0]);
                return _.reject(keys, function (key) {
                    return _.find($scope.columnDefs, function (col) {
                        return col.field === key;
                    });
                });
            }
            return [];
        }

        $scope.changeColumn = function (field,displayName,width,key,$event){
            if( $($event.target).prop("checked") ){
                $scope.addColumn(field,displayName,width,key);
            }else{
                $scope.removeColumn(field);
            }
            return false;
        }

        $scope.addColumn = function (field,displayName,width,key) {
            var index = $scope.getIndex($scope.gridOptions.columnDefs, field);
            var index2 = $scope.getIndex($scope.baseData, field);
            if (index == -1) {
                var oEle = document.getElementsByClassName(field);
                $(oEle).addClass("active");
//                $scope.gridOptions.columnDefs.splice(index2,0,{
//                    field: field,
//                    displayName: field,
//                    width: width,
//                    class: "active"
//                });
                $scope.gridOptions.columnDefs.push({
                    field: field,
                    displayName: displayName,
                    width: width,
                    key: key
                });
                $scope.gridOptions.columnDefs.sort(function(a,b){
                    if(a.key> b.key) return 1;
                    if(a.key< b.key) return -1;
                    return 0;
                })
            }
        }
        $scope.removeColumn = function (col) {
            var index = $scope.getIndex($scope.gridOptions.columnDefs,col,"active2");
            if( index!=-1 ) {
                var oEle = document.getElementsByClassName($scope.gridOptions.columnDefs[index].name);
                $(oEle).removeClass("active");
                $scope.gridOptions.columnDefs.splice(index,1);
            };
        }
        $scope.getIndex = function(arr,val){
            var index_ = -1;
            $(arr).each(function(i,o){
                if( arr[i].name == val ){
                    index_ = i;
                }
            })
            return index_;
        }
        $scope.$watch(‘gridOptions‘, function (data) {
            if (data.length > 0 && $scope.columnDefs.length == 0) {
                $scope.getFields().forEach(function (f) {
                    $scope.addColumn(f);
                });
            }
        });

        $("h2 a").each(function(i,o){
            $(this).click(function(){
                if(i==0){
                    $scope.gridOptions.columnDefs = iArray2;
                    $scope.$apply();
                }else{
                    $scope.gridOptions.columnDefs = iArray;
                    $scope.$apply();
                }
            })
        })

    });



</script>
</body>
</html>
整个资源放在了百度网盘需要的下载：http://pan.baidu.com/s/1eSFfksi
以上是关于angularJS ng-grid 配置的主要内容，如果未能解决你的问题，请参考以下文章
通过自定义指令进行 ng-grid 分页
angularJS中的ui-router和ng-grid模块
angular.js学习－ng-grid
ng-grid 展开和折叠行
角度 ng-grid 行高