javascript - SlickGrid 中是否有可能使用可变行高？

Question

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

你能指出我的任何例子吗？

score 14 · Accepted Answer

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

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

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

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

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

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

我希望这会有所帮助。

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

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

关键是我使用选项中设置的新 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 的网格选项。然后，创建（或重新创建）网格。

score 2 · Accepted Answer

2

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

于 2010-05-10T20:18:08.753 回答

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

请注意，两者之间也存在差异：

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

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

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

海景

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

林奇7

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

多比网格

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

由于 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 美元。

score 0 · Accepted Answer

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

变量表高度 = 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();
});

score 0 · Accepted Answer

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

javascript - SlickGrid 中是否有可能使用可变行高？

10 回答 10

Related

Reference