Как указать ширину сетки в процентах?

Ответ 1

Я вижу, что этот вопрос действительно старый, но я столкнулся с этим вопросом, пытаясь выяснить, как заставить мои столбцы использовать всю ширину таблицы. надеюсь, это когда-нибудь поможет кому-нибудь.

Я не мог понять, как установить ширину столбца явно, но я сделал это для работы неявно.

вот как это сделать:

сначала в объявлении столбца добавьте width: 300 (или любую нужную ширину)

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

установите это для всех ваших столбцов, те, которые вы хотите увеличить, помещают большее число, например. 500

то в ваших настройках параметров добавьте forceFitColumns: true

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

выполнив это, я смог заставить столбцы таблицы заняться оставшимся пространством таблицы и поддерживать части, которые я хочу относительно друг друга.

Ответ 2

У меня есть функция для изменения сетки.

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

Не забудьте добавить forceFitColumns: true к вашим параметрам сетки, как говорит конман

Ответ 3

FYI, похоже, это работает из коробки в последних версиях SlickGrid.:)

Ответ 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-formatter снабжает вас 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(); (пересчитать ширину), когда вы закончите добавлять данные в сетку.