Envoyer une requête Ajax à partir de JqGrid ShowLink cliquez sur

Question

J'ai besoin de charger du code HTML dynamique lorsqu'un utilisateur clique sur un lien dans un jqGrid. comme vous pouvez le voir je voudrais charger un formulaire de modification

ici est ma définition

function loadUserAdministrationList() { 
    jQuery("#userlist").jqGrid({ 
     url: '/Administration/GetData/', 
     datatype: 'json', 
     mtype: 'GET', 
     colNames: ['Username', 'Prénom', 'Nom', 'Courriel'], 
     colModel: [{ name: 'Username', index: 'Username', width: 300, align: 'left', 
        edittype: 'select', formatter: 'showlink', 
        formatoptions: { baseLinkUrl: '/Administration/ModifyUser'} }, 
       { name: 'Prénom', index: 'Firstname', width: 300, align: 'left' }, 
       { name: 'Nom', index: 'Lastname', width: 300, align: 'left' }, 
       { name: 'Courriel', index: 'Email', width: 300, align: 'left'}], 
     pager: jQuery('#userlistpager'), 
     rowNum: 20, 
     rowList: [5, 10, 20, 50], 
     sortname: 'Firstname', 
     sortorder: "asc", 
     height:600, 
     viewrecords: true, 
     imgpath: '/Public/css/theme/custom/images', 
     caption: '', 
     loadtext: 'Chargement des utilisateurs...' 
    }).navGrid('#userlistpager', 
       { search: true, edit: false, add: false, del: false }, 
       {}, // default settings for edit 
       {}, // default settings for add 
       {}, // default settings for delete 
       { closeOnEscape: true, multipleSearch: true, 
        closeAfterSearch: true }, //search options 
       {} 
    ); 
}; 

. Comment puis-je dire à jqGrid de faire un appel ajax sur le clic de showLink? Merci

Answer 1

pourrait ressemble à une solution suivante:

1. Dans le « Nom d'utilisateur » vous supprimez inutiles edittype: 'select' et align: 'left' et envisager d'ajouter title: false au lieu de supprimer l'affichage de l'info-bulle sur hover une cellule avec la souris .
2. Modifier formatoptions qui contiennent formatter: 'showlink' à suivre: formatoptions: { baseLinkUrl: 'javascript:', showAction: "MyBase.GetAndShowUserData(jQuery('#userlist'),'#myDiv','", addParam: "');" }. jqGrid va construire href attribut de <a> élément comme suit: href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'#userDetails','?id=rowId');" où rowId sera l'id de la ligne de la grille correspondante.
3. Ajouter une fonction globale (définie au niveau supérieur de JavaScript par votre navigateur), par exemple avec le nom MyBase.GetAndShowUserData comme suit:

(Dans le code ci-dessous nous utilisons MyBase global que pour les espaces de noms)

var MyBase = {}; 
MyBase.GetAndShowUserData = function (grid,tagetDivSelector,param) { 
    // param will be in the form '?id=rowId'. We need to get rowId 
    var ar = param.split('='); 
    if (grid.length > 0 && ar.length === 2 && ar[0] === '?id') { 
     var rowid = ar[1]; 
     var username = grid.getCell(rowid, 'Username'); 
     var userDetails = jQuery(tagetDivSelector); 
     userDetails.empty(); 
     jQuery.ajax({ 
      url: '/Administration/ModifyUser', 
      data: { userId: rowid, userName: username }, 
      type: 'GET', 
      // optional contentType (depend on your server environment): 
      // contentType: 'application/json', 
      dataType: 'json', 
      success:function(data,st) { 
       var s = "BlaBla"; 
       // TODO: construct HTML code based on data received from the server 
       userDetails.html(s); 
      }, 
      error:function(xhr,st,err){ 
       alert(st + ": " + data.responseText); 
      } 
     }); 
    } 
}; 

Je suppose ici que sur votre page il y a un <div> ou un autre élément avec id="userDetails" comme

<table id="userlist"></table> 
<div id="pager"></div> 
<div id="userDetails"></div> 

et la fonction MyBase.GetAndShowUserData va effectuer un appel ajax et remplir les résultats à l'intérieur du <div id="userDetails"></div>. Le code à l'intérieur de MyBase.GetAndShowUserData est un modèle brut uniquement. Je voulais seulement montrer comment vous pouvez accéder aux données de la grille.