标签: ui-grid

我正在使用AngularJs ui-grid http://ui-grid.info/.

在实现时,我得到的东西你可以在单元格右下角的img中看到而不是下拉符号.

要包含哪些文件来解决此错误？

我正在使用ui grid 3.0.6.直到昨天它工作正常.但是现在Google Chrome存在问题.(版本56.0.2924.87)

当我滚动网格,或单击向下滚动箭头时,它开始滚动非常快.无法控制速度.它运行良好,只在Chrome中运行.

有人可以帮忙吗？

提前致谢.

我正在使用角度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);
    });
};

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

我有一个只有1列和大约1000行的ui-grid.每行中都有一个文本框.我想通过选项卡浏览文本框.这可以很好地工作大约10到15行,之后文本框失去焦点,然后如果再次按Tab键,它将跳过下面几行并跳转到另一个文本框.

请在此处查看问题plnkr

UI-Grid选项:

$scope.gridOptions = {
    rowHeight: '200',
    enableColumnMenus: false,
    paginationPageSize: 2000,
    columnDefs: [
      {name:"value", width:'*',
        cellTemplate: gridTemplate,
      }
    ],
    data: gridData
};

我是否错过了在一个地方记录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 }

 ]

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

我使用ui-grid绑定来自Role Table的数据,其中包含Department Id作为PrimaryKey.我正在调用Web Api来获取表中的所有角色并以ui-grid显示.

部门表

角色表

我真正的问题是,当我使用cellFilter绑定到网格时,我想将部门ID转换为部门名称,这就是为什么我声明objMapping以使用部门名称映射部门ID.但是每当我运行时,我都会看到在设置objMapping之前调用了cellFilter自定义函数,即'mapDepartmentName',而且我也无法在'mapDepartmentName'中引用objMapping.

我的网格看起来像这样: -

但是当我编辑时,我得到的结果如下,这是绝对正确的: -

我的代码片段如下: -

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.edit']);
myApp.controller("ctrlRole", ['$scope', 'MetadataOrgFactory', function ($scope, MetadataOrgFactory) {    
    var arrDepts = [];
    var objMapping = {};

    MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
        $scope.department = dataSuccess;
        for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
            
            var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
            arrDepts.push(objDept);

            objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
            
        }      
        $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
    }, function (dataError) {
    });
   

    $scope.gridRole = {
        data: 'roleData',
        columnDefs: [ …

我正在使用ui-grid.我们正在将项目从角度1迁移到2,但是ui-grid没有角度2支持.请为ui-grid建议免费(MIT)许可证网格替代方案.

我正在使用cellTooltipcolDef的属性，但这似乎不起作用。

$scope.gridOptions.columnDefs = [{ displayName: 'Test', field: '_test', 
    cellTooltip: function (row, col) { return row.entity._Number },
    cellTemplate: '<div class="ui-grid-cell-contents" title="{{row.entity._Number}}"></div>'},
];

任何帮助，将不胜感激。

我具有ui-grid和菜单的以下配置，但是我正在为显示的每个元素打开菜单（我知道所有项目都打开相同菜单的问题，因为没有区分要打开哪个菜单项的术语；但是我无法引用它）

$scope.gridOptions = {
                enableSelectAll: true,
                exporterCsvFilename: 'AGS_Extract.csv',
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [25, 50, 75],
                paginationPageSize: 25,
                useExternalPagination: true,
                enableGridMenu: true,
                exporterAllDataFn: function () {

                    var paramsObj = {};
                    var url = "http://test.satellite.com:8080/Dashboards/AGSMateervlet";

                    paramsObj['query'] = $scope.keyword;
                    paramsObj['start'] = 0;
                    paramsObj['rows'] = $scope.gridOptions.totalItems;
                    return $http.get(url, { params: paramsObj, headers: { 'Content-Type': 'application/json' } }).then(function (res) {
                        var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
                        $scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
                    });
                },
                columnDefs: [
                    { name: 'materialnum', displayName: 'Part Number', cellClass: 'partNum', 
                    cellTemplate: …

我在带有angularjs的项目中使用ui-grid.

在我的项目中,ui-grid将内容导出到excel文件,并且它运行良好.

这是ui-grid声明:

这里是javascript中的ui-grid定义:

 $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'company', cellFilter: 'mapCompany:this.grid.appScope.companyCatalog' }
    ],
    enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    exporterPdfDefaultStyle: {fontSize: 9},
    exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
    exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
    exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
    exporterPdfFooter: function ( currentPage, pageCount ) {
      return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
    },
    exporterPdfCustomFormatter: function ( docDefinition ) {
      docDefinition.styles.headerStyle …

我正在尝试深入研究Angular UI-Grid的API,以确保我为我的单元头实现Bootstrap Popover.我一直在看,但找不到任何解决方案.

像这样的东西 - plnkr.co/edit/UJJttN

我也试图让popover只发生在标题单元格中.有什么建议？

我已经使用 ui-grid 一段时间了。最近我遇到了一个网格问题，如果我传递一个稍微大的数据集（比如 50 行），网格不会显示它们。

当我调试并查找我的 $scope.gridOption.data 对象时，它似乎包含所有元素，但仍然只显示了几个（大约 10 个）。

当我尝试通过单击标题进行排序时，会出现更多行。（有时 1 或 2 个）

这不规则，也没有规律。对于不同的数据集，它随机发生。

我正在使用ui-grid - v3.2.6并且我有一个div带有 amax-height和scroll其他的网格表。我在具有类似实现的页面上有多个这样的网格，但这个问题目前似乎出现在某个网格上。

我可以起草一个plunker，但它并没有真正的帮助，因为这个问题是随机的，而且我有一个基本的ui-grid实现。

我跟着这个链接https://github.com/angular-ui/ui-grid/issues/424，但是我无法理解它，我仍然被卡住了。

似乎这是一个已知且未修复的错误。但是有什么可行的解决方案吗？？？

任何帮助表示赞赏..

我已经查看了关于这个 ui-grid 的多篇文章，它让我很适合。我正在尝试获取选定的行对象。我要么得到一个未定义的，要么无法读取“getSelectedRows”的属性。任何帮助是极大的赞赏。

我从这篇文章here开始，文档似乎也不是那么好。

这是我的代码：

        vm.gridOptions = {
        enableRowSelection: false,
        enableSelectAll: false,
        showGridFooter:true

    };

    vm.gridOptions.columnDefs = [
        { name: 'productName' },
        { name: 'unitPrice' }
    ];

    vm.gridOptions.multiSelect = false;

    vm.getSelectedRows = function () {
        vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
    }

     productDataService.getProductList()
         .then(function (result) {                 
             vm.gridOptions.data = result.data;
             vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();<--Property undefined error here
             $timeout(function() {
                 if (vm.gridApi.selection.selectedRow) {
                     vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
                 }
             });
         });

    vm.gridOptions.onRegisterApi = function(gridApi) {
        vm.gridApi = gridApi;
    }