Angularjs 动态 Angular UI 网格列

问题描述

Angularjs ui-grid 如何动态定义列。在我的代码中，我将 columnDefs 定义为 null 并在按钮单击后设置列并将数据设置为网格。但列未在浏览器上呈现。如何在这种情况下渲染或重新加载网格。任何解决方案都会对我的问题有所帮助。

我希望这是有道理的。欢迎提出任何建议。

  //  I defined grid first
 
    $scope.gridOptions = {
    enableColumnResizing: true,enableSorting: true,enableFiltering: true,showGridFooter: true,paginationPageSize: 50,paginationPageSizes: [50,100,150,200,250],enableHorizontalScrollbar: 1,columnDefs: [],exporterPdfDefaultStyle: { fontSize: 9 },exporterPdfTableStyle: { margin: [30,30,30] },exporterPdfTableHeaderStyle: { fontSize: 10,bold: true,italics: true,color: 'red' },exporterPdfheader: { text: "Tüm Liste",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;
    },onRegisterapi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
}
//and ng-click set column grid and set data to grid
//but grid is not rendering

    $scope.getTable = function () {
    $scope.columns = {'name','surname','id'};
    $scope.gridOptions.columnDefs = new Array();
                $scope.columns.forEach(function (item) {
                    $scope.gridOptions.columnDefs.push({
                        name: item,field: item,headerCellClass: 'tablesorter-header-inner'
                    })
                });

    $http({
        method: 'POST',url: '/report/getData',data: {
            vars: $scope.vars
        }
    }).success(function (data,status) {
  
        switch (status) {
            case 200:    
                            
               $scope.gridOptions.data = $.parseJSON(data);                        
                break;
            case 204:
                location.replace('/Error/Error?errorMessage=Error!&errorCode=' + status);
                break;
            default:
                console.log("default");
                //  location.replace('/Error/Error?errorMessage=Message!&errorCode=' + status);
                break;
        }
    }).error(function (data,status) {          
        location.replace('/Error/Error?errorMessage=problem!&errorCode=' + status);
    });  }

解决方法

这是关于 ng-show ui-grid 在 ng-show true 之后没有渲染的原因

首先设置 ng-show 可见

并设置数据

最后一步运行下面的代码：

 $scope.gridApi.core.handleWindowResize();

                $scope.gridApi.core.refresh();
                $scope.gridApi.core.refreshRows();
                $scope.gridApi.grid.refresh();
                $scope.gridApi.grid.refreshRows();
                $scope.gridApi.grid.updateCanvasHeight();
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.OPTIONS);