Comment spécifier la largeur d'une grille lisse en pourcentage?

Est ce que quelqu'un sait comment régler la largeur de la grille en pourcentage?

par exemple

mais dans la page et la largeur de la grille est plus de 2000 pixels. Il n'a pas à s'adapter à la largeur de la page.

Toute aide serait appréciée.

Merci
Padmanabhan

source d'informationauteur Padmanabhan

  1. 22

    je vois que cette question est vraiment vieux, mais je suis tombé sur cette question, tout en essayant de comprendre comment obtenir mes colonnes de prendre toute la largeur de la table. j'espère que ça va aider quelqu'un un jour.

    je ne pouvais pas comprendre comment définir la largeur des colonnes explicitement, mais j'ai eu à travailler de façon implicite.

    voici comment le faire:

    en premier dans votre colonne déclaration ajouter largeur: 300 (ou quelle que soit la largeur que vous voulez)

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

    définir cette pour tous vos colonnes, celles que vous voulez plus large de mettre un plus grand nombre, par exemple, 500

    ensuite dans vos options declation ajouter forceFitColumns: vrai

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

    en faisant cela, j'ai pu obtenir mes colonnes de la table pour prendre le reste de l'espace de la table, et de maintenir les portions que je veux les uns par rapport aux autres.

  2. 2

    J'ai une fonction pour faire une grille de redimensionnement.

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

    N'oubliez pas d'ajouter forceFitColumns: true à vos options de la grille comme escroc dit ci-dessus

  3. 0

    Pour info, il semble que le travail hors de la boîte, dans les versions récentes de SlickGrid. 🙂

  4. 0

    Oui, c'est possible, mais je ne trouve pas de solution facile.
    Donc, vous avez à le personnaliser un peu.

    Je suis actuellement en train de travailler sur une solution pour ce.
    Voici un exemple de travail, mais il comporte quelques bugs. Certains sont de jsfiddle de l'installation.
    http://jsfiddle.net/MQBLn/8/

    fondamentalement, j'ai créé une fonction qui met en forme les cellules basée sur le Titre de la Colonne Taille.
    Ensuite, vous devez appeler cette fonction à chaque fois qu'il y a une Action. (Tri, Redimensionner, Etc.)
    Aussi j'ai dû faire quelques modifications mineures à slick.grid.js vous trouverez Donc ci est chargé en haut de la JS section suivie par la coutume js. Puis quelques règles de réécriture pour le css.

    Voici ma Cellule Formateur de la Fonction

    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)+"%");
    }
}

    J'espère que cela est utile et peut-être un jour intégré dans SlickGrid comme un paramètre.

  5. 0

    La SlickGrid-formateur de vous fournir avec 5 paramètres: 

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

    Vous pouvez ajuster les colonnes de " la largeur à l'aide du dataContext de paramètre, à l'intérieur du module de formatage, etc: dataContext.width = 600 rend la colonne spécifique 600px.

    Exemple

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

    N'oubliez pas d'utiliser grid.resizeCanvas(); (recalculer les largeurs), à chaque fois que vous avez terminé d'ajouter des données à la grille.