Appliquez la largeur de la colonne de WebGrid dans MVC3

J'Ai utilisé WebGrid de prendre avantage de la intégré le tri et la pagination dans l'application MVC et ça fonctionne très bien, seul problème je ne pouvais pas fixer et à regarder ici l'aide de quelqu'un

Mon webgrid est comme ci-dessous

@{
        var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
        grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(columns: grid.Columns(

        grid.Column("Name", "Name", canSort: true),
        grid.Column("Address", "Address", canSort: true),        
        //other columns
        ));
  }

Comment puis-je fixe la largeur de chaque colonne par mon exigence? (besoin de différentes largeur de colonne différent)

OriginalL'auteur Arun Rana | 2012-02-20

  1. 25

    Vous pouvez utiliser les styles:

    @grid.GetHtml(columns: grid.Columns(
    grid.Column("Name", "Name", canSort: true, style: "name"),
    grid.Column("Address", "Address", canSort: true, style: "address")
));

    et dans votre fichier CSS:

    .name {
    width: 50px;
}

.address {
    width: 300px;
}
    merci pour votre aide mais je n'ai plus d'un thème et je dois gérer avec customthemeengine, est-il une autre option pour régler la largeur en le mettant dans la grille.GetHtml() l'article?

    OriginalL'auteur Darin Dimitrov

  2. 1

    À ajouter pour les bons conseils de Darin Dimitrov, serait recommandons, en outre, une convention (depuis CSS favorise la réutilisation), essayez d'utiliser l'existant ou des styles communs pour souvent utilisé des éléments (par exemple, les colonnes)--n'oubliez pas que vous pouvez appliquer plusieurs styles, séparés par un espace, ici, aussi, ils vont tout simplement être fusionné dans le nouvel attribut.

    @{
    var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
    grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(columns: grid.Columns(

    grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"),
    grid.Column("Address", "Address", canSort: true, style: "col-med address"),        
    //other columns
    ));

    }

    /*styles*/
.col-sm { width: 100px; min-width: 90px; }
.col-med { width: 150px; min-width: 120px; }  <--could be reused
.address { font-weight: bold; } <-- could be reused
.cssOther3 { font-weight: bold; }  <-- may not be as not as reusable
.cssStyle2 { text-align: right; }

    Donc, en d'autres termes, vous n'êtes pas coincé avec un style unique, paquet de continuer à disposer d'une certaine flexibilité lors de l'application de "réutilisation".

    dans mon cas, l'ajout de min-width aidé

    OriginalL'auteur kirkpabk

  3. 0

    Seulement CSS 

    /*IE7+*/  
th:first-child  { width:30px; }  
th:first-child + th { width:30px; }  
th:first-child + th + th  { width:100px; }  
/*IE9 +*/  
th:nth-of-type(1) { width:30px; }  
th:nth-of-type(2) { width:30px; }  
th:nth-of-type(3) { width:100px; }  
th:nth-of-type(4) { width:200px; }  
th:nth-of-type(5) { width:40px; }
    Il ne fonctionne pas du tout.

    OriginalL'auteur pippopd