三十四、Expandable grid 可扩展的表格

2018-12-18 · 579 words · 3 minute read

ui-grid

angularjs · ui-grid · ui-grid中文

ui.grid.expandable模块可以添加子表格。要显示子表格，您需要增加以下表格选项： api文档中提供了可扩展功能的文档，特别是：

gridOptions
publicApi

$scope.gridOptions = {
  //This is the template that will be used to render subgrid.
  expandableRowTemplate: 'expandableRowTemplate.html',
  //This will be the height of the subgrid
  expandableRowHeight: 140,
  //Variables of object expandableScope will be available in the scope of the expanded subgrid
  expandableRowScope: expandableScope
}

expandableRowTemplate将是子表格的模板，expandableRowHeight是子表格的高度。 expandableRowScope可用于将变量添加到子表格的scope。然后可以从expandableRowTemplate访问这些变量。 grid api为子表格提供以下事件和方法：

//rowExpandedStateChanged is fired for each row as its expanded:
gridApi.expandable.on.rowExpandedStateChanged($scope,function(row){
});
//Following methods can be used to expand/ collapse all rows of the grid:
gridApi.expandable.expandAllRows();
gridApi.expandable.collapseAllRows();

SubGrid嵌套可以设置多个层级。除了上面的配置，scrollFillerClass也可用，可用于设置滚动填充样式。当快速滚动表格时，会出现滚动填充。为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件：

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.expandable.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.selection.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.pinning.min.js"></script>

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <script src="http://ui-grid.info/app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl as main">
      <div class="control-group">
        <button id="toggleVisibility" type="button" class="btn btn-sm btn-default" ng-click="main.toggleExpandAllBtn()">Toggle Expand All Visibility</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.expandAllRows()">Expand All</button>
        <button type="button" class="btn btn-sm btn-default" ng-click="main.collapseAllRows()">Collapse All</button>
      </div>
      <div id="grid1" ui-grid="main.gridOptions" ui-grid-pinning ui-grid-expandable class="grid"></div>
    </div>
    Expandable rows works with checkboxes from selection and left pins
    <div ng-controller="SecondCtrl as second">
       <div ui-grid="second.gridOptions" ui-grid-pinning ui-grid-expandable ui-grid-selection class="grid"></div>
    </div>
    Retrieve data for subGrid when expanding
    <div ng-controller="ThirdCtrl as third">
       <div ui-grid="third.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
    Toggle expand subGrid control
    <div ng-controller="FourthCtrl as fourth">
       <div ui-grid="fourth.gridOptions" ui-grid-expandable class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 100%;
  height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);

app.controller('MainCtrl', function MainCtrl($http, $log) {
  var vm = this;

  vm.gridOptions = {
    expandableRowTemplate: 'expandableRowTemplate.html',
    expandableRowHeight: 150,
    //subGridVariable will be available in subGrid scope
    expandableRowScope: {
      subGridVariable: 'subGridScopeVariable'
    }
  };

  vm.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age'},
    { name: 'address.city'}
  ];

  $http.get('http://ui-grid.info/data/500_complex.json')
    .then(function(response) {
      var data = response.data;

      for(i = 0; i < data.length; i++){
        data[i].subGridOptions = {
          columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
          data: data[i].friends
        };
      }
      vm.gridOptions.data = data;
    });

    vm.gridOptions.onRegisterApi = function(gridApi){
      vm.gridApi = gridApi;
    };

    vm.expandAllRows = function() {
      vm.gridApi.expandable.expandAllRows();
    };

    vm.collapseAllRows = function() {
      vm.gridApi.expandable.collapseAllRows();
    };

    vm.toggleExpandAllBtn = function() {
      vm.gridOptions.showExpandAllButton = !vm.gridOptions.showExpandAllButton;
    };
});

app.controller('SecondCtrl', function SecondCtrl($http, $log) {
        var vm = this;

        vm.gridOptions = {
                enableRowSelection: true,
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150
        }

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        var data = response.data;

                        for(i = 0; i < data.length; i++) {
                                data[i].subGridOptions = {
                                        columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
                                        data: data[i].friends
                                };
                        }
                        vm.gridOptions.data = data;
                });
});

app.controller('ThirdCtrl', function ThirdCtrl($scope, $http, $log) {
        var vm = this;

        vm.gridOptions = {
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150,
                onRegisterApi: function (gridApi) {
                        gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
                                if (row.isExpanded) {
                                        row.entity.subGridOptions = {
                                                columnDefs: [
                                                { name: 'name'},
                                                { name: 'gender'},
                                                { name: 'company'}
                                        ]};

                                        $http.get('http://ui-grid.info/data/100.json')
                                                .then(function(response) {
                                                        row.entity.subGridOptions.data = response.data;
                                                });
                                }
                        });
                }
        };

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        vm.gridOptions.data = response.data;
                });
});

app.controller('FourthCtrl', function FourthCtrl($http, $log) {
        var vm = this;

        vm.gridOptions = {
                enableRowSelection: true,
                expandableRowTemplate: 'expandableRowTemplate.html',
                expandableRowHeight: 150
        };

        vm.gridOptions.columnDefs = [
                { name: 'id', pinnedLeft:true },
                { name: 'name'},
                { name: 'age'},
                { name: 'address.city'}
        ];

        $http.get('http://ui-grid.info/data/500_complex.json')
                .then(function(response) {
                        var data = response.data;

                        for(i = 0; i < data.length; i++) {
                                data[i].subGridOptions = {
                                        columnDefs: [{name: 'Id', field: 'id'}, {name: 'Name', field: 'name'}],
                                        data: data[i].friends,
                                        disableRowExpandable : (i % 2 === 0)
                                };
                        }
                        vm.gridOptions.data = data;
                });
});

关注微信公众号，与我交流吧~