Javascript 如何以百分比指定平滑栅格的宽度？

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

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

任何帮助都将不胜感激

谢谢

---

Padmanabhan

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

我知道这个问题已经很老了，但我在试图弄清楚如何让我的列占据整个表的宽度时遇到了这个问题。希望有一天它能帮助别人

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

以下是如何做到这一点：

首先在列声明中添加宽度：300（或任意宽度）

为所有列设置此选项，您希望更宽的列将显示更大的数字，例如500

然后在选项中添加forcefit列：true

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

    {
        /* 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
    }

---

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

是的，这是可能的，但我找不到一个简单的解决办法。 因此，您必须对其进行大量定制

我目前正在为此制定解决方案。 下面是一个工作示例，但它确实有一些bug。其中一些来自JSFIDLE设置。

基本上，我创建了一个函数，该函数根据列标题大小格式化单元格。 然后，只要有操作，就必须调用该函数。（排序、调整大小等） 此外，我还对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中作为设置。

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

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

---

不要忘记将

forceFitColumns:true

添加到您的网格选项中，正如康曼在上面所说的那样

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

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

您可以在特定的格式化程序中使用dataContext参数调整列的宽度，等等：

dataContext.width=600

使特定列为600px

示例

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

    {
        /* 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
    }

{
/*类别*/
id:“类别”，
格式化程序：函数（行、单元格、值、列定义、数据上下文）{
var html=''；
if（value.indexOf（'variation child'）！=-1）{
返回值；
}else if（值）{
对于（变量i=0；i

---

记住使用

grid.resizeCanvas（）（重新计算宽度），无论何时向网格添加数据
 我也想知道。SlickGrid速度很快，但不如YUI DataTable那么受欢迎。在firefox中，它仍然不起作用。在ie中，它总是有效的。很奇怪，这对我来说非常有效。我建议Padmanabhan接受这个答案。是的。使用
forceFitColumns:true
选项并将网格容器的宽度设置为百分比。我认为这样做的诀窍是确保指定的宽度总和大于实际宽度。否则，我仍然发现宽度是相同的。