在 SlickGrid 中是不是可以使用可变行高？

Posted 2023-02-22

【中文标题】在 SlickGrid 中是不是可以使用可变行高？

【英文标题】：Is variable rowheight a possibility in SlickGrid?在 SlickGrid 中是否可以使用可变行高？

【发布时间】：2011-02-17 19:19:47

【问题描述】：

我想根据内容大小提供可变的行高。可以在 Slickgrid 中使用吗？

你能举出一些例子吗？

【问题讨论】：

Can SlickGrid's row height be dynamically altered? 的可能重复项

【参考方案1】：

简单明了，这在 SlickGrid 中不受支持，并且可能永远不会支持。对不起。

【讨论】：

谈务实。 LOL @Stephen 自定义解决方案似乎可行。我现在会继续使用 Google 搜索和 ***ing。

我已经用一些自定义代码解决了这个here。 - 不需要对 slickgrid 代码进行 hack ;)

【参考方案2】：

这是可能的，但它不是微不足道的，您可能会受到性能损失。 SlickGrid 的工作方式，需要能够快速回答以下两个问题：

对于给定的 X 行，该行的顶部偏移量是多少？ 对于给定的偏移量 Y，在该偏移量处是哪一行？

当您使用静态行高时，回答这些问题是微不足道的；但是，对于动态行高，您需要维护一些额外的数据结构。

这大致是我在 Slick.Grid.js 中所做的更改

添加一个新数组来跟踪行大小。将所有行初始化为默认大小 删除createCssRules中设置单元格高度的css规则 在 renderRows 末尾添加一些代码，检查行中每个单元格的渲染高度，然后将所有单元格的高度设置为最大值（并将高度存储在行大小数组中）。您还需要根据当前行上方的行高总和来调整顶部偏移量。 在渲染末尾添加代码，将画布的大小调整为所有行高的总和。 更新 getViewport 以根据行高总和返回顶部和底部行。 还有一些使用 options.rowHeight 的其他地方。您可以忽略其中的一些，但至少在调整画布大小的任何地方都需要更改。

为了实现这一点（高性能），您还需要一个行顶偏移缓存（一个行大小总和的缓存）。这样可以快速计算第一个问题，并允许二分搜索回答第二个问题。

希望对你有帮助。

【讨论】：

通过此实现，您对渲染基准产生了什么样的性能影响？

有机会看到你实现这个的 github 要点吗？

【参考方案3】：

我知道这不符合问题的核心，但现在决定了一个简单的解决方案，该解决方案省力且满足我目前的要求。所以，这只是以防其他人也在寻找简单的解决方案。

我从一个输入框开始，更改值会调整行的大小。但是，我现在决定使用滑块。事实上，由于我的网格中的数据如此之少（保证是少量数据，并且行数很少），我会随着滑块的滑动动态调整网格的大小。现在，我知道很多人会说这是一个糟糕的主意，因为它可能非常慢，但是我再次使用了非常少量的数据。

关键是我再次使用选项中设置的新 rowHeight 值重新创建网格。

包括 jQuery UI： 为滑块和值创建元素 确保在页面加载时设置和初始化网格。

添加代码以处理滑块并重新创建网格（或者，如果您不想在每个滑动刻度上重绘，您可以将我在“滑动”功能中的内容移动到“停止”功能）：

$j( "#resizeRowSlider" ).slider(
      range:"min"
    , min: 50
    , max: 200
    , value: 50
    , create: function( even, ui ) 
        $j("rowResizeValue").html( "50" );
    
    , slide: function( event, ui ) 
        $j( "rowResizeValue" ).html( ui.value );

        options.rowHeight = ui.value;

        // I do a manual resize; you could use autoHeight:true in grid options
        resizeGrid();

        grid = new Slick.Grid("#" + gridElemId, json, columns , options);
        grid.setSelectionModel(new Slick.RowSelectionModel() );

        refreshGrid(); // Handle invalidate, resizeCanvas
    
    , stop: function( event, ui ) 
    
);

另外，我应该注意，这不是以每行为基础的，但同样，它现在符合我的需求。这并不理想，但它有效。此外，如果您确实需要第一次渲染网格而没有任何溢出，您可以在获得相关文本时创建一个隐藏的 div 并添加display:table-cell，然后获取 div 高度并将该值设置为 rowHeight 的网格选项.然后，创建（或重新创建）网格。

【参考方案4】：

在@Stephen Robinson 在这里的回答的帮助下，我已经在我的项目中实现了这一点。 如果有人感兴趣，可以查看：https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js. 如果您将 options.enableWrap 设置为 true，则可以使用上面的文件启用它。 谢谢。

【参考方案5】：

对于 Vihari Piratla 的解决方案 - 我已经下载了 Seaview，修改了它的 /SlickGrid-master/examples/example1-simple.html 以添加新选项 enableWrap - 在我的测试期间，example1-simple.html 继续按预期工作enableWrap 设置为 false，但当其设置为 true 时，网格被绘制为空且没有内容。我想知道是否有特殊的方式使用 enableWrap 选项？

