简体   繁体   English

在 SlickGrid 中使用分层表

[英]Use hierarchical tables in SlickGrid

We have a request from our designers to build tables something like this, with rows that expand to show essentially another sub-table underneath.我们的设计人员要求我们构建类似这样的表格,其中行扩展以显示下面的另一个子表格。 In KendoUI documentation, this is called "Hierarchy."在 KendoUI 文档中,这称为“层次结构”。

在此处输入图像描述

We use SlickGrid v2.3 with a few additional plugins.我们使用带有一些附加插件的 SlickGrid v2.3。 We currently have tables with a similar row expand/collapse like this: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.html .我们目前有具有类似行展开/折叠的表,如下所示: https://mleibman.github.io/SlickGrid/examples/example5-collapsing.ZFC35FDC70D5FC69D7A39883A822 That does not allow for a completely different set of columns in the sub-table.这不允许子表中有一组完全不同的列。

The question is, can this be done in SlickGrid or not?问题是,这是否可以在 SlickGrid 中完成?

At the moment, it can't be done.目前,它无法完成。 In order to achieve its speed, Slickgrid enforces a fixed row height and a single scrolling canvas.为了达到它的速度,Slickgrid 强制执行固定的行高和单个滚动 canvas。 It's just a different approach than used by HTML display grids.这只是与 HTML 显示网格使用的方法不同。

You could put together a workaround using mutiple slickgrids or an embedded slickgrid in a group row, I suppose, but it would be messy.我想,您可以在组行中使用多个 slickgrid 或嵌入的 slickgrid 来组合一种解决方法,但这会很混乱。 One thing I have done is develop a SlickCombo, which is essentially a grid presented as a multi-column dropdown.我做过的一件事是开发一个 SlickCombo,它本质上是一个呈现为多列下拉列表的网格。 It's a full grid and can offer editing.这是一个完整的网格,可以提供编辑。 That's probably as close as you'd get.这可能和你得到的一样接近。

A comment: the MLeibman repo is long dead - you should be using: https://github.com/6pac/SlickGrid评论:MLeibman repo 早已死去 - 你应该使用: https://github.com/6pac/SlickGrid

It might be hard to do with current SlickGrid, there's no code that handles the hierarchical part itself so that would be lot of work to implement in SlickGrid.当前的 SlickGrid 可能很难做到,没有处理分层部分本身的代码,因此在 SlickGrid 中实现的工作量很大。 However it is implemented in Slickgrid-Universal , which is a wrapper on top of SlickGrid.然而,它是在Slickgrid-Universal中实现的,它是 SlickGrid 之上的一个包装器。 You can see Example 5 and Example 6 which shows 2 types of Tree Data grids (hierarchical or parentId refs).您可以看到示例 5示例 6 ,其中显示了 2 种类型的树数据网格(分层或parentId参考)。 We use it in production for a project that we have.我们将它用于我们拥有的项目的生产中。 Also note that this is not a grid within a grid, it's rather an expand/collapse the same as what you found in example5-collapsing.html , the only differences with SlickGrid is that Slickgrid-Universal has the code to deal with hierarchical data (filtering/sorting) while SlickGrid itself doesn't and also another nice to know thing is that expand/collapse is actually using data filtering behind the scene and you can see that when you have the footer displayed.另请注意,这不是网格中的网格,而是展开/折叠,与您在example5-collapsing.html中找到的相同,与 SlickGrid 的唯一区别是 Slickgrid-Universal 具有处理分层数据的代码(过滤/排序),而 SlickGrid 本身没有,另一个很高兴知道的事情是展开/折叠实际上是在幕后使用数据过滤,当您显示页脚时,您可以看到这一点。

Please note that I'm the author of Slickgrid-Universal and also a major contributor to SlickGrid as well请注意,我是Slickgrid-Universal的作者,也是 SlickGrid 的主要贡献者

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM