如何以百分比指定光滑网格的宽度？答案

【问题标题】：How to specify the width of a slick grid in percentage?如何以百分比指定光滑网格的宽度？
【发布时间】：2011-03-06 03:57:27
【问题描述】：

有人知道如何以百分比设置网格的宽度吗？

例如但在页面中，网格的宽度超过 2000 像素。它不会根据页面宽度进行调整。

任何帮助将不胜感激。

谢谢帕德马纳班

【问题讨论】：

我也想知道。 SlickGrid 速度很快，但不如 YUI DataTable 流行。

标签： javascript slickgrid

【解决方案1】：

我看到这个问题真的很老了，但是我在试图弄清楚如何让我的列占据表格的整个宽度时遇到了这个问题。希望有一天它会对某人有所帮助。

我不知道如何显式设置列宽，但我确实让它隐式工作。

这是怎么做的：

首先在您的列声明中添加 width: 300（或任何您想要的宽度）

{id:"name", name:"Student Name", field:"firstName", width: 300}

为所有列设置此项，您想要更宽的列放一个更大的数字，例如500

然后在您的选项声明中添加 forceFitColumns: true

{enableCellNavigation: true, enableColumnReorder: false, forceFitColumns: true};

通过这样做，我能够让我的表格列占据表格的剩余空间，并保持我想要的部分相对于彼此。

【讨论】：

这对我来说非常有效。我建议 Padmanabhan 接受这个答案。
是的。使用forceFitColumns: true 选项并将网格容器的宽度设置为百分比。
我认为的诀窍是确保您指定的宽度加起来大于实际宽度。否则，我仍然发现宽度是相同的。

【解决方案2】：

我有一个功能可以调整网格大小。

    function resizeGrid(newsize, grid) {
            $('#dataGrid').css('width', newsize);
            grid.resizeCanvas();
    }

不要忘记将forceFitColumns: true 添加到您的网格选项中，就像上面 conman 所说的那样

【讨论】：

【解决方案3】：

仅供参考，这似乎在最新版本的 SlickGrid 中开箱即用。 :)

【讨论】：

在firefox中还是不行。在即，它总是有效的。很奇怪。

【解决方案4】：

是的，这是可能的，但我找不到简单的解决方案。所以你必须对它进行相当多的定制。

我目前正在为此寻找解决方案。这是一个工作示例，但它确实有一些错误。其中一些来自 jsfiddle 设置。 http://jsfiddle.net/MQBLn/8/

基本上我创建了一个基于列标题大小格式化单元格的函数。然后，只要有动作，您就必须调用该函数。（排序、调整大小等）此外，我确实必须对 slick.grid.js 进行一些小的更改，因此您会发现它加载在 JS 部分的顶部，然后是自定义 js。然后是一些css的覆盖规则。

这是我的单元格格式化函数

function formatCells(grid)
{
    var columns = grid.getColumns();
    var grid_width = grid.getGridPosition().width;
    var header = $(".slick-header-columns");

    for(var i in columns)
    {
        $(".slick-cell.r"+i).css("width", (Math.floor(((header.children().eq(parseFloat(i)).width()+9)/(grid_width-_scrollBarWidth))*10000)/100)+"%");
    }
}

我希望这很有用，也许有一天会作为设置内置到 SlickGrid 中。

【讨论】：

【解决方案5】：

SlickGrid 格式化程序为您提供 5 个参数：

formatter: function ( row, cell, value, columnDef, dataContext )

您可以使用 dataContext 参数在特定的格式化程序等中调整列的宽度：dataContext.width = 600 使特定列变为 600 像素。

示例

    {
        /* Categories */
        id: "categories",
        formatter: function ( row, cell, value, columnDef, dataContext ) {
            var html = '';

            if ( value.indexOf( 'variation-child' ) != -1 ) {
                return value;
            } else if ( value ) {
                for ( var i = 0; i < value.length; i++ ) {
                    if ( value[ i ] ) {
                        html += '<div class="box category-box" title="' + value[ i ] + '">' + value[ i ] + '</div>';
                    }
                }
            }

            columnDef.width = 600 * value.length;

            return html;
        },
        name: "Categories", field: "categories", sortable: true, editor: Slick.Editors.TaxonomyPopupEditor
    }

记得在向网格添加数据后使用grid.resizeCanvas();（重新计算宽度）。

【讨论】：