标签: angular-ui-grid

我正在使用ui-grid在表格中显示数据.当我加载页面并离开几秒钟然后单击选项卡(包含ui-grid)时,ui-grid css break.它没有显示100%容器的ui-grid宽度.但是当我加载页面并且只需单击tab(包含ui-grid)时.ui-grid显示完美,我的意思是宽度是容器的100%.我不知道是什么问题.这是代码,我正在努力:

JS:

$scope.gridOptions= {
            enableFiltering: true,
            enableGridMenu : true,
            enableRowSelection: true,
            enableSelectAll: true,

            selectionRowHeaderWidth: 50,
            // rowHeight: 35,
            // infiniteScrollRowsFromEnd: 50,
            // infiniteScrollUp: true,
            infiniteScrollDown: true,
            columnDefs : [
              { displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
              { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
              { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
            ]
}

HTML:

<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>

注意: ui-grid位于Angular bootstrap Tab中

这是崩溃网格的快照:

https://jsfiddle.net/4byyuqtc/1/

我想在选择分组线时让ui-grid选择分组下的所有"子".在这种情况下Kit Kat(1),Goodbar先生(1),Krackel(2)并最终选择实际记录(非粗线).人们可以预期,当在分组中选择父母时,所有孩子也会被选中.

目前,当选择数据中的实际记录(非粗体线)上方的1个分组时,它会使用以下代码选择那些实际记录:

$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
    console.log(rowChanged.treeLevel);
    if (typeof (rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
        // this is a group header
        children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
        console.log(children);
        children.forEach(function (child) {
            if (rowChanged.isSelected) {
                $scope.gridApi.selection.selectRow(child.entity);
            } else {
                $scope.gridApi.selection.unSelectRow(child.entity);
            }
        });
    }
});

此时我对ui-grid的经验不足以弄清楚如何循环选定行的子项并选择所有行.

[编辑]

使用Paul的代码,它不会选择分组,但它更接近.这个截图是我选择第337条记录.请注意它选择该记录和所有最低子记录(这是好的,因为最终那些是重要的),但在视觉上分组的记录(MFG和项目描述组)没有被选中,需要是因为用户不会永远打开最低的数据记录,以便他们看到所选的组.

我正在使用ui-grid.但我无法从下载功能获得$ scope.gridApi.并得到错误:无法读取未定义的属性"选择".有人可以告诉我原因吗？谢谢.

    $scope.gridOptions.onRegisterApi = function (gridApi) {
        $log.info('gridApi...');
        $scope.gridApi = gridApi;
        $log.info($scope.gridApi);
    };
    $scope.download = function ($event) {
        $event.stopPropagation();
        var selectedRows = $scope.gridApi.selection.getSelectedRows();
        $log.log('selectedRows....');
        $log.log(selectedRows);
    };

在AngularJS ui-grid中,如何配置网格,以便在渲染时根据内容自动调整列的宽度？

我知道有一个教程显示自动大小功能,但只有当你双击列时才有效,我希望它可以在网格启动时发生.

我似乎无法在新的ngGrid(ui-Grid)rc build v3.0.0-rc.11中使用任何分页或列重新调整大小.根据这个例子,它应该是非常直接的:http: //ui-grid.info/docs/#/tutorial/401_AllFeatures

对于我的主要div,如果我这样做:

<div ui-grid="productGridOptions"  ui-grid-resize-columns class="uiGridProducts">

并在我的控制器中执行此操作:

$scope.productGridOptions={};       


         $scope.productGridOptions.enableColumnResizing = true;
         $scope.productGridOptions.enableFiltering = false;
         $scope.productGridOptions.enablePaging = true;

         $scope.productGridOptions.pagingOptions = {
                    pageSizes: [250, 500, 1000],
                    pageSize: 250,
                    currentPage: 1
         };


         $scope.productGridOptions.rowIdentity = function(row) {
            return row.id;
          };

         $scope.productGridOptions.getRowIdentity = function(row) {
            return row.id;
         };

         $scope.productGridOptions.data = 'products';

        //The options for the data table    
        $scope.productGridOptions.columnDefs = [
                  { name:'ID', field: 'id' },
                  { name:'Product', field: 'productName' },
                  { name:'Active Ing.', field: 'activeIngredients'},
                  { name:'Comments', field: 'comments' } …

我在我的ui-grid的columDefs中使用了headerCellTemplate(不是ng-grid,而是新的重写).在html中我有一个复选框.本质上我试图在列的标题中添加一个复选框,这是所有复选框,所以我可以检查所有/无.单元格使用复选框呈现正常.问题是标题中复选框中的ng-change永远不会触发事件.此外,ng模型值永远不会改变.查看代码时,有一个名为uiGridHeaderCell的指令,所以我必须假设它正在吞噬我的事件以及处于自己的范围内,所以它永远不会在我的范围内设置变量.

有什么方法吗？我遇到的每个例子都没有任何人试图从标题中调用自己的方法(即调用指令范围之外的东西).

我是新手ui-grid,我正在尝试在AngularJS中实现一个表,如下图所示.我正在尝试选择一行并使用该特定行上的删除按钮将其删除.该ui-grid文件要求我们用的gridApi,但我不能找到同样足够的文件.

如何格式化ui-grid中列的聚合值？

随着我的数字,我得到了一些可怕的东西

total: 6370.046074130321

什么时候我想

total: $6370.05

我试过两个:

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{COL_FIELD | currency}}</div>',

和

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col) | currency}}</div>',

