原文:Tutorial: 212 Infinite scroll

无限滚动功能允许用户将其数据延迟加载到gridOptions.data。

api文档中提供了Infinite scroll功能的文档,特别是:

一旦到达实际数据集的顶部(或底部),无限滚动将停止在该方向上触发事件。 可以通过infiniteScrollUp = true向上或向下通过infiniteScrollDown = true设置触发方向。默认未启动。

默认情况下,距离网格末端20行(在任一方向上)时,会触发数据请求。还可以通过设置infiniteScrollRowsFromEnd = 20指定触发请求时数据集末尾的行数。

还会触发needMoreData(向下)或needMoreDataTop(向上)事件,如果有更多可用数据,必须接收并响应。 一旦检索到数据则将其添加到数据阵列,还需要调用dataLoaded来确认已加载数据,或者没有更多数据,且不会在该方向上再触发更多数据的请求。

加载数据后,会调整网格滚动以显示连续滚动的外观。 假设用户在数据返回时已经到达滚动的末尾(向上或向下),会将用户滚动条到新添加的数据的开头。 在某些情况下,这可能会产生“跳跃式”滚动,特别是如果将rowsFromEnd设置为相当高的值,以便预读取数据 – 如果用户正在缓慢滚动它们可能距离末尾50行,当dataLoaded处理完会突然将滚动条移动到过去的结尾。 为避免这种情况,可以在数据添加之前通过调用saveScrollPercentage保存滚动位置,添加数据后dataLoaded调尝试调整滚动以使相同的行显示。

如果启用了无限滚动并且在该方向上仍有数据,那么当到达末尾时,会抑制将滚动传播到父容器。因此,如果有向上的页面,那么滚动到顶部将获得请求,而不是向上滚动整个页面。

如果正在使用外部排序或外部过滤,则只要发生滚动或过滤事件,就会重新加载数据。 在这种情况下,需要调用resetScroll以告知表格不要尝试保留先前的滚动位置。 当重置表格中的数据时,也可以使用此调用, 调用时必须声明此位置向上或者向下是否允许请求数据。

有时可能会删除数据,例如,如果将10页数据保留在内存中,并且在向底部添加数据时开始从顶部丢弃数据。 可以使用dataRemovedTop和dataRemovedBottom声明已丢弃数据,并将滚动设置回删除数据之前的位置。

为了通过以下示例获得更好的性能,您可以选择加载ui-grid.core.js和特定功能文件:

<script src="/release/ui-grid.core.min.js"></script>
<script src="/release/ui-grid.infinite-scroll.min.js"></script>

Example

在此示例中,我们有一个数据集,从5页数据集的第2页开始。 每页有100条记录,所以从记录200开始,可以向上滚动2页,向下滚动2页。 向上移动时应该看到平滑滚动,当到达记录零时,滚动会传播到父页面。 还可以在向下移动时看到平滑滚动,当到达记录499时,滚动会传播到父页面。

我们还会从内存中的数据集中删除数据,只在内存中保存4个页面,因此将丢弃页面并适当地重置scrollUp和scrollDown。 同样,当发生这种情况时,表格仍应保持滚动位置。

最后,我们可以重置数据,这会让我们回到中间页面并将滚动设置到顶部。

代码

index.html

<!doctype html>
<html>
<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="/release/ui-grid.js"></script>
<script src="/release/ui-grid.css"></script>
<script src="app.js"></script>
</head>
<body>
<div><button id="reset" class="button">Reset</button>
First page: {{ $ctrl.firstPage }}     Last page: {{ $ctrl.lastPage }}     data.length: {{ data.length }}
<div class="grid"></div>
</div>
</body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.infiniteScroll']);
 
app.controller('MainCtrl', function ($scope, $http, $timeout) {
    var vm = this;

    vm.gridOptions = {
        infiniteScrollRowsFromEnd: 40,
        infiniteScrollUp: true,
        infiniteScrollDown: true,
        columnDefs: [
            { name:'id'},
            { name:'name' },
            { name:'age' }
        ],
        data: 'data',
        onRegisterApi: function(gridApi){
            gridApi.infiniteScroll.on.needLoadMoreData($scope, getDataDown);
            gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, getDataUp);
            vm.gridApi = gridApi;
        }
    };

    $scope.data = [];

    vm.firstPage = 2;
    vm.lastPage = 2;

    function getFirstData() {
        return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json').then(function(response) {
            var newData = getPage(response.data, vm.lastPage);             
            $scope.data = $scope.data.concat(newData);
        });
    }

    function getDataDown() {
        return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json').then(function(response) {
            vm.lastPage++;
            var newData = getPage(response.data, vm.lastPage);
            vm.gridApi.infiniteScroll.saveScrollPercentage();
            $scope.data = $scope.data.concat(newData);
            return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('up');});
        })
        .catch(function(error) {
            return vm.gridApi.infiniteScroll.dataLoaded();
        });
    }

    function getDataUp() {
        return $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/10000_complex.json').then(function(response) {
            vm.firstPage--;
            var newData = getPage(response.data, vm.firstPage);
            vm.gridApi.infiniteScroll.saveScrollPercentage();
            $scope.data = newData.concat($scope.data);
            return vm.gridApi.infiniteScroll.dataLoaded(vm.firstPage > 0, vm.lastPage < 4).then(function() {checkDataLength('down');});
        })
        .catch(function(error) {
            return vm.gridApi.infiniteScroll.dataLoaded();
        });
    }

    function getPage(data, page) {
        var res = [];
        for (var i = (page * 100); i < (page + 1) * 100 && i < data.length; ++i) {
            res.push(data[i]);
        }
        return res;
    }

    function checkDataLength( discardDirection) {
        // work out whether we need to discard a page, if so discard from the direction passed in
        if( vm.lastPage - vm.firstPage > 3 ){
            // we want to remove a page
            vm.gridApi.infiniteScroll.saveScrollPercentage();

            if( discardDirection === 'up' ){
                $scope.data = $scope.data.slice(100);
                vm.firstPage++;
                $timeout(function() {
                    // wait for grid to ingest data changes
                    vm.gridApi.infiniteScroll.dataRemovedTop(vm.firstPage > 0, vm.lastPage < 4);
                });
            } else {
                $scope.data = $scope.data.slice(0, 400);
                vm.lastPage--;
                $timeout(function() {
                    // wait for grid to ingest data changes
                    vm.gridApi.infiniteScroll.dataRemovedBottom(vm.firstPage > 0, vm.lastPage < 4);
                });
            }
        }
    }

    vm.reset = function() {
        vm.firstPage = 2;
        vm.lastPage = 2;

        // turn off the infinite scroll handling up and down - hopefully this won't be needed after @swalters scrolling changes
        vm.gridApi.infiniteScroll.setScrollDirections( false, false );
        $scope.data = [];

        getFirstData().then(function(){
            $timeout(function() {
                // timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
                vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
            });
        });
    };

    getFirstData().then(function(){
        $timeout(function() {
            // timeout needed to allow digest cycle to complete,and grid to finish ingesting the data
            // you need to call resetData once you've loaded your data if you want to enable scroll up,
            // it adjusts the scroll position down one pixel so that we can generate scroll up events
            vm.gridApi.infiniteScroll.resetScroll( vm.firstPage > 0, vm.lastPage < 4 );
        });
    });
});

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

最近要用到Laravel的队列,官方文档推荐了Supervisor,进程守护程序平时用的比较少,看到文档上的操作过程有点懵。

同事推荐了PM2,PM2是Node.js提供的进程守护工具。

先安装nodejs,然后执行npm install pm2 -g,安装完毕。

这个…确实安装简单,对新手用户友好。

代码也准备好了,万事必备,准备开撸。

文档上的命令都是关于js的,依葫芦画瓢运行了几个命令都报错了。

一番查找,才找到了PM2启动laravel队列命令

最终命令:

pm2 start artisan --name laravel-worker --interpreter php -- queue:work --daemon

感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 210 Selection

此示例使用 ui-grid-selection 指令来选择行。若要启用, 必须包括 “ui.grid.selection” 模块, 并且必须在表格元素上写入 ui-grid-selection指令。

选择功能的文档在 api 文档中提供, 特别是:

  • gridOptions
  • publicApi
    使用 gridOptions onRegisterApi 回调在选定行时注册 rowSelectionChanged 事件和日志。默认情况下, 选择功能将选择更改划分为批处理事件和单个事件, api 中提供了两个不同的事件。通过设置 enableSelectionBatchEvent: false, 您可以使它改为只调用循环中的单个事件, 这在做客户端而不是服务器端处理更改时可能会很有用。

默认情况下, 该模块将提供一个可以选择单个行的复选框。如果将 gridOption 中的enableRowHeaderSelection 设置为 false, 则会隐藏该复选框, 不过仍然可以通过单击该行来选择。你可以看到, 在本教程中的 grid1 通过查看 浏览器的 控制台。

如果要允许同时单击该行, 也可以单击 rowHeader, 则可将 enableFullRowSelection 设置为 true。

在 gridOption 中的 设置multiSelect 为 true 将允许选择多个行, 设置为 false 将允许每次只选择一行。

如果 multiSelect:false, 则附加选项 noUnselect 将意味着始终选择行。您可以选择其他行 (这将取消选中当前行), 但不能通过单击来手动取消选中当前行。这意味着, 除了第一次打开表格时, 至少总是选择一行。如果需要, 可以初始化选择一行后, 打开页面。第二个表格说明了这一点。

如果 multiSelect:true, 则可以使用另一个选项 modifierKeysToMultiSelect。如果设置为 true, 则仅当选择了 ctrl 键、cmd 键 (mac) 或 shift 键时才允许选择多个行, 如果设置为 false, 则允许通过逐个单击来选择多个行。

默认情况下, selectAll 框显示在 rowHeader 的顶部。如果multiSelect设置为 true, 则将允许您选择所有可见行。请注意, selectAll 不监视新数据, 因此, 如果使用的是 selectAll 函数, 并且将数据添加到表格中, 则需要检查 grid.api.selection.getSelectAllState, 如果当前已打勾, 则在添加数据后手动调用 grid.api.selection.selectAllVisibleRows。

通过将 enableSelectAll 设置为 false, 可以禁用 selectAll 框。

通过设置 “selectionRowHeaderWidth” 选项, 可以设置选择行标题列的宽度。

可以使用 isRowSelectable 函数来确定哪些行是可选择的。如果在网格初始后的选项中设置此函数, 则需要调用 gridApi. notifyDataChange (uiGridConstants datachange 选项) 以启用该选项。在下面的网格中按下按钮 “设置可选” 将设置任何有年龄30的行不能被选择, 并且还将第一行的年龄设置为31。

Example

提供了两个例子, 第一个与 rowHeaderSelection 和 multi-select, 第二个没有。第一个示例在加载数据后 auto-selects 第一行。

代码
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button type="button" class="btn btn-success" ng-click="toggleMultiSelect()">Toggle multiSelect</button>  <strong>MultiSelect:</strong> <span ng-bind="gridApi.grid.options.multiSelect"></span>
      <button type="button" class="btn btn-success" ng-click="toggleRow1()">Toggle Row 0</button>
      <br/>
      <br/>
      <button type="button" class="btn btn-success" ng-click="toggleModifierKeysToMultiSelect()">Toggle modifierKeysToMultiSelect</button>  <strong>ModifierKeysToMultiSelect:</strong> <span ng-bind="gridApi.grid.options.modifierKeysToMultiSelect"> </span>
      <br/>
      <br/>
      <button type="button" class="btn btn-success" ng-disabled="!gridApi.grid.options.multiSelect" ng-click="selectAll()">Select All</button>
      <button type="button" class="btn btn-success" ng-click="clearAll()">Clear All</button>
      <button type="button" class="btn btn-success" ng-click="setSelectable()">Set Selectable</button>
      <button type="button" class="btn btn-success" ng-click="toggleFullRowSelection()">Toggle full row selection</button>
      <br/>

      <div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
    </div>
    <div ng-controller="SecondCtrl">
      Single selection grid without rowHeader, and allowing rowSelection to be toggled on and off dynamically:
      <br/>
      <button type="button" class="btn btn-success" ng-click="toggleRowSelection()">Toggle rowSelection</button>  <strong>rowSelection:</strong> <span ng-bind="gridApi.grid.options.enableRowSelection"></span>
      <div ui-grid="gridOptions" ui-grid-selection 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.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', 'uiGridConstants', function ($scope, $http, $log, $timeout, uiGridConstants) {
  $scope.gridOptions = {
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35,
    rowHeight: 35,
    showGridFooter:true
  };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

  $scope.gridOptions.multiSelect = true;

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      $timeout(function() {
        if($scope.gridApi.selection.selectRow){
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        }
      });
    });

    $scope.info = {};

    $scope.toggleMultiSelect = function() {
      $scope.gridApi.selection.setMultiSelect(!$scope.gridApi.grid.options.multiSelect);
    };

    $scope.toggleModifierKeysToMultiSelect = function() {
      $scope.gridApi.selection.setModifierKeysToMultiSelect(!$scope.gridApi.grid.options.modifierKeysToMultiSelect);
    };

    $scope.selectAll = function() {
      $scope.gridApi.selection.selectAllRows();
    };

    $scope.clearAll = function() {
      $scope.gridApi.selection.clearSelectedRows();
    };

    $scope.toggleRow1 = function() {
      $scope.gridApi.selection.toggleRowSelection($scope.gridOptions.data[0]);
    };

    $scope.toggleFullRowSelection = function() {
      $scope.gridOptions.enableFullRowSelection = !$scope.gridOptions.enableFullRowSelection;
      $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
    };

    $scope.setSelectable = function() {
      $scope.gridApi.selection.clearSelectedRows();

      $scope.gridOptions.isRowSelectable = function(row){
        if(row.entity.age > 30){
          return false;
        } else {
          return true;
        }
      };
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);

      $scope.gridOptions.data[0].age = 31;
      $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.EDIT);
    };

    $scope.gridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.gridApi = gridApi;
      gridApi.selection.on.rowSelectionChanged($scope,function(row){
        var msg = 'row selected ' + row.isSelected;
        $log.log(msg);
      });

      gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        var msg = 'rows changed ' + rows.length;
        $log.log(msg);
      });
    };
}]);

app.controller('SecondCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;
  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;
  };

  $scope.toggleRowSelection = function() {
    $scope.gridApi.selection.clearSelectedRows();
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;

      // $interval whilst we wait for the grid to digest the data we just gave it
      $interval( function() {$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);
    });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:Tutorial: 209 Grouping

分组功能允许您根据特定列中的相似值对行进行分组, 在某些方面类似于 excel 数据透视表的效果。不按分组的列可以聚合, 例如, 统计每个组中的行数。

api 文档中提供有”分组” 的功能, 包括分组本身和 treeBase 文档中的共享函数。特别是:

grouping columnDef and treeBase columnDef
grouping gridOptions and treeBase gridOptions
grouping publicApi and treeBase publicApi
树结构本身被记录在 treeBase。

可以在 columnDef 选项中来设置分组:
grouping: { groupPriority: 0 }
或为列中的聚合设置 treeAggregation: {type: uiGridGroupingConstants.aggregation.COUNT}.

默认情况下分组列会显示在前面, 这将提供更直观的效果。为了避免对pinning 的依赖关系, 是将分组的列作为整体来移动的, 而不是使用pinning 功能。

分组有排序功能, 允许用户更改排序顺序或使用外部排序功能, 并将结果分组。标记为分组的列排序优先级最高。

任何分组的列都有 suppressRemoveSort 设置, 当列被取消分组时, suppressRemoveSort 将返回到 columnDef 中的值。

分组和聚合应与筛选一起使用, 它应只对筛选的行进行分组和聚合。

无法编辑组页眉行, 如果使用选择功能, 则无法选择。但是, 它们可以被导出。

默认情况下, 组 rowHeader 始终可见。如果希望 groupRowHeader 仅在至少一列分组时出现, 则可以在gridOption中设置 treeRowHeaderAlwaysVisible: false

表格初始化之后更改分组, 可以调用以下方法:

groupColumn:对单个列进行分组。将其添加到当前分组的末尾, 因此, 如果希望这是唯一的分组, 首先需要删除现有的分组列。添加一个asc排序 , 如果没有一个
ungroupColumn:取消单个列
aggregateColumn:设置列的聚合, 包括关闭聚合。首先自动删除任何排序。
setGrouping:将所有分组集中在一个序列中, 删除现有分组
getGrouping:获取表格的分组配置
clearGrouping:清除当前分组设置
以下几点需要注意:
– treeIndent:随着分组级别的加深, 展开按钮将缩进多个像素 (默认为 10)。更大的值看起来更好, 但占用更多的空间。
– treeRowHeaderWidth:分组行标题的宽度
– customTreeAggregationFinalizerFn:如果列有一个 cellFilter, 则插入文本 (例如 “min: xxxx”) 通常会破坏 cellFilter。可以定义一个自定义聚合终结器, 以不同的方式处理此文本, 可以在代码中应用筛选, 或者跳过包含的聚合文本。这也可以用来跳过计数的统计。

如果要取消分组列中的数据 (只显示在groupHeader 行中), 则可以通过对允许分组的任何列重写 cellTemplate, 如下所示:

cellTemplate: '<div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div>'

在下面的示例中, 此操作仅在状态列上完成。这不包括在基本代码中, 因为它可能与用户的自定义模板进行交互。

调整聚合工作的方式可以通过定义 columnsProcessor (比 groupingColumnProcessor 更高 (更高) 的优先级 (高于 400), 以及查找分组或聚合列并更改诸如 treeAggregationFn 或 customTreeAggregationFinalizerFn 的内容来完成。有关示例, 请参见教程320。

Example

在这个例子中, 先按 “状态” 列,然后是 “性别” 列, 统计名称 , 并找到每个分组的最大年龄, 最后计算平均余额。我们禁止在 “平衡” 列上显示聚合文本, 因为我们希望将其格式化为货币… 但这意味着我们不能轻易地看到它是一个平均值。

我们编写一个函数来提取状态和性别的聚合数据 (如果您更改了分组, 则此函数将停止工作), 并将它们写入控制台。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <button id="expandAll" type="button" class="btn btn-success" ng-click="expandAll()">Expand All</button>
      <button id="toggleFirstRow" type="button" class="btn btn-success" ng-click="toggleRow(0)">Toggle First Row</button>
      <button id="toggleSecondRow" type="button" class="btn btn-success" ng-click="toggleRow(1)">Toggle Second Row</button>
      <button id="changeGrouping" type="button" class="btn btn-success" ng-click="changeGrouping()">Change Grouping</button>
      <button id="getAggregates" type="button" class="btn btn-success" ng-click="getAggregates()">Get Aggregates</button>
      <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
  $scope.gridOptions = {
    enableFiltering: true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs: [
      { name: 'name', width: '30%' },
      { name: 'gender', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' }, width: '20%', cellFilter: 'mapGender' },
      { name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, width: '20%' },
      { name: 'company', width: '25%' },
      { name: 'registered', width: '40%', cellFilter: 'date', type: 'date' },
      { name: 'state', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '35%', cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>' },
      { name: 'balance', width: '25%', cellFilter: 'currency', treeAggregationType: uiGridGroupingConstants.aggregation.AVG, customTreeAggregationFinalizerFn: function( aggregation ) {
        aggregation.rendered = aggregation.value;
      } }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      for ( var i = 0; i < data.length; i++ ){
        var registeredDate = new Date( data[i].registered );
        data[i].state = data[i].address.state;
        data[i].gender = data[i].gender === 'male' ? 1: 2;
        data[i].balance = Number( data[i].balance.slice(1).replace(/,/,'') );
        data[i].registered = new Date( registeredDate.getFullYear(), registeredDate.getMonth(), 1 )
      }
      delete data[2].age;
      $scope.gridOptions.data = data;
    });

  $scope.expandAll = function(){
    $scope.gridApi.treeBase.expandAllRows();
  };

  $scope.toggleRow = function( rowNum ){
    $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);
  };

  $scope.changeGrouping = function() {
    $scope.gridApi.grouping.clearGrouping();
    $scope.gridApi.grouping.groupColumn('age');
    $scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT);
  };

  $scope.getAggregates = function() {
    var aggregatesTree = [];
    var gender

    var recursiveExtract = function( treeChildren ) {
      return treeChildren.map( function( node ) {
        var newNode = {};
        angular.forEach(node.row.entity, function( attributeCol ) {
          if( typeof(attributeCol.groupVal) !== 'undefined' ) {
            newNode.groupVal = attributeCol.groupVal;
            newNode.aggVal = attributeCol.value;
          }
        });
        newNode.otherAggregations = node.aggregations.map( function( aggregation ) {
          return { colName: aggregation.col.name, value: aggregation.value, type: aggregation.type };
        });
        if( node.children ) {
          newNode.children = recursiveExtract( node.children );
        }
        return newNode;
      });
    }

    aggregatesTree = recursiveExtract( $scope.gridApi.grid.treeBase.tree );

    console.log(aggregatesTree);
  };
}])
.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'
  };

  return function(input) {
    var result;
    var match;
    if (!input){
      return '';
    } else if (result = genderHash[input]) {
      return result;
    } else if ( ( match = input.match(/(.+)( \(\d+\))/) ) && ( result = genderHash[match[1]] ) ) {
      return result + match[2];
    } else {
      return input;
    }
  };
});

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:208 Save and restore state

“保存状态” 功能允许保存表格的当前外观, 并在返回到表格后恢复。

例如, 在应用程序中, 用户可以重新排列序、调整列宽、应用排序和筛选, 并选择特定的单元格。当用户把当前表格调整为自己喜欢的界面后, 跳转到另一个页面。然后重新返回这个页面时, 他们可能会期望它看起来像在他们离开时那样。保存状态功能就是这个作用。

saveState 功能的文档在 api 文档中提供, 特别是:

  • gridOptions
  • publicApi
    有两种核心方法:

  • save(保存),将表格当前状态打包成对象,然后将其存储到某个位置的对象 (cookie、会话状态、数据库)

  • restore(恢复), 获取表格状态对象, 并将表格返回到该对象中存储的状态

请注意, saveState 功能特意设置为存储瞬态状态-不在 gridOptions 或 columnDefs 中保存的信息。调用应用程序负责存储 gridOptions 和 columnDefs (并且必须有它们, 以便第一次呈现表格)。

该功能还提供了一些控制保存内容的选项。默认情况下, 所有选项都为 true:

  • saveWidths
  • saveOrder
  • saveScroll
  • saveFocus
  • saveVisible
  • saveSort
  • saveFilter
  • savePinning
  • saveGrouping
  • saveGroupingExpandedStates
  • saveTreeView
  • saveSelection
    例子
    在此示例中, 我们提供了一个按钮来保存表格状态。然后, 您可以将表格布局修改为不同的内容, 并使用 “还原” 按钮将表格设置为之前的状态。

