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

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/

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

这是我的Cell Formatter函数

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