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

Question

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

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

任何帮助将不胜感激。

谢谢 帕德马纳班

Answer 1

我发现这个问题确实很老了，但是我在尝试弄清楚如何让我的列占据表格的整个宽度时遇到了这个问题。希望有一天它能帮助别人。

我无法弄清楚如何显式设置列宽，但我确实让它隐式工作。

操作方法如下：

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

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

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

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

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

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

Answer 2

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

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

不要忘记将 forceFitColumns: true 添加到网格选项中，如 conman 上面所述

Answer 3

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

Answer 4

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

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

基本上我创建了一个基于单元格格式的函数在列标题尺寸上。
然后只要有一个 Action 就必须调用该函数。 （排序、调整大小等）
另外，我确实必须对 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 中。

Answer 5

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

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

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

示例

    {
        /* 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(); （重新计算宽度）。