标签: angular-ui-grid

使用Angular ui-grid时的列标题包装

我已将AngularJS SPA应用程序升级ng-grid v2.0.7到,ui-grid v3并且我的列标题不再包含在内.我的列标题现在是单行...标题,并在列标题不适合时显示省略号.

此功能是否已被删除或是否已被其他方法取代?

angularjs ng-grid angular-ui-grid

10
推荐指数
1
解决办法
2万
查看次数

从angularjs ui-grid菜单中删除聚合菜单项

ui-grid官方网站(例如上http://ui-grid.info/docs/#/tutorial/209_grouping)提出了一种分组功能,它看起来像这样: 在此输入图像描述

我想要Grouping菜单项,但没有Aggregate列菜单中的那些(计数,总和,最大值,最小值,平均值),我找不到解除它们的方法.

我试过的解决方案是uiGridGroupingService通过为groupingColumnBuilder提供装饰器来覆盖它,但是服务根本没有解决,我不禁想知道是否有更简单的方法来实现这一点.

有人知道这个问题的任何解决方案吗?

angularjs angular-ui-grid

9
推荐指数
3
解决办法
3976
查看次数

禁用UI-Grid中特定列的过滤

我的网格中有一列包含几个按钮.我想只禁用该列中的过滤功能.

例如,过滤应该在办公室电话中可用,但必须在"操作"列中禁用.我想删除"操作"列中的文本框.

在此输入图像描述

javascript angularjs angular-ui-grid

9
推荐指数
1
解决办法
7265
查看次数

Angular UI-Grid:如何清除所有(一般Angular和内置UI-Grid)按钮上的列过滤器单击

如何在按钮单击时清除刷新所有(一般Angular和内置UI-Grid)过滤器?

背景:我构建了一个使用UI-Grid的应用程序,并利用了内置的过滤功能.它还有一个用角度写的跨列搜索.

当前战斗我希望能够通过单击按钮清除和刷新我的过滤器.到目前为止,我已经能够实现这一点用于跨列搜索,但是没有成功实现它用于内置列过滤器(具有讽刺意味的是,我认为这将是简单的部分!).

关于问题的研究:

1)通过UI-Grid教程搜索...失败

2)看看提供的UI-Grid API ......部分成功!好像我认为我在"clearAllFilters"函数中找到了我正在寻找的东西(这里是源代码),但我无法弄清楚如何实现它,所以在第3步...

3)用Google搜索疯狂的实现演示/示例/帮助/提示/任何东西!?...失败

4)在Stack Overflow上寻求帮助:)

提前致谢.

filtering angularjs angular-ui-grid

9
推荐指数
2
解决办法
1万
查看次数

如何在单击时创建angular-ui单元格?

我正在尝试使angular ui-grid cell editable (row)单元格可编辑single click.

现在,Cell可以双击编辑.

如何在单击时使单元格可编辑?

HTML:

<div class="grid testGrid" ui-grid="testGridOptions" ui-grid-edit 
     ui-grid-row-edit style="width: 100%;">
</div>
Run Code Online (Sandbox Code Playgroud)

控制器:

var columns = [
    { field: 'Name', displayName: 'Name', cellEditableCondition: function ($scope) { return $scope.row.entity.showRemoved; } }
];
Run Code Online (Sandbox Code Playgroud)

网格选项:

$scope.testGridOptions = {
    enableRowSelection: false,
    enableRowHeaderSelection: false,
    enableCellEdit: true,
    enableCellEditOnFocus: false,
    enableSorting: false,
    enableFiltering: false,
    multiSelect: false,
    rowHeight: 30,
    enableColumnMenus: false,
    enableGridMenu: false,
    showGridFooter: false,

    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};
Run Code Online (Sandbox Code Playgroud)

angular-ui-grid

9
推荐指数
1
解决办法
1万
查看次数

仅在需要AngularJS时才注入模块依赖项(如插件)

我有2页(我不使用angular's routing- 这个约束).

在其中一个中我想使用ui-grid该演示中的指令:

var app = angular.module('myApp', ['ui.grid']);
app.controller('mainCtrl', function($scope) {
  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
  ];
});
Run Code Online (Sandbox Code Playgroud)
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我的问题是,如果有办法ui-grid在任何情况下都不向应用程序注入依赖项,但仅在我需要它时.

就像是:

