web-dev-qa-db-fra.com

Changer le style de jqGrid

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

javascriptjquerycssjqgrid
20
Arka Chatterjee

L'une des grandes fonctionnalités de jqGrid 3.5 est l'intégration avec les thèmes d'interface utilisateur jQuery. Vous pouvez créer et/ou sélectionner un thème parmi ici . Ajoutez-y ensuite une référence dans votre page:

<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>

Cela vous donnera une grille qui a l'air très bien, avec un minimum d'effort.

Est-ce que cela résout votre problème ou avez-vous besoin de revoir encore plus l'apparence de la grille?

32
Justin Ethier

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

C'est mon code

Le HTML:

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

Le 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 dans quel objet je dois travailler, examinons 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, le seul div avec un ID spécifié est le <div id = "gview_jqgrid_ctrs" ...

C'est pourquoi les éléments suivants NE FONCTIONNENT PAS.

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

J'ai dû sélectionner le div parent et "rechercher dans" le div d'en-tête, en spécifiant la classe "ui-jqgrid-titlebar". Ensuite, j'ai supprimé la classe "ui-widget-header" d'origine et l'ai remplacée 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-header 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é cela et ça marche. J'espère que cela vous sera utile ...

19
MosLeBrut

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 devez apporter de petites modifications à la conception. Les modifications majeures ne doivent pas être effectuées de cette façon car les classes CSS de JQGrid sont vraiment dépendantes les unes des autres.

Ou vous pouvez supprimer tout le style du HTML et le remplacer par le vôtre.

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 générera du HTML comme ci-dessous:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">

..

</div>

Supprimez toutes les classes CSS:

JQuery("#list2").removeClass(".ui-jqgrid-titlebar");

etc.

Après avoir créé vos propres classes, vous pouvez ajouter à la structure HTML avec:

JQuery("#list2").addClass(".YourClass");

Je suggère d'utiliser les deux techniques.

3
Zoltan Veres

Pour développer ce que dit Justin Ethier ...

Étant donné que jqGrid utilise des thèmes Jquery-UI, la meilleure façon de changer l'apparence de la grille serait de faire un theme personnalisé.

Je vous recommande fortement de voir si cela fonctionne pour vous avant d'essayer de modifier le CSS après coup ... bien que vous puissiez le faire également, si le look du thème jquery-ui est trop confinant pour vous.

3
r00fus

J'ai modifié CSS de jQGrid d'une nouvelle manière, qui supportera également la conception de bootastrap. Vous devez suivre les choses suivantes pour configurer ce jQGrid

1) Style impressionnant de police

2) Dernier pack jQGrid

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

jQGrid New Design

Un nouveau codage CSS et javascripts complet est inclus http://www.techdoubts.net/2015/11/working-jqgrid-responsive-css-boostrap.html ici.

1
Biby Augustine
/* 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");
}
1
niko.makela

Vous pouvez supprimer toutes les classes ui-grid:

$("[class^='ui-jqgrid']").removeAttr('class');

Cela peut avoir des problèmes de performances si la taille de votre grille est grande.

0
Alireza Fattahi