Question

我想根据内容大小提供可变行高。在Slickgrid有可能吗？

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

Answer 1

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

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

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

这里大致是我在Slick.Grid.js中改变的内容

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

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

我希望有所帮助。

Answer 2

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

Answer 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 ) {
    }
});

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

Answer 4

简单明了，SlickGrid不支持，很可能永远不会。遗憾。

Answer 5

JLynch7还在github上实现了变量高度实现：

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

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

Answer 6

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

Answer 7

作为上述选项的摘要，其中没有一个是官方的，支持的和生产准备好的。即使是doby-grid选项（支持更多）仍然列为非生产就绪。

注意，之间也存在差异：

每行可以单独更改行高。
文字可以转到下一行。
行高可以自动调整以适合内容。

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

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

海景

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

<强> JLynch7

没有下载就无法运行演示。
我尝试下载并使用它。它是错误的（我必须修复它以使它工作），添加变量行高，但似乎不包装文本，并不会根据文本自动调整行高！它没有得到积极维护。而且不是很受欢迎，所以不太受支持。 Seaview似乎更先进，即使它的“自动调整行高”功能被打破了。

<强> doby栅

处于alpha状态 - 未准备好生产。看起来像一个相当大的分叉 - 许多变化。
我试了一下。入门很困惑，但让它运转起来。需要bowser和Require JS。
options.resizableRows是我们想要的一半 - 您可以动态地手动更改行高。但是没有自动重新调整行高以适应内容!! ?? !!
This issue声明“添加真正动态的行高（受行内容影响）将要求我们禁用许多功能。” 他们提供了几种可能的解决方案，但是一位坚定的开发人员尝试过这种解决方案并且遇到了很多麻烦。他可能已经成功，或者他可能已经放弃了。我不会冒险。

Answer 8

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

Answer 9

在...之外定义此变量....

var tableHeight = 0;

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

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

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();
});

Answer 10

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

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

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

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

SlickGrid中是否可以使用变量rowheight？

10 个答案: