onRegisterApi函数未被调用,ui-grid

时间:2017-06-28 20:33:57

标签: angularjs angular-ui-grid

我正在尝试使用ui-grid显示表格。该表显示正常,但没有调用onRegisterApi函数。我甚至没有注意到它,因为表格显示工作正常,直到我想使用vm.gridApi.core.refresh()方法。当我添加该方法时,它给了我vm.gridApi未定义的错误。

我的控制器看起来像这样:

function userEventData (resp) {
            $http({
                method: "GET",
                url: resp.results["@href"]
            }).success(function (responseData) {
                logger.info("userEventData responseData", responseData);
                vm.gridOptions.data = responseData;
                logger.info("gridOptions", vm.gridOptions.data);
                poulateGrid();
                //return responseData;
            });
        }

function populateGrid () {
            logger.info("populateGrid function activated");
            vm.dateFormat = "medium";
            var temp = vm.gridOptions.data;
            vm.gridOptions = {
                enableColumnMenu: true,
                enableFiltering: true,
                enableSelectAll: true,
                rowTemplate: gridService.getRowTemplate(),
                excludeProperties: ["meta"],
                onRegisterApi: function (gridApi) {
                    logger.info("onRegisterApi activated");
                    vm.gridApi = gridApi;
                    logger.info("vm.gridApi when defined", vm.gridApi);
                    vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200 );
                },
                columnDefs: [
                    {
                        field: "sun",
                        displayName: "Init User",
                        allowCellFocus: false,
                        enableGrouping: true,
                    },
                    {
                        field: "dun",
                        displayName: "Target User",
                        allowCellFocus: false,

                    },
                    {
                        field: "evt",
                        displayName: "Name",
                        allowCellFocus: false
                    },
                    {
                        field: "dip",
                        displayName: "What is affected",
                        allowCellFocus: false
                    },
                    {
                        field: "det",
                        displayName: "Time created",
                        allowCellFocus: false,
                        cellFilter: "date:grid.appScope.vm.dateFormat"
                    }
                ]

            }

HTML

  

<div ui-grid="vm.gridOptions" style="padding-top: 1%;">

知道为什么会这样吗?谢谢!

1 个答案:

答案 0 :(得分:0)

在使用HTTP请求中的数据初始化vm.gridOptions.data之后,您正在调用populateGrid()函数。

尝试重新排序代码以执行以下操作:

vm.gridOptions = {}; // must have gridOptions defined first

function userEventData (resp) {
            $http({
                method: "GET",
                url: resp.results["@href"]
            }).success(function (responseData) {
                logger.info("userEventData responseData", responseData);
                logger.info("gridOptions", vm.gridOptions.data);
                populateGrid(); // call this first
                vm.gridOptions.data = responseData; // now you can load the data
                //return responseData;
            });
        }

function populateGrid () {
            logger.info("populateGrid function activated");
            vm.dateFormat = "medium";
            // var temp = vm.gridOptions.data; // this wont exist yet
            vm.gridOptions = {
                enableColumnMenu: true,
                enableFiltering: true,
                enableSelectAll: true,
                rowTemplate: gridService.getRowTemplate(),
                excludeProperties: ["meta"],
                onRegisterApi: function (gridApi) {
                    logger.info("onRegisterApi activated");
                    vm.gridApi = gridApi;
                    logger.info("vm.gridApi when defined", vm.gridApi);
                    vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200 );
                },
                columnDefs: [
                    {
                        field: "sun",
                        displayName: "Init User",
                        allowCellFocus: false,
                        enableGrouping: true,
                    },
                    {
                        field: "dun",
                        displayName: "Target User",
                        allowCellFocus: false,

                    },
                    {
                        field: "evt",
                        displayName: "Name",
                        allowCellFocus: false
                    },
                    {
                        field: "dip",
                        displayName: "What is affected",
                        allowCellFocus: false
                    },
                    {
                        field: "det",
                        displayName: "Time created",
                        allowCellFocus: false,
                        cellFilter: "date:grid.appScope.vm.dateFormat"
                    }
                ]
            }
            }