17

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

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

任何帮助，将不胜感激。

谢谢帕德马纳班

4

5 回答 5

25

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

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

这是怎么做的：

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

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

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

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

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

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

于 2012-05-29T03:32:57.127 回答
2

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

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

forceFitColumns: true正如上面的 conman 所说，不要忘记添加到您的网格选项

于 2014-03-12T09:10:41.730 回答
0

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

于 2010-09-14T23:31:41.350 回答
0

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

我目前正在为此寻找解决方案。这是一个工作示例，但它确实有一些错误。其中一些来自 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 中作为设置。

于 2013-12-17T05:37:07.410 回答
0

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();每当您完成向网格添加数据时，请记住使用（重新计算宽度）。

于 2016-08-01T08:58:44.853 回答