Ag-Grid 行分组渲染错误

huangapple go评论171阅读模式
英文:

Ag-Grid row groups rendering bug

问题

我只对特定值进行行分组。以下是我的数据库结构的简化版本:

  • 项目
    • ID
    • 父级 ID(如果这是子项目)
    • 项目类型(父级、子级、普通)

当行的项目类型为父级时,我进行分组。我对该行的子项进行数据库提取,并在行组中填充它们。

我最终遇到了一个非常奇怪的渲染问题:
(GIF) https://i.stack.imgur.com/Malit.jpg

以下是我的代码。它是 CoffeeScript,但对于熟悉 JavaScript 的人应该是不言自明的。"?" 只是一个空值检查,"@" 是 "this"。

....
# 用户已展开一个组,所以检查我们是否有父节点数据...
else if params.parentNode? and params.parentNode.data? and params.parentNode.expanded
  parentId = params.parentNode.data.id

  if @editionsDict[parentId]?
    params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
  else
    # 返回一个在数据被检索后解析的 promise 的数据库调用
    @gridLoadChildren(parentId).then((res) =>
      setTimeout(()=>
        @editionsDict[parentId] = @childWorks
        params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
      ,0)
    )

@childWorks@gridLoadChildren 中填充。除此之外,@gridLoadChildren 只是一个使用父级 ID 执行 select 的数据库调用。

英文:

I'm only grouping rows on certain values. Here's a simplified version of my database structure:

  • item
    • id
    • parent ID (if this is a child item)
    • item type (parent, child, normal)

I am grouping when the row's item type is parent. I do a database fetch for that row's children, and populate them in the row group.

I end up with a very strange rendering problem:
(GIF) https://i.stack.imgur.com/Malit.jpg

Here is my code. It's CoffeeScript but should be self-explanatory for those familiar with JS. "?" is just a null check, "@" is "this"

....
          # the user has expanded a group, so check that we have parent node data...
          else if params.parentNode? and params.parentNode.data? and params.parentNode.expanded
            parentId = params.parentNode.data.id

            if @editionsDict[parentId]?
              params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
            else
              # database call that returns a promise for when data is retrieved
              @gridLoadChildren(parentId).then((res) =>
                setTimeout(()=>
                  @editionsDict[parentId] = @childWorks
                  params.successCallback(@editionsDict[parentId], @editionsDict[parentId].length)
                ,0)
              )

@childWorks is populated in @gridLoadChildren. Other than that, @gridLoadChildren is just a database call that performs a select using the parent ID.

答案1

得分: 1

很不幸,对于我想要的,我无法使用 Ag Grid 的行分组功能。在我处理这个功能的整个时间里,感觉就像我在与网格格斗,试图让它做一些它本不应该做的事情。幸运的是,我找到了 主/详细 文档,将采用这种方法。到目前为止,它完全符合我需要的要求(服务器端数据,仅展开特定行的分组)。

英文:

Unfortunately for what I want I could not use Ag Grid's row grouping. The whole time I was working on this feature it felt like I was wrestling with the grid and trying to make it do something it wasn't meant to do. Thankfully, I came across the master/detail documentation and will be going that route instead. So far it works exactly for what I need (server side data and only expanding groups for certain rows).

huangapple
  • 本文由 发表于 2020年1月4日 01:15:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582664.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定