代码
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div id="gridSaveState" ui-grid="gridOptions" ui-grid-save-state ui-grid-selection ui-grid-cellNav ui-grid-resize-columns ui-grid-move-columns ui-grid-pinning ui-grid-grouping class="grid"></div>
      <button id="save" type="button" class="btn btn-success" ng-click="saveState()">Save</button>
      <button id="restore" type="button" class="btn btn-success" ng-click="restoreState()">Restore</button>
    </div>
  </body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.saveState', 'ui.grid.selection', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.pinning', 'ui.grid.grouping' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
  $scope.gridOptions = {
    saveFocus: false,
    saveScroll: true,
    saveGroupingExpandedStates: true,
    enableFiltering: true,
    columnDefs: [
      { name: 'name' },
      { name: 'gender' },
      { name: 'company' }
    ],
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };
  $scope.state = {};

  $scope.saveState = function() {
    $scope.state = $scope.gridApi.saveState.save();
  };

  $scope.restoreState = function() {
    $scope.gridApi.saveState.restore( $scope, $scope.state );
  };

  $http.get('http://ui-grid.info/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:207 Importing Data

导入程序功能允许导入到 csv 或 json 格式的数据。导入程序可以使用表格中的菜单, 或者接受由用户实现的自定义文件选取电脑中的文件。

导入程序功能以 json 或 csv 格式导入文件, 如果需求存在, 则可以扩展到其他文件格式。

api 文档中提供了导入器功能的文档, 特别是:

  • gridOptions
  • publicApi

对于 json 格式文件, 将假定接收的元素与列匹配. 字段属性在gridOptions 的 columnDefs, 并被加载到所提供的实体。对于 csv 文件, 数据将映射到 columnDefs, 其中包含 csv 标题行中的列需要匹配 column.name或column.displayName。可以选择提供将标题映射到列的自定义column.name, 而这将改为使用, 您可以用它来实现自定义的 “列选取器” 类型例程。如果在标题上使用国际化 (比方说, 通过添加 cellHeaderFilter), 则还可以选择将筛选函数传递到 importerHeaderFilterCallback 例程中。此例程将被调用displayName 以尝试匹配翻译的文本, 如果您提供此例程, 它必须返回立即翻译, 而不是一个 promise-所以如果使用angular-translate, 您需要使用$translate.instant。

您可以选择提供一个自定义函数, 在每个实体中映射导入的数据, 请参考 importerObjectCallback 的文档。

若要使用导入程序, 需要在表格上引入ui-grid-importer指令, 并且必须提供一个 gridOptions. importerDataAddCallback 函数, 将创建的对象添加到数据数组中。您还需要安装 csv-js库, bower install 安装-savedev csv-js。您可以通过使用 globals 来配置 csv-js 库,例如 CSV.DETECT_TYPES = false;有关更多信息, 请参见 {https://github.com/gkindel/CSV-JS csv 文档}。

可以在 ui.grid.importer 找到导入程序功能的配置和 API 。

导入程序将菜单项添加到表格菜单中, 使用 gridOption enableGridMenu 启用表格菜单。您可以通过设置 importerShowMenu 来关闭导入菜单 importerShowMenu: false.

例子
在此示例中, 我们使用表格菜单导入文件。您需要从文件系统中提供一个文件以使用本教程, 您可以复制任何导入. json 或导入. csv 作为测试文件。

表格将开始为空, 并且在导入文件后将 auto-populate 列定义和数据 (在许多用法中, 您将在前面定义列定义, 此示例说明这样做不是强制性的)。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-importer class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
  $scope.data = [];
  $scope.gridOptions = {
    enableGridMenu: true,
    data: 'data',
    importerDataAddCallback: function ( grid, newObjects ) {
      $scope.data = $scope.data.concat( newObjects );
    },
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };
}]);

import.json:

[{"Name":"John Smith","Gender":"male","Company":"TestIcon"},
 {"Name":"Jane Doe","Gender":"female","Company":"FastTruck"}]

import.csv:

"Name","Gender","Company"
"John Smith","male","TestIcon"
"Jane Doe","female","FastTrucks"

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:206 Exporting Data

导出功能允许将数据从表格中导出为 csv 或 pdf 格式,可以导出所有数据、可见数据或所选数据。

要使用导出功能, 需要在表格上引入 ui-grid-exporter指令。如果要导出选定的行, 则必须在表格上引入 ui-grid-selection指令。如果要导出为 pdf, 您需要安装 pdfMake, 可通过以下操作:

bower install pdfmake

ui.grid.exporter的api可以在 下列中使用:
– columnDef
– gridOptions
– publicApi

导出选项在表格的菜单栏中, 可以在gridOption 中通过enableGridMenu来启用表格菜单。
请注意, 如果选择了数据, 则仅显示导出所选数据的选项。

如果您使用 internet explorer, 那么 pdf 将自动下载而不是打开, 有问题与 pdfMake 无法自动打开选项卡在 ie 浏览器(请参阅该地址中的其他问题。 https://github.com/bpampuch/pdfmake/issues/16)

一些早期版本的 excel 不喜欢 utf-16 bom–第一个表示 csv 文件包含 utf-16 内容的少数字符。大多数其他应用程序和较新的 excel 版本都可以成功地使用它。如果excel 中的前几个字符有乱码的问题, 可以尝试设置 exporterOlderExcelCompatibility: true

你可能会发现这个问题, 当 pdfMake 在压缩时, 可能会发生错误。如果您有这个问题, 建议改为包括 pdfmake. js 和 vfs_fonts. 作为素材(或等效的素材版本), 然后将它们作为脚本包含在应用程序中, 而不是作为整个 javascript 库的一部分。

例子
在本示例中, 我们使用表格菜单按钮, 同时显示 pdf 和 csv 导出选项。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

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

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'gender', visible: false},
      { field: 'company' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
    exporterPdfFooter: function ( currentPage, pageCount ) {
      return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
    },
    exporterPdfCustomFormatter: function ( docDefinition ) {
      docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
      docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
      return docDefinition;
    },
    exporterPdfOrientation: 'portrait',
    exporterPdfPageSize: 'LETTER',
    exporterPdfMaxGridWidth: 500,
    exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
  };

  $http.get('http://ui-grid.info/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });

}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:205 Row Edit Feature

ui.grid.rowedit 扩展了编辑功能, 以支持对服务器保存数据的回调, 该数据同时保存了 “行”。此功能尝试给用户一个类似于 电子表格 的体验, 以便他们可以编辑他们希望的任何字段, 并且该功能将试图保存数据 “行”。在数据不会产生错误的程度上, 从用户的角度来看, 保存过程几乎是无形的–保存后变灰色, 和不能编辑的灰色, 用户就像数据是本地的一样进行编辑。

rowEdit 功能的文档在 api 文档中提供, 特别是:

  • gridOptions
  • publicApi
    每一行在任何时间点都是四状态之一:

  • clean:未进行编辑 (或自上次保存后没有编辑)

  • isDirty:已进行编辑, 但数据尚未保存, 因为用户仍在编辑该行, 或者因为计时器尚未触发
  • isSaving:保存此行的回调已被调用, 尚未返回。此行在这段时间内不可编辑, 并显示为灰色, 以避免用户再次编辑行导致锁定异常
  • isError:保存回调返回了一个错误。该行仍显示已更新的数据, 但将显示为红色
    基本的操作方法是, 每当编辑单元格时 (使用 “编辑” 标识), 就会在该行上设置一个 isdirty 标志, 并设置一个 saveTimer。如果同一行中的另一个单元格在2秒钟内开始编辑 (或其他可配置的时间), 则计时器将再次被销毁。否则, 在完成该行的计时器将设置为 isSaving 和灰色的状态, 并且将调用 saveRow 事件。此事件调用的函数必须调用 rowEdit. setSavePromise, rowEdit 功能将等待该异步。

如果还启用了 cellNav 功能, 则该行内单元格上的 setFocus 就足以延迟计时器 (更容易地处理某些列是可编辑的情况, 用户选项卡或单击同一行上的 non-editable 字段)。

如果成功执行了该异步, 则该行将被设置回clean。如果异步被拒绝, 则该行设置为 isError的状态。

或者, 调用应用程序可以请求 flushDirtyRows, 这将触发所有当前行的脏检查保存事件。如果 rowEditWaitInterval grid option设置为-1, 那么保存将永远不会由计时器触发, 并且只在手动调用时触发。

提供的方法和属性以此制度操作:

  • getDirtyRows(): 返回当前所有行脏检查的 gridRows 数组
  • getErrorRows():返回所有当前错误行的 gridRows 数组
  • flushDirtyRows(): 将当前所有行的脏检查 刷新到服务器, 可能在页面导航请求或按保存按钮时使用
  • saveRow( rowEntity ): 当行准备保存时调用的事件
  • rowEditWaitInterval: grid option控制在触发保存之前等待的时间 (ms)
    在本示例中, 行在移开后2秒钟保存, 而保存是伪造的, 使用超时为3秒, 因此每个保存都需要3秒钟才能完成。性别为”male”行的保存都会出错。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 600px;
  height: 450px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'addressFormatter']);

angular.module('addressFormatter', []).filter('address', function () {
  return function (input) {
      return input.street + ', ' + input.city + ', ' + input.state + ', ' + input.zip;
  };
});