但它们都不起作用.

我正在使用带有ui-grid的angularjs.网格的一列包含一个时间戳,我想将其呈现为格式正确的日期.

到目前为止,我尝试过这样,但从未调用过该函数.

  $scope.formatDate = function(date) {
    return '42';
  };

  $scope.columns = [
    {field: 'date', cellTemplate: '<div class="ui-grid-cell-contents">formatDate({{row.entity.date}})</div>'},
    {field: 'title'},
    {field: 'quantity'},
    //[...]
  ];

相反,函数调用被视为字符串文字.因此,该列始终显示formatDate(*timestamp*).

我只是通过在接收它们时在每一行上定义一个函数来找到一种不令人满意的方法来实现它:

  $scope.columns = [
    {field: 'getFormattedDate()'},
    //[...]
  ];

  $http.post('/api/data/').success(function (data) {
    $scope.gridOptions.data = data.elements;

    $scope.gridOptions.data.forEach(function(row) {
      row.getFormattedDate = function() {
        return '42';
      }
    })
  });

还有更好的建议吗？

我正在尝试添加一个glyphicon glyphicon-thlist(我可以单击并调用控制器函数)到默认标题的左侧.我采用了默认标头并尝试操纵它来执行此操作.默认标题位于:https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html

我把它改成了下面,但结果是我最终得到了2行.顶行左侧有我的图标,右边是排序下拉列表,然后第二行有列标题,当您单击切换排序asc/desc时.我不是最好的,所以想知道我怎么能把所有这些都放在同一条线上(只有一行我的列表图标位于左侧,右侧是列标签,然后是排序下拉列表箭头).

<div
  role="columnheader"
  ng-class="{ 'sortable': sortable }"
  ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
  aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
  <div
      role="button"
      tabindex="0"
      ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"
      class="glyphicon glyphicon-th-list"
      ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
      ng-click="editOptionValues($event)"
      ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"
      ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
      aria-haspopup="true">
  </div>
  <div
    role="button"
    tabindex="0"
    class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
    col-index="renderIndex"
    title="TOOLTIP">
    <span
      class="ui-grid-header-cell-label"
      ui-grid-one-bind-id-grid="col.uid + '-header-text'">
      {{ col.displayName CUSTOM_FILTERS }}
    </span>

    <span
      ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'" …