标签: angular-ui-grid

我正在尝试将一个小项目从jquery移植到angularjs.我使用DataTables绘制从我的虚拟机收到的诊断数据,这是一个例子:

DataTables可以很容易地对数据进行分页,这样做的好处是在导航时不会捕获鼠标滚动,这是当您的页面包含大量表格时的最佳解决方案.我现在正尝试使用angular-ui中的ui-grid做同样的事情,但是ng-grid中存在的分页选项不再存在(或者至少我无法找到它们).

有没有办法使用ui-grid进行客户端分页？有没有办法避免在不需要滚动表格时捕获鼠标滚动？如果不是,我只需要切换回ng-grid.

我想执行一个cellFilter来以编程方式定义需要在单元格中显示的内容.在定义列定义时,您需要指定单元格对应的字段,但是我需要访问cellFilter中的整行数据,而不仅仅是单个字段.是否可以将多个字段传递给过滤器或整个行？

{
name: 'To',
field: 'myData',
cellFilter: 'formatCaller'
}

谢谢.

在下面的plunkr中，我希望Ajax调用可以动态填充Gender下拉过滤器，但是它似乎不起作用。

plunkr链接

如果我注释掉第17行

$scope.newSelectOptions=[{"value":"New Item 1","label":"New Item 1"},{"value":"New Item 2","label":"New Item 2"},{"value":"New Item 3","label":"New Item 3"},{"value":"New Item 4","label":"New Item 4"}];

它的工作方式就像我想要的（只是模拟它一样），但是似乎发生的是ajax调用在创建变量$scope.newSelectOptions后填充了变量columnDefs。

我尝试过更改第34行：

selectOptions: $scope.newSelectOptions

至：

selectOptions: newSelectOptions
selectOptions: 'newSelectOptions'
selectOptions: '$scope.newSelectOptions'

但它们都不起作用。

那么如何动态地动态更改该selectOptions对象或其他对象$scope.gridOptions.columnDefs？

下面是我的代码并收到警告"无法从数据中分配类型,因此默认为字符串"

vm.usersGrid = {
    enableRowSelection: true,
    multiSelect: true,
    data: "vm.users",
    columnDefs: [
        {field: 'id', visible: false, displayName: 'UserId'},
        {field: 'email', displayName: 'User Name'},
        {field: 'countries', displayName: 'Country'},
        {field: 'status', displayName: 'Status'},
    ]
};

我试图在一个应用程序中实现UI网格树视图功能,该应用程序使用ControllerAs而不是$ scope来绑定数据.

当实现TreeView功能时,如链接http://ui-grid.info/docs/#/tutorial/215_treeView所示,我按照教程在第18行获得了这样的异常.

"请求在treeView.on.rowExpanded上听,但是输入参数中没有传递范围.传递null是合法的,但是你已经传递了其他东西,所以你可能忘了提供范围而不是故意这样做,而不是注册"

我该如何解决这个问题？

我使用ngGrid来显示我的数据.我想将cellFilter和cellTemplate一起用于特定列,但似乎它们不能一起工作.当我单独使用cellFilter或cellTemplate时,它们完美无缺.基本上,我想以这种方式格式化单元格的值(例如500000 - > 500,000; 1000000 - > 1,000,000),我也希望以红色显示负值.我怎么解决这个问题？谢谢!

$scope.gridOptions = {
        data: 'data',
        columnDefs: [
            {
                field: 'Settled',
                cellFilter: 'number',
                cellTemplate: '<div ng-class="{red: row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'
            }]
        }

我正在使用角度ui-grid而不是ng-grid.如何将英语语言更改为网格选项的西班牙语.

我想改变角度-ui网格的单元格/行颜色.从文档中我似乎应该使用cellClass.我想要两种颜色用于条纹外观,另一种颜色用于当前选定的行.

在我的columnDefs中,我使用一个函数来确定正确的cellClass.这在首次加载时非常有效.

$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.isSelected)
        return 'my-grid-cell-selected';

    if ((rowRenderIndex % 2) == 0) {
        return 'my-grid-cell1';
    }
    else {
        return 'my-grid-cell2';
    }
}

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,        
    multiSelect: false,
    columnDefs: [
      { field: 'EventDate', cellClass: $scope.getCellClass },
      ...
    ]
};

但是,我不知道如何更新所选行的所有单元格的cellClass.我有以下代码,我认为会更新所选行,但没有任何反应,虽然我可以看到它被调用.

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function(row){
        //??????
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
    });

};

如果没有我的cellClasses,所选行的颜色会有所不同.

知道如何为所选行实现自定义颜色吗？

我正在使用Angular UI Grid和ui-grid-expandable插件。如果显示了扩展按钮（+），是否可以确定每一行？默认情况下，无论子网格中是否有可用数据，它始终都会显示。

谢谢。

我正在尝试使用angularjs ui-grid创建一个表,但我不断被告知$ scope.uiGrid是未定义的,有谁能告诉我我做错了什么？

    requestYelp.success(
    function(obj) 
    {
        console.log(obj.businesses[0].name);

        $scope.gridOptions = {
            enableSorting: true,
            rowHeight:100,
            columnDefs: [
            { field: 'name' },
            { field: 'company'  },
            { field: 'image', cellTemplate:"<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"}
            ],

            data:[
            {name:obj.businesses[0].name,company: "Company1", image: obj.businesses[0].image_url},
            {name:obj.businesses[1].name,company:"Company2",image:obj.businesses[1].image_url},
            {name:obj.businesses[2].name,company:"Company3",image:obj.businesses[2].image_url}
            ]
        };
    }
);
}]);

console.log(obj.businesses[0].name)将把正确的数据放到控制台上,这对obj变量来说不是问题.代码只有在进入gridOptions时才会中断.