【讨论】：

Seaview的3.0版分支，希望你用的是这个。

感谢您这么快回来！我试过 3.0 分支，但它也给了我空白网格。我试图修复 slick.grid.js 代码中的一些地方，例如data.getLength() 和 getDataLengh()，data.getItem() 和 getDataItem().. 之后内容被绘制到大约 30+ 行（如果我可以定义在 init 时预加载多少就可以了），但是编辑单元格不再起作用..我不确定我所做的更改是否正确..

我不确定您是否可以编辑单元格，因为我没有为此烦恼。这应该是观察到的行为：一旦加载应该显示所有行（分页可能不起作用）。为了使其成为 O(constant)，行高仅在向下滚动时计算和添加，因此分页可能不起作用。

【参考方案6】：

github上还有JLynch7的可变高度实现：

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

据我了解，高度是由用户设置的，不会根据行单元格的内容自动计算（我只查看了 example/example-variable-row-height-dataview.html）

【参考方案7】：

我最近分叉了 SlickGrid 以添加一系列新功能 - 包括可变（和可调整大小）行。你可以在这里试试：https://github.com/globexdesigns/doby-grid

【参考方案8】：

在外面定义这个变量....

var tableHeight = 0;

在创建光滑网格之前，请使用以下行：

// 每行 30 像素，这将覆盖标题...您可以为您的表格调整此值。

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400))
       $("#myGrid").height($(window).height() - 400);
else
       $("#myGrid").height(tableHeight);

如果用户在页面已经生成时改变屏幕，下面将根据屏幕和数据行数调整表格的大小：

    $(window).resize(function() 

    // For grid height
    if(tableHeight >  ($(window).height() - 400))
        $("#myGrid").height($(window).height() - 400);
    else
        $("#myGrid").height(tableHeight);
    

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
);

【参考方案9】：

作为上述选项的总结，它们都不是官方的、受支持的和生产就绪的。甚至 doby-grid 选项（更受支持）仍然列为未准备好生产。

注意，也有区别：

可以为每行单独更改行高。 文本可以换行到下一行。 行高可以自动调整以适应内容。

令人惊讶的是，对于上面的所有 SlickGrid 变体（以及许多其他 DataGrid 库），您可能会得到上述的一两个，但不是全部三个。

如果您不太关心官方、支持和生产就绪，那么这是我测试上面列出的 3 个 SlickGrid 变体的印象：

海景

用户报告仅显示白色的问题，未经编辑单元格测试（警告），分页可能不起作用（警告）。 我对演示的测试发现，它可以包装文本并自动改变单元格高度，但有一个错误，即行/边框偏离了几个像素。所以可能可用，但尚未准备好生产。 我尝试下载并使用它。它在单元格中包含文本 - 很好。 它对单元格高度的自动调整非常破碎/不完整，这使得文本的换行实际上毫无用处（除非您修复了行高 - 不是很好）。 我已经部分修复了单元格高度的自动调整，但还有很多工作要做。不是一个简单的任务。不能开箱即用。绝对没有准备好生产。

JLynch7

没有下载就无法运行演示。 我尝试下载并使用它。它有问题（我必须对其进行修复才能使其正常工作），添加可变行高，但似乎不会包裹文本，也不会根据文本自动调整行高！。它没有被积极维护。而且不是很受欢迎，所以支持得不是很好。 Seaview 似乎更高级，尽管它的“自动调整行高”功能被破坏了。

doby-grid

处于 alpha 阶段 - 尚未准备好生产。似乎是一个相当大的分支 - 有很多变化。 我试过了。入门是令人困惑的，但它的工作。需要 bowser 和 Require JS。 options.resizableRows 是我们想要的一半 - 您可以手动动态更改行高。但是没有自动调整行高的大小以适应内容！？？！！ This issue 声明“添加真正动态的行高（受行内容影响）将需要我们禁用很多功能。”。 他们提供了几种可能的解决方案，但一位坚定的开发人员尝试了这一点，但遇到了很多麻烦。他可能已经成功了，或者他可能已经放弃了。我不会冒险的。

【讨论】：

这是现在主仓库的插件：www.slickgrid.net

【参考方案10】：

由于 SlickGrid 的分支在许多方面都不是真正可行的选择，我认为这篇文章的许多读者讨论 SlickGrid 的替代方案会很有价值。

我认为完全支持可变行高的“可行替代方案”是：每行可以有不同的行高，自动适应内容，并让文本换行到下一行。

我对此进行了相当广泛的研究，但不幸的是，我还没有找到与 SlickGrid 相关的可行替代方案。 在其他替代方案中，我只找到了一个可免费用于商业用途的 - dojox DataGrid，但目前尚不清楚如何使用自定义编辑器（大多数商业版本都提供此功能）。

有很多可行的替代方案需要付费才能用于商业用途：dhtmlxGrid、jQuery EasyUI DataGrid、jQWidgets、Wijmo Grid 小部件、JideTable 和 Sencha ExtJS Grids。其中，我个人认为最好的是 dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - 免费版是 GPL，专业版是 199 美元。