Changer de style de jqGrid

Je suis en utilisant jqGrid 3.5. Puis-je changer le style et l'apparence de la grille et de la rendre plus belle à l'aide de jQuery ou CSS personnalisé ou autre chose?

InformationsquelleAutor Arka Chatterjee | 2009-09-12

32

L'une des grandes caractéristiques de jqGrid 3.5 est l'intégration avec jQuery UI Thèmes. Vous pouvez créer et/ou de sélectionner un thème à partir de ici. Puis il suffit d'ajouter une référence dans votre page:
```
<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>
```
Ainsi, vous obtenez une grille qui a l'air très bon, avec un minimum d'effort.

N'est que de résoudre votre problème ou vous avez besoin d'une refonte de la grille de regarder et se sentir encore plus?
- ouais ce un outil très cool ,mais il a certaines limites,vous ne pouvez pas résoudre tout style de problème à partir de là.
- D'accord, mais il est beaucoup plus agréable que ce que vous obtenez out-of-the-box avec jqGrid. À partir de là, cela dépend de vos besoins, soit jQuery thèmes sont assez bon, ou si vous devez rouler votre propre feuille de style CSS.
- Que faire si je veux changer le style css du formulaire d'ajout de la JQGrid lorsque je clique sur ajouter ou le bouton de mise à jour ?
- Je pourrais poser une question: stackoverflow.com/questions/11928974/...
InformationsquelleAutor Justin Ethier

Vous devez modifier l'en-tête de grille (à la volée).

C'est mon code

Le code HTML:

<table id="jqgrid_ctrs" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="jqgrid_ctrs_pager" class="scroll" style="text-align:center;"></div>

La jqGrid:

    jQuery("#jqgrid_ctrs").jqGrid({
        url:'php-modules/controllers_data.php?ctrtype=LED',
        datatype: "json",
        width:500,
        height:"auto",
        colNames:['CtrName','Type', 'Description', 'Location'],
        colModel:[
           {name:'CtrName',index:'CTRNAME', width:70, editable:false},
           {name:'Type',index:'CTRTYPE', width:70, editable:false},
           {name:'Description',index:'CTRDESCR', width:250, editable:false},
           {name:'Location',index:'CTRLOCATION', width:70, editable:false}
        ],
        rowNum:10,
        rowList:[10,20,30],
        pager: jQuery('#jqgrid_ctrs_pager'),
        sortname: 'CtrName',
        viewrecords: true,
        sortorder: 'desc',
        caption:'System Controllers',

    }).navGrid('#jqgrid_ctrs_pager',
                {search:true,edit:false,add:false,del:false}
              );

Afin de comprendre l'objet sur lequel je dois travailler, nous allons inspecter le code HTML généré par le code JavaScript:

<div id="gview_jqgrid_ctrs" class="ui-jqgrid-view" style="width: 760px;">
    <div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"></div>
    <div class="ui-state-default ui-jqgrid-hdiv" style="width: 760px;">

...

Maintenant, la seule div avec un ID spécifié est le <div id="gview_jqgrid_ctrs"...

C'est pourquoi la suivante NE fonctionne PAS.

jQuery("#jqgrid_ctrs").removeClass('.ui-widget-header');
jQuery("#jqgrid_ctrs").addClass('.jqgrid-header');

J'ai eu pour sélectionner le div parent et "rechercher dans" l'en-tête div, ayant la "ui-jqgrid-barre de titre" de la classe spécifiée. Puis j'ai enlevé l'original "ui-widget-d'en-tête" de la classe et de la remplacer par ma propre classe.

$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").addClass('jqgrid-header');

Où .jqgrid-d'en-tête est un style défini de cette façon.

.jqgrid-header { 
    background:#FF9C00 url(images/new_header_bck.png) repeat-x scroll 50% 50%;
    border:1px solid #4297D7;
    color:#FF0000;
    font-weight:bold;
  }

J'ai testé et fonctionne. J'espère que ce sera utile...

Cela m'a beaucoup aidé, merci!
Que faire si je veux changer le style css du formulaire d'ajout de la JQGrid lorsque je clique sur ajouter ou le bouton de mise à jour ?
Juste pour le plaisir de l'optimisation, ce qui pourrait être fait dans un seul sélecteur: $("#gview_jqgrid_ctrs .ui-jqgrid-titlebar").toggleClass("ui-widget-header jqgrid-header");

InformationsquelleAutor MosLeBrut

3

D'élaborer sur ce que Justin Ethier dit...

Depuis jqGrid utilise Jquery-UI thèmes, la meilleure façon de changer l'apparence de la grille serait de faire un custom thème.

Je recommande fortement que vous voyez si cela fonctionne pour vous avant de tenter de modifier le css après le fait... bien que vous pouvez le faire aussi bien, si le jquery-ui thème look est trop limitatives pour vous.
- Que faire si je veux changer le style css du formulaire d'ajout de la JQGrid lorsque je clique sur ajouter ou le bouton de mise à jour ?
InformationsquelleAutor r00fus
3

Je suis sûr que vous le pouvez.

Vous avez deux options:

Vous pouvez modifier le CSS de la grille.
Ceci est utile si vous avez à faire des petites modifications sur le design.
Les principales modifications ne devrait pas être fait de cette façon parce que la JQGrid de classes CSS sont vraiment dépendants les uns des autres.

Ou vous pouvez supprimer tout le style du HTML et de le remplacer par votre propre.

Par exemple vous avez un JQGrid comme:

HTML
```
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager2" class="scroll" style="text-align:center;"></div>
```
jQuery
```
jQuery("#list2").jqGrid({ url:'server.php?q=2', 
 datatype: "json", 
 colNames:['Inv No','Date'],
 colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}],
 rowNum:10, 
 rowList:[10,20,30],
 pager: jQuery('#pager2'), 
 sortname: 'id', 
 viewrecords: true, 
 caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false}); 
```
Cela va générer le code HTML comme ci-dessous:
```
<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>
```
Supprimer toutes les classes CSS:
```
JQuery("#list2").removeClass(".ui-jqgrid-titlebar");
```
etc.

Après que vous avez créé vos propres classes, vous pouvez ajouter à la structure HTML avec:
```
JQuery("#list2").addClass(".YourClass");
```
Je suggère d'utiliser les deux techniques.
- Que faire si je veux changer le style css du formulaire d'ajout de la JQGrid lorsque je clique sur ajouter ou le bouton de mise à jour ?
InformationsquelleAutor Zoltan Veres

/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
    $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
    $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
    $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
    $(".ui-jqgrid-pager").removeClass("ui-state-default");
}

InformationsquelleAutor niko.makela

1

J'ai modifié le css de jQGrid d'une manière nouvelle, qui permettra de soutenir bootastrap design aussi. Vous avez besoin des choses suivantes pour configurer cette jQGrid

1) Font Awesome Style

2) jQGrid Dernier bundle

Nouveau conçu jQGrid ressemblera à l'image ci-dessous

Nouveau full CSS et plein javascripts codage est inclus http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html ici.

InformationsquelleAutor Biby Augustine
0

Vous pouvez supprimer tous les ui-classes de grille:
```
$("[class^='ui-jqgrid']").removeAttr('class');
```
Cela peut avoir des problèmes de performances si votre taille de la grille est grande.

InformationsquelleAutor Alireza Fattahi

Vous devez vous connecter pour publier un commentaire.