html - 当包含 div 大小的父项发生变化时，如何动态更改 ng-grid 表的大小？

Question

我正在使用 ng-class 和一个评估是否显示编辑表单的表达式来更改包含的 div 的大小。如果显示编辑表单，我想更改包含 ng-grid 和 ng-grid 本身的 div 的大小。

<div class=" row-fluid">
    <div ng-class="{'span7' : displayEditForm == true, 'span12': displayEditForm == false}" >
        <ul class="nav nav-tabs" style="margin-bottom: 5px;">
            <li class="active"><a href="#" ng-click="getActivitiesThatNeedMyApproval()" data-toggle="tab">Activities Needing My Approval</a></li>
            <li><a href="#" ng-click="getMyActivitiesNeedingApproval()" data-toggle="tab">My Activities Needing Approval </a></li>
            <li><a href="#" ng-click="getMyActivities()" data-toggle="tab">My Activities</a></li>
        </ul>
       <div class="edus-admin-manage-grid span12"  style="margin-left:0;" ng-grid="gridOptions"></div>
    </div>
    <div class="span5" ng-show="displayEditForm">
        <div class="edus-activity-container">
            <div class="edus-admin-activities-grid">
                <div ng-include="'/partials/' + activity.object.objectType + '.html'" class="edus-activity"></div>
                <!--  <div ng-include="'/partials/admin-activity-actions.html'"></div>-->
            </div>
        </div>
        <div ng-include="'/partials/admin-edit-activity-grid-form.html'"></div>
    </div>
</div>

包含导航栏和网格的 div 通过 ng-class 更改大小(从 span12 到 span7)，但 ng-grid 不刷新。鉴于父 div 的变化，如何触发 ng-grid 的刷新？

我在下面包含了我的 gridOptions:

$scope.gridOptions = {
plugins: [gridLayoutPlugin],
data : 'activities',
showFilter: true,
/*    enablePaging: true,*/
showColumnMenu: true,
/*  showFooter: true,*/
rowHeight: 70,
enableColumnResize: true,
multiSelect: false,
selectedItems: $scope.selectedActivities,
afterSelectionChange: function(rowItem,event){
   if($scope.selectedActivities && $scope.selectedActivities.length > 0){
        $scope.activity = $scope.selectedActivities[0];
        $scope.activityViewState.index = $scope.activities.indexOf($scope.activity);
        $scope.displayEditForm = true;
        console.log("DEBUG :::::::::::::::: updated displayEditForm.",            $scope.displayEditForm);

                        if($scope.activity.ucdEdusMeta.startDate) {

                           // $scope.activity.ucdEdusMeta.startDate = new Date($scope.activity.ucdEdusMeta.startDate);
                            $scope.edit.startDate = moment($scope.activity.ucdEdusMeta.startDate).format("MM/DD/YYYY");
                            $scope.edit.startTime = moment($scope.activity.ucdEdusMeta.startDate).format("hh:mm A");
                        }

                        if($scope.activity.ucdEdusMeta.endDate) {

                           // $scope.activity.ucdEdusMeta.endDate = new Date($scope.activity.ucdEdusMeta.endDate);
                            $scope.edit.endDate = moment($scope.activity.ucdEdusMeta.endDate).format("MM/DD/YYYY");
                            $scope.edit.endTime = moment($scope.activity.ucdEdusMeta.endDate).format("hh:mm A");
                        }

                    }
                },
       /* pagingOptions: { pageSizes: [5, 10, 20], pageSize: 10, totalServerItems: 0, currentPage: 1 },*/
       columnDefs: [
            {field: 'title', displayName: 'Title', width:'15%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'actor.displayName', displayName: 'DisplayName', width:'10%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'object.content', displayName:'Content', width:'35%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'ucdEdusMeta.startDate', displayName: 'Start Date', width:'20%',
                        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'},
            {field: 'ucdEdusMeta.endDate', displayName: 'End Date', width:'20%',
                        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'}
          // {field: '', displayName: ''},
          ]
};

这是网格使用的 CSS:

.edus-admin-manage-grid {
    border: 1px solid rgb(212,212,212);
    width: 100%;
    height: 700px
}

Answer 1

您可以使用 ng-grid 的布局插件 (ng-grid-layout.js)。它应该与位于以下位置的 ngGrid 一起提供:

ng-grid/plugins/ng-grid-layout.js

(更新:现在 https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-layout.js)

您必须在主 index.html 文件中包含指向此 js 文件的附加脚本标记。包含这个与 ng-grid.js 的顺序很重要。

您必须在 displayEditForm 上设置监视，然后调用插件的 updateGridLayout() 函数。

所以它会是这样的:

var gridLayoutPlugin = new ngGridLayoutPlugin();

// include this plugin with your grid options
$scope.gridOptions = {
    // your options and:
    plugins: [gridLayoutPlugin]
};

// make sure grid redraws itself whenever
// the variable that ng-class uses has changed:
$scope.$watch('displayEditForm', function() {
    gridLayoutPlugin.updateGridLayout();
});

根据我的理解， watch 通常属于 link 功能而不是 Controller ，但它可以在任何位置工作。你也可以更进一步说:

$scope.$watch('displayEditForm', function(newVal, oldVal) {
    if (newVal !== undefined && newVal !== oldVal) {
        gridLayoutPlugin.updateGridLayout();
    }
});

确保仅在数据从 true/false 切换时触发。如果您的数据最初是未定义的，并且您浪费时间在给它一个初始值之前调用网格重绘，这将很重要。