标签: ag-grid

如果你发现一些愚蠢的话,我是新手使用agGrid原谅我的.所以在此之前我在angularjs上使用了Kendo Grid,但我们想切换到其他网格,所以我们现在正在尝试使用agGrid.

下面是一个工作正常的一切的aggrid样本.但是,当我在一个函数内部移动我的网格选项时,将在按钮上调用我点击警告 - 找不到ag-Grid的网格选项.请确保属性ag-grid指向作用域上的有效对象.

我无法理解有什么问题,因为这个功能剑道网格内选择工作正常,并且正在填充剑道格,但我不知道我在做什么毛病agGrid.

请帮助我.

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) {
    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    $scope.gridOptions2 = {
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true …

我正在尝试使用以下方法从一个组件导航到另一个组件:

this.router.navigate(['/path/'], '_blank');

问题是我导航到的组件已经创建,当我导航回页面时,它的ngOnInit方法没有被执行.我正在尝试刷新页面上显示的数据.这是在目标组件的ngOnInit函数中:

this.sub = this._DataService.getData().subscribe(data=> {
        this.data= data;
    });

如何告诉目标组件,在进行导航时,页面上的数据总是会刷新？

我正在使用Ag-Grid在表格中显示数据.在NgOnInit函数中:

this.gridOptions.rowData = this.data;

我最初来自的组件是一个添加新对象的表单.提交该对象后,它应重定向到网格并显示新对象.这就是网格应该更新其数据的原因,但是由于某种原因,只有当我通过网格中的上下文菜单操作而不是导航手动刷新它时才会这样做.

表单中的提交函数如下所示:

 onSubmit(data) {
    this._DataService.addData(data.value).subscribe();
    this.router.navigate(['/data/']);
}

我已将农业网格版本从7.2.0升级到v14.2.0。当我将sizeColumnsToFit()api与onGridReady或onGridSizeChangedevent 一起使用时，它可以工作，但可以保持不必要的水平滚动，这可能是由于网格宽度计算错误所致。

这个问题（？）也可以在此处的ag-grid官方示例中看到，

https://www.ag-grid.com/javascript-grid- responseness /＃example-example1

在以前的版本中，无需任何水平滚动即可完全正常工作。

当我手动调用时$scope.gridOptions.api.sizeColumnsToFit()，它将删除水平滚动。

这是我的gridOptions：

        $scope.ag_grid_options = {
            headerHeight: 50,
            rowHeight: 50,
            //rowModelType: 'virtual',
            rowModelType: 'infinite',
            rowBuffer: 0,
            cacheOverflowSize: 1,
            infiniteInitialRowCount: 1,
            cacheBlockSize: 50,
            paginationPageSize: 50,
            //virtualPaging: true,
            enableServerSideSorting: true,
            enableSorting: false,
            enableColResize: true,
            angularCompileRows: true,
            onGridSizeChanged: function (param) {
                $scope.ag_grid_options.api.doLayout();
                $scope.ag_grid_options.api.sizeColumnsToFit();
            },
            columnDefs: grid_column_definitions
        };

我知道我可以使用属性preventHorizo​​ntalScroll = true。但是我不想使用它，因为有了它，当用户手动调整列大小时，滚动将不会出现。

我正在搞乱ag-grid,react-apollo,一切似乎都运转正常.这里的目标是单击一个复选框,并在修改某些数据时发生变异/网络请求.我遇到的问题是它重绘整行,这可能非常慢但我真的只是想更新单元本身,所以它的快速和用户体验更好.我有一个想法是做一个乐观的更新,只是更新我的缓存/利用我的缓存.你们采取了什么方法.

通过apollo查询抓取列和行数据.

下面是一些代码:

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { …

我正在通过api更新排序和过滤器模型:

this.gridApi.setFilterModel(filterModels);
this.gridApi.setSortModel(sortModels);

这个问题是我有一个服务器请求绑定到更改,即使是排序和过滤,所以当用户更改然后更新数据.这意味着当我在代码上更改模型(如恢复状态或重置过滤器)时会导致多个请求.

有没有办法在不触发事件的情况下更新过滤器/排序模型？

我看到有一个ColumnEventType参数,但无法看到它是如何工作的.我可以指定一些我可以在事件处理程序中查找的变量,以使它们忽略不是从用户生成的调用吗？

我正在尝试管理URL状态,所以当url查询参数更改时,我的代码会设置网格中的模型,但最终会导致页面重新加载多次,因为在设置模型时无法调用onFilter和onSort事件我可以设想防止这种情况发生.

我正在使用Angular 6开发Web应用程序。我有一个Ag-grid企业版。Ag-grid文档说，我们必须导入所有ag-grid-angular，ag-grid-community和ag-grid-enterprise才能与Ag-grid企业合作。

编译后，主捆绑包的总大小超过1.5 MB。其中，ag-grid-community为694KB，ag-grid-enterprise为230KB ：

这是Ag-grid的正常行为吗？

我正在使用Ag-grid版本19.0.0和以下命令进行构建：

ng build --prod --aot --build-optimizer --vendor-chunk=true

我最近一直在修补 Ag-grid 。当我从 REST API 获取一些数据时，我想将 'no rows to show' 文本更改为 'data is loading...' 。数据以 JSON 对象数组的形式返回。但是，如果当 API 确实返回一个空数组时，我希望“数据正在加载...”文本更改为“无行显示”文本。我怎样才能做到这一点？提前致谢。

我按照此示例进行操作，发现该表花费了很多时间来呈现工具提示。似乎没有任何延迟，我尝试了defaultBrowserTooltip和自定义工具，但是它们都很慢。有任何提示吗？

P / S：我正在使用React

我尝试过的某种方式：

tooltipField: 'myTooltipField'

tooltip: (value: string): string => value

通过使用各种示例，我在网络上发现了一个简单的Web应用程序。但是，尽管AG Grid（我选择用来显示数据的网格可以与提供的数据源一起使用，但是它不能与我自己的数据源一起使用，该数据源是使用Go编写的Web服务创建的。

角度代码...

ngOnInit() {
  this.rowData = this.http.get('https://api.myjson.com/bins/ly7d1'); 
}

这可以正确显示网格上的数据。但是当我将其重定向到我时，请使用以下内容生成数据...

ngOnInit() {   
  this.rowData = this.http.get('http://localhost:10000/all');
}

这个网格只是说正在加载...

如果我在浏览器中测试任何一个链接，我都会得到完全相同格式的完全相同数据...

[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000},{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]

这是到Json的链接：

https://api.myjson.com/bins/ly7d1

我在同一台机器上同时运行我的angular应用程序和go应用程序，但是有不同的服务并使用不同的端口...

我可以包含Go代码，但是由于数据在浏览器中正确显示，因此我看不出它有多重要。

尝试仅包含相关的内容，但是如果我错过了某些内容，请告诉我，然后我可以上传。

HTML代码...

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>


    <button (click)="onBtExport()">Export to CSV</button>

    <ag-grid-angular …

我正在使用带有 TypeScript 的 ag-Grid 并尝试在我的列定义中创建一个异步值设置器。

const columnDefs: ColDef[] = [
  {
    headerName: 'Name',
    field: 'name',
    editable: true,
    valueSetter: async (params: ValueSetterParams): Promise<boolean> => {
      return await doSomething(params); // Will return the change boolean
    }
  },
  //...other columns

但是 TypeScript 抱怨这个签名不被支持，因为colDef.d.ts定义文件有

valueSetter?: ((params: ValueSetterParams) => boolean) | string;

但是，如果我只是// @ts-ignore用来忽略 TypeScript 错误，它似乎是在尊重await并且我的代码以正确的顺序执行。

这只是 TypeScript 定义文件的问题吗？还是 ag-Grid 不支持异步值设置器？

一些环境信息：

• 农业网格 22.1.0
• 打字稿 3.7.2
• Aurelia（使用 WebPack、npm 等）
• 网络风暴 2019.3.1