app.controller('MainCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
  $scope.gridOptions = {};

  $scope.gridOptions.columnDefs = [
    { name: 'id', enableCellEdit: false },
    { name: 'name', displayName: 'Name (editable)' },
    { name: 'gender' },
    { name: 'age', displayName: 'Age' , type: 'number'},
    { name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"'},
    { name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address'},
    { name: 'address.city', displayName: 'Address (even rows editable)',
         cellEditableCondition: function($scope){
         return $scope.rowRenderIndex%2
         }
    },
    { name: 'isActive', displayName: 'Active', type: 'boolean'}
  ];

  $scope.saveRow = function( rowEntity ) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval( function() {
      if (rowEntity.gender === 'male' ){
        promise.reject();
      } else {
        promise.resolve();
      }
    }, 3000, 1);
  };

  $scope.gridOptions.onRegisterApi = function(gridApi){
    //set gridApi on scope
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
  };

  $http.get('http://ui-grid.info/data/500_complex.json')
  .success(function(data) {
    for(i = 0; i < data.length; i++){
      data[i].registered = new Date(data[i].registered);
    }
    $scope.gridOptions.data = data;
  });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文:204 Column Resizing

“调整列大小” 功能允许调整每个列的大小。

要启用, 必须包含 “ui.grid.resizeColumns” 模块, 并且必须在表格元素上包括 ui-grid-resize-columns 的指令。

“调整列大小” 功能的文档在 api 文档中提供, 特别是:

  • columnDef
  • gridOptions
  • publicApi
    可以将单独的列设置为not resizeable,如果这样做, 建议将这些列设置固定的像素宽度,否则, 如果其他列的大小减小,则可能会自动调整大小以填满剩余空间,并且不会再减小其宽度。

当调整列的大小时 其他具有固定宽度或已调整大小的列会保留其宽度。所有其他列都调整大小以占用剩余空间。只要左边列有一个可变列, 表格的列将不会减少到整个表格宽度以内,但一旦调整了所有列的大小, 最终就可以得到小于表格宽度的总列宽。

angular.module('yourApp', ['ui.grid', 'ui.grid.resizeColumns']);
<div ui-grid="gridOptions" class="grid" ui-grid-resize-columns></div>

如果出于某种原因, 希望使用 ui-grid-resize-columns的指令, 但不允许进行列调整, 则可以显式将该选项设置为 false。这可以防止表格调整大小, 而不需要在 colDef 选项中单独设置。

$scope.gridOptions = {
  enableColumnResizing: false
};

通过将 enableColumnResizing 属性设置为 false, 可以在列定义中禁用它。

$scope.gridOptions = {
  enableColumnResizing: true,
  columnDefs: [
    { field: 'name' },
    { field: 'gender', enableColumnResizing: false },
    { field: 'company' }
  ]
};

代码
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <strong>Drag</strong> a the column separator to resize; <strong>double-click</strong> to size according to rendered column contents.
      <br>
      <br>
      The column will obey any <i>minWidth</i> or <i>maxWidth</i> constraints you give it.
      <br>
      <br>
      <div ui-grid="gridOptions" class="grid" ui-grid-resize-columns ui-grid-move-columns></div>
    </div>
  </body>
</html>

main.css

.grid {
    width: 500px;
    height: 400px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', minWidth: 200, width: 250, enableColumnResizing: false },
      { field: 'gender', width: '30%', maxWidth: 200, minWidth: 70 },
      { field: 'company', width: '20%' }
    ]
  };

  $http.get('http://ui-grid.info/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

Demo
列服从设置中的 minWidth 或 maxWidth 约束。

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

原文: 203 Pinning

锁定功能允许用户将列向左或向右锁定。要启用, 必须包括 “ui.grid.pinning” 模块, 并且必须在表格元素上写上 ui-grid-pinning指令。

在 api 文档中提供了固定功能的文档, 特别是:
– columnDef
– gridOptions
– publicApi

还可以禁用列级别上的锁定。请注意下面示例中的 “id” 列定义。

代码:
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.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/release/ui-grid.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" class="grid" ui-grid-pinning></div>
    </div>
  </body>
</html>

main.css

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

app.js

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

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
  $scope.gridOptions = {};

  $scope.gridOptions.columnDefs = [
    { name:'id', width:50, enablePinning:false },
    { name:'name', width:100, pinnedLeft:true },
    { name:'age', width:100, pinnedRight:true  },
    { name:'address.street', width:150  },
    { name:'address.city', width:150 },
    { name:'address.state', width:50 },
    { name:'address.zip', width:50 },
    { name:'company', width:100 },
    { name:'email', width:100 },
    { name:'phone', width:200 },
    { name:'about', width:300 },
    { name:'friends[0].name', displayName:'1st friend', width:150 },
    { name:'friends[1].name', displayName:'2nd friend', width:150 },
    { name:'friends[2].name', displayName:'3rd friend', width:150 },
  ];

  $http.get('http://ui-grid.info/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。