app.controller('mainCtrl', function($scope) { …
Run Code Online (Sandbox Code Playgroud)

html javascript angularjs angularjs-injector angular-ui-grid

9
推荐指数
1
解决办法
3137
查看次数

如何使Angular ui网格最初扩展所有行?

我正在使用ui网格显示数据列表,我正在尝试初始扩展所有行.

我试图在onRegisterApi事件中执行此操作:

scope.GridOptions =
        {
            data: properties,
            columnDefs: 
            [
                { name: "Full Address", field: "FullAddress" },
                { name: "Suburb", field: "Suburb" },
                { name: "Property Type", field: "PropertyType" },
                { name: "Price", field: "Price", cellFilter: 'currency'},
                { name: "Status", field: "Status" },
                { name: "Sale Type", field: "SaleType" }, 
                { name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
            ],
            expandableRowTemplate: 'template.html',
            expandableRowHeight: 200,
            onRegisterApi: (gridApi) => 
            {
                scope.gridApi = gridApi;
                gridApi.expandable.on.rowExpandedStateChanged(scope,(row) =>
                {
                    if (row.isExpanded) {
                        this.scope.GridOptions.expandableRowScope = row.entity;
                    } …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-ui angular-ui-grid

8
推荐指数
2
解决办法
9350
查看次数

当columnDefs具有字段作为类型编号时,Angular ui网格按字符串过滤.为什么?

我正在使用django 1.8,angularjs 1.3.14和jquery 1.11.0.

这是在Controller/gridOptions/columnDefs中.

{ field: 'credit_amt',                
  displayName: 'Credit Amount',           
  type: 'number', 
  width: '8%',   
  enableFocusedCellEdit: true, 
  visible:true,
  //This 'filters' is the sort box to do the search.
  filters: [{   
            condition: uiGridConstants.filter.GREATER_THAN,
            placeholder: 'greater than'
          }
Run Code Online (Sandbox Code Playgroud)

请注意,'type'是一个数字.当我运行此程序时,程序将此字段视为字符串而不是数字.因此排序不能按照我需要的方式运行.
我试图省略'type'并让它自动检测数据类型. - 不行.

以下是使用前后的排序:

在添加搜索项之前

只需在搜索字段中添加6即可

如您所见,当没有数据小于6时,项目被过滤.请帮忙.谢谢.

django grid user-interface angularjs angular-ui-grid

8
推荐指数
1
解决办法
6616
查看次数

什么是u-grid中ng-grid的"beforeSelectionChange"的等价物?

ng-grid,我曾经以beforeSelectionChange下列方式使用:

当用户选择行时,执行ajax调用.虽然我设置了ajax调用$scope.doingAjaxCall = true,并且为了阻止用户更改选择,我在网格定义中有这个:

beforeSelectionChange: function () {
    return !($scope.doingAjaxCall);
},
Run Code Online (Sandbox Code Playgroud)

如果ajax调用正在发生,它会锁定/冻结选择.

现在,在ui-grid(又名ng-grid 3)中,我不知道相当于什么afterSelectionChange.

在文档的这一部分:
http://ui-grid.info/docs/#/api/ui.grid.selection.api : PublicApi
我看到两个事件:

  • rowSelectionChanges
  • rowSelectionChangedBatch.

这些似乎相当于旧的 afterSelectionChange

在文档的这一部分:
http://ui-grid.info/docs/#/api/ui.grid.selection.service : uiGridSelectionService
我看到这两个似乎与需求相关的方法:

  • raiseSelectionEvent(grid, changedRows, event)
  • decideRaiseSelectionEvent(grid, row, changedRows, event)

但我不明白如何使用它们

重要提示:
我正在使用multiSelect: false(即:只能选择一行)

angularjs ng-grid angular-ui-grid

8
推荐指数
1
解决办法
1566
查看次数

uiGridConstants.filter下的可用条件常量是什么?

我是否错过了在一个地方记录uiGrid字段的所有可用uiGridConstants的链接?我正在使用columnDefs过滤器,发现EQUAL不起作用.就在那时我意识到uiGridConstants的所有条件常量都没有中央文档.

columnDefs:
 [ {   }
    , { field: '_pointXID', filter
        : {
            condition: uiGridConstants.filter.CONTAINS, placeholder: '%PATTERN%'
        }, headerCellClass: $scope.whatfilter}
    , { field: '_statU16', width: "5%", filter
        : {
            condition: uiGridConstants.filter.EQUAL, placeholder: '=='
        }, headerCellClass: $scope.whatfilter}
    , { field: '_valDoub', width: "5%", enableFiltering: false }

 ]
Run Code Online (Sandbox Code Playgroud)

EQUAL不是其中之一,而且我怎么知道?!

angular-ui-grid ui-grid

8
推荐指数
1
解决办法
4825
查看次数