Paramétrage jqgrid

Généralités

Ces exemples montrent les possibilités, mais aussi la complexité d'utiliser les champs jqgrid, javascript et HTML pour utiliser des possibilités supplémentaires de jqGrid .

Il a aussi fallu créer des scripts PHP (getSubGridJson.php, getPivotGridJson.php) sur le serveur pour répondre aux requêtes.
Le paramétrage de JavaScript ou jqGrid peut entraîner un dysfonctionnement de l'application (dépannage).
Bon il n'y a pas de miracle, vous n'échaperez pas à la lecture des manuels de jqGrid.

Détails

Sous grille

Langage Code à mettre dans le champ Table
enregistrement
Champ
Pamètres jqgrid (objet javascript) 
// EXAMPLE : subgrid "PMA_DEMO_EVENT" linked by "PMA_DEMO_CAL_ID" to table "PMA_DEMO_CAL"

subGrid: true,
subgridtype: 'json',
subGridOptions: {
  selectOnExpand : true,
  plusicon : 'ui-icon-triangle-1-s',
  minusicon : "ui-icon-triangle-1-n"
},
jsonReader: {
  subgrid : { repeatitems: false}, // get the data as name:value pair 
  // same as in grid jsonReader :
  userdata: function( json_user_data ) {
    $('#json_message').empty().append( json_user_data.userdata.json_message );
  },
},
// description of the subgrid model
subGridModel:[{
  mapping: ['ID','CODE','ACTION','PROFILES_LST','MAIL','DATE'],
  name: ['Id','Code','Action','Profiles','Mail','Date'],
  width: [60,120,400,300,300,160],
  align: ['right','center','left','left','left','center'],
  params: ['ID']
}],
subGridUrl:subGridUrlGet,
 _LIST_SCREEN
"Demo calendrier"
jqGrid
Javascript 
function subGridUrlGet(params){
  return 'pages/getSubGridJson.php?_W='+window.name+
'&TABLE=PMA_DEMO_EVENT&LINK=PMA_DEMO_CAL_ID&FIELDS=ID,CODE,ACTION,PROFILES_LST,MAIL,DATE';
}
 _LIST_SCREEN
"Demo calendrier"
JavaScript

Table Pivot

Langage Code à mettre dans le champ Table
enregistrement
Champ
Pamètres jqgrid (objet javascript) 
hiddengrid:true, // hide grid
hidegrid:true // hide button
});// jqGrid definition close now instead by PHP script (*)

// parameters see : https://www.guriddo.net/documentation/guriddo/javascript/user-guide/pivotgrid/
jQuery("#pivotgrid").jqGrid('jqPivot',
 "pages/getPivotGridJson.php",
  // pivot options
  {
    xDimension: [{ dataName: 'PMA_DEMO_CAL_ID' }],
    yDimension: [{ dataName: '_STATE_ID' }],
    aggregates: [
    {
       member: 'QTTY',
       aggregator: 'sum',
       width: 30,
       label: 'Somme',
       formatter: 'number',
       align: 'right'
    },
    {
       member: 'CODE',
       aggregator: 'count',
       width: 30,
       label: 'Nombre',
       formatter: 'integer',
       align: 'center'
    }
    ],
    rowTotals: true, 
    colTotals : true
  },
  // grid options
  {
    width: 1280,
    height: 150,
    rowNum: 150,
    pager: "#pager_pg",
    caption: "Démo Tableau croisé dynamique"
  },
  // ajax options
  {
    reader:"root"

 //           }) // close by PHP script (*) !!
 _LIST_SCREEN
"Demo Tableau croisé"
jqGrid
HTML 
<div style="display: flex; justify-content: center;"><table id="pivotgrid"></table></div>
 _LIST_SCREEN
"Demo Tableau croisé"
HTMLBottom

Références

Table des matières de l'aide administrateur

Table des matières de l'aide