Comprendre les comportements de largeur de colonnes JQGrid

J'ai un arbre de la grille avec de nombreuses colonnes, le tout avec largeur spécifique. Et le garçon, il a l'air terrible puisque les en-têtes ne sont pas synchronisés avec les colonnes ci-dessous, même si j'ai des données court.

Plus précisément, si l'en-tête de colonne titre est plus courte que cette largeur d'une colonne, l'en-tête se rétrécit vers le bas à la taille du texte dans l'en-tête.

Comment puis-je faire de l'en-tête être exactement la même taille que la colonne?

Question 2: j'ai remarqué que, bien que la documentation dit que les colonnes de "largeur" est en pixels, je peux voir que ce n'est pas vraiment en pixels, mais seulement un nombre par rapport à d'autres largeurs de grille. E. g. si tous les champs sont de taille 10, ils seront tous de la même taille, mais pas 10 pixels en largeur.

Merci d'avance pour les éclaircissements, que cette simple question semble avoir des racines plus profondes que ce que je pensais.

source d'informationauteur AlexA

13

Essayer de jouer avec les 'autowidth" et "shrinkToFit' jqGrid paramètres. Par exemple, si "shrinkToFit' est vrai, des colonnes de largeur sera modifié que si les largeurs définit pourcentage. Lire plus ici.
3

J'ai eu le même problème. Il s'est avéré être l'existant, par défaut de site, des définitions de css pour le rembourrage sur les cellules d'un tableau. Assurez-vous que votre rembourrage est cohérent entre votre th et td balises. J'ai mis un div autour de la grille avec une classe de div, et ajouté ce qui suit à mon CSS:
```
.grid td, .grid th {
    padding: 1pt 1ex !important;
}
```

colModel: [
{ name: 'Email', index: 'Email', editable: true, edittype: 'custom', width: 220,
                editoptions: {
                    custom_element: function(value, options) { return EmailAddressCustomElement(value, options); },
                    custom_value: function(elem) { var inputs = $("input", $(elem)[0]); return inputs[0].value; }
                }
            },
            { name: 'LocationAndRole', index: 'LocationAndRole', editable: true, align: "left", edittype: "button", width: 170,
                editoptions: { value: 'Edit Location And Role', dataEvents: [{ type: 'click', fn: function(e) { ShowUsersLocationAndRoles(e); } }, ] }
            },



gridComplete: function() {
var objRows = $("#list_accounts tr");
                var objHeader = $("#list_accounts .jqgfirstrow td");
                if (objRows.length > 1) {
                    var objFirstRowColumns = $(objRows[1]).children("td");
                    for (i = 0; i < objFirstRowColumns.length; i++) {
                        $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width"));
                    }
                }
            }

J'ai eu le même problème. J'ai résolu ce problème en ajoutant 4 lignes de code dans GridComplete. ces 4 lignes de modifier le style de la banque td de la zone de contenu [de la première ligne de la td en matière de modifications de style est assez]. C'est un problème dans jqgid. Qui est en fait le réglage de la td à l'intérieur de la " mais ce style n'est pas reflétée dans le td de la zone de contenu. Tout en développant jqgrid ils ont supposé que la totalité de la largeur des colonnes sera effectué par de changer les largeurs d'une ligne de tds, mais ils ont seulement changé pour " qui est la persistance de la question ici.

Définir les largeurs de colonne dans la ColModel:

colModel: [
    { 
        name: 'Email', 
        index: 'Email', 
        editable: true, 
        edittype: 'custom', 
        width: 220, 
        editoptions: { 
            custom_element: function(value, options) {
                return EmailAddressCustomElement(value, options); 
            },
            custom_value: function(elem) { 
                var inputs = $("input", $(elem)[0]); 
                return inputs[0].value; 
            } 
        }
    }, 
    { 
        name: 'LocationAndRole', 
        index: 'LocationAndRole', 
        editable: true, 
        align: "left", 
        edittype: "button", 
        width: 170, 
        editoptions: { 
            value: 'Edit Location And Role', 
            dataEvents: [{ 
                type: 'click', 
                fn: function(e) { ShowUsersLocationAndRoles(e); } 
            }] 
        } 
    },

Ajouter le code ci-dessous dans le gridComplete événement:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 
    if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
            $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
    } 
}

J'espère que le code ci-dessus vous aideront dans la résolution de la question.

<div id="pager"></div>
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>
<script type="text/javascript">
    var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
    var colModelData = [
        {name:'invid', index:'invid', width:55},
        {name:'invdate', index:'invdate', resizeToTitleWidth:true},
        {name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
    jQuery(document).ready(function() {
        var ruler = document.getElementById('ruler');
        for (var i in colNamesData) {
            if (colModelData[i].resizeToTitleWidth != true) {
                continue;
            }
            //Measure the title using the ruler span
            ruler.innerHTML = colNamesData[i];
            //The +26 allows for padding and to fit the sorting UI
            var newWidth = ruler.offsetWidth + 26;
            if (newWidth < 100) {
                //Nothing smaller than 100 pixels
                newWidth = 100;
            }
            colModelData[i].width = newWidth;
        }
        jQuery("#list").jqGrid({
            ...
            colNames: colNamesData,
            colModel: colModelData,
            shrinkToFit:false,
            ...
    });
</script>

Définir la largeur de Chaque Colonne en pourcentage par CSS

Ajouter des classes css ci-dessous

table.ui-jqgrid-htable thead{display:table-header-group}
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}

Maintenant Définir la largeur de chaque colonne et de

#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}

Vous devez vous connecter pour publier un commentaire.