标签: angular-ui-grid

更改角度ui-grid的列可见性

我想在渲染网格后显示/隐藏列.在我搬到新的ui-grid之前,我打电话给toggleVisible()但是现在它似乎没有用.我试图改变列def可见性(或任何其他属性),如波纹管

columnDefs[9].visible = false;
Run Code Online (Sandbox Code Playgroud)

当我在列定义上设置可见性(在渲染之前)它确实有效,但在病房之后我无法改变它.

angular-ui-grid

18
推荐指数
3
解决办法
3万
查看次数

标题中大写字母之间的Angular UI网格空间

当我在标题单元格中使用多个大写字母(例如GPRS)时,它们会自动通过空格(GPRS)分隔.当我有两个单词(GPRS信号显示为GPRS信号)或两个首字母缩写词(GPRS EDGE显示为GPRSEDGE)时,这会特别烦人.这是否意味着这样?如果是这样,我怎么能禁用它?

javascript grid user-interface angularjs angular-ui-grid

16
推荐指数
1
解决办法
4537
查看次数

角度ui-grid事件:选择行

我正在尝试根据ui-grid上的行选择来启用/禁用按钮.如果未选择任何行,则禁用该按钮.

我发现这个plunkr使用旧的ng-grid方式在选择一行后触发事件.

  $scope.gridOptions = { 

  data: 'myData', 
  selectedItems: $scope.selections,
  enableRowSelection: true,

  afterSelectionChange:function() {
        if ($scope.selections != "" ) {
            $scope.disabled = false;
        } else {
            $scope.disabled = true;
        }
  }
};
Run Code Online (Sandbox Code Playgroud)

不幸的是它不起作用,我在ui-grid 文档中没有发现这种事件的迹象.

我如何用ui-grid实现这一目标?

javascript angularjs angular-ui-grid

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

angular ui grid gridApi.infiniteScroll.on.needLoadMoreData在数据中更改时不起作用

我正在使用角度ui-grid 3.2.5

以下是gridoptions

$scope.gridOptions = {
    infiniteScrollRowsFromEnd: 40,
    infiniteScrollUp: true,
    infiniteScrollDown: true,
    enableColumnMenus: false, // Remove hide columns options
    columnDefs: $scope.myDefs,
    data: 'data',
    onRegisterApi: function (gridApi) {
        gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
        gridApi.infiniteScroll.on.needLoadMoreDataTop($scope, $scope.getDataUp);
        $scope.gridApi = gridApi;
    }
};

function updateGrid(filteredData) {
    $scope.response = filteredData;

    $scope.firstPage = 1;
    $scope.lastPage = 1;
    $scope.totalPages = Math.ceil($scope.response.length / $scope.pageSize);

    $scope.gridApi.infiniteScroll.setScrollDirections(false, false);
    $scope.data = [];
    $scope.data = $scope.response.slice(0, $scope.pageSize);

    $timeout(function () {
        $scope.gridApi.infiniteScroll.resetScroll($scope.firstPage > 0, $scope.lastPage < $scope.totalPages);
    });
};
Run Code Online (Sandbox Code Playgroud)

当我们正在执行滚动gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);工作时,但是当数据在网格中更改时我们正在推送新数据$scope.$watch( 'data', updateGrid); …

javascript angularjs angular-ui-grid ui-grid angular

16
推荐指数
1
解决办法
844
查看次数

ui-grid angularjs中的条件单元模板

如何在ui-gridcellTemplate中显示数据时添加条件:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};
Run Code Online (Sandbox Code Playgroud)

预期结果应为行状态显示Active/NonActive/Deleted.

这是掠夺者

提前致谢.

angularjs angular-ui-grid

15
推荐指数
4
解决办法
8万
查看次数

单击内部单元格模板不会触发控制器中的功能

我在这里创建了一个plunker:http://plnkr.co/edit/zGqouwzxguef13lx48iP?p = preview

当我在日视图中单击ui-grid的单元格时,没有任何反应.我所期望的是执行测试功能并显示带有文本'test'的警报,但事实并非如此.

这里出了什么问题?

这是ui-grid 3.0最新版本的html单元模板:

HTML

<div ng-click="test()" ng-switch="row.entity[row.grid.columns.indexOf(col)].isPeriod">

    <div ng-switch-when="true">
        <tabset>
            <tab>
                <tab-heading>
                    <i class="glyphicon glyphicon-book"></i>
                </tab-heading>period id:
                {{ row.entity[row.grid.columns.indexOf(col)].id}}
            </tab>
            <tab select="alertMe()">
                <tab-heading>
                    <i class="glyphicon glyphicon-bell"></i>
                </tab-heading>
                {{row.entity[row.grid.columns.indexOf(col)].content}}
            </tab>

        </tabset>      <!-- PeriodTemplate -->
    </div>
    <div ng-switch-when="false">
       <div>Hello empty template</div>
    </div>      <!-- EmptyPeriodTemplate -->
</div>
Run Code Online (Sandbox Code Playgroud)

控制器:

'use strict';
angular.module('projectplanner').controller('DateplannerDayController', function ($scope, $state) {


    var columnHeaderDates = ['col1','col2','col3','col4','col5','col6','col7']
    $scope.columns = createColumnHeaders(columnHeaderDates);

var data = [{isPeriod: true, id: 10, rowNumber: 1},{isPeriod: false, id: 11, rowNumber: 2}]

  $scope.test …
Run Code Online (Sandbox Code Playgroud)

angularjs angular-ui-grid

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

将ui-grid网格列格式化为货币(RC 3.0)

下面的网格选项按预期显示数据.但是,如果我尝试格式化row.entity[col.field]cellTemplate中的值,我不会返回任何数据.

码:

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellTemplate: '<div>{{Number(row.entity[col.field]).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}}
    ]
};
Run Code Online (Sandbox Code Playgroud)

有关如何将列格式化为货币的任何指导都表示赞赏.

谢谢.

angularjs angular-ui-grid

15
推荐指数
3
解决办法
2万
查看次数

AngularJS ui-grid-当响应包含空数组时显示"无数据可用"

我想在ui-Grid 3.0中显示' No Data Available ',如果来自ajax的响应包含空的json数据数组ie;

data = {"data": []};
Run Code Online (Sandbox Code Playgroud)

现在,如果我这样做 -

$scope.gridOptions.data = data.data;
Run Code Online (Sandbox Code Playgroud)

'无数据'必须在ui-Grid中出现.

目前发生的是,如果数据为空,用户将获得空白屏幕.

另外如何将其作为默认功能?

在这里查看plunker.

angularjs angular-ui angular-ui-grid

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

Angular UI Grid单击行

我有一个Angular UI Grid中的项目列表.当我点击一行时,我想要被带到另一页.(换句话说,网格中的每一行都是一个链接.)

我想这一定是一个非常普遍的愿望,虽然我还没有看到任何关于如何做的文档.有什么好办法来实现这个目标?

angularjs angular-ui-grid

15
推荐指数
3
解决办法
3万
查看次数

角度ui网格保存和恢复状态

我需要知道如何在angularui网格中实现保存和恢复状态而不使用任何按钮.当我们在网格中进行任何更改时,我需要自动保存状态.我们还必须自动恢复已保存的状态.即使我们刷新页面,也应该恢复保存的状态

user-interface angularjs angular-ui-grid

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