Отправить запрос Ajax от JqGrid ShowLink нажмите

Question

Мне нужно загрузить динамический html, когда пользователь нажимает на ссылку в jqGrid.

вот мое определение

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 
       {} 
    ); 
}; 

, как вы можете видеть, я хотел бы, чтобы загрузить форму изменения. Как я могу сказать jqGrid, чтобы сделать вызов ajax на клике showLink? Благодаря

Answer 1

Возможное решение может выглядит следующим образом:

1. В «Имя пользователя» вы удалите ненужный edittype: 'select' и align: 'left' и рассмотреть, чтобы добавить title: false вместо того, чтобы удалить отображение всплывающей подсказке при наведении курсора мыши на ячейку с помощью мыши ,
2. Изменить formatoptions которые содержат formatter: 'showlink' следующим образом: formatoptions: { baseLinkUrl: 'javascript:', showAction: "MyBase.GetAndShowUserData(jQuery('#userlist'),'#myDiv','", addParam: "');" }. jqGrid построит атрибут href элемента <a>, например: href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'#userDetails','?id=rowId');", где rowId будет идентификатором соответствующей строки сетки.
3. Добавить глобальной функции (определяются на верхнем уровне JavaScript), например, с именем MyBase.GetAndShowUserData, как следующее:

(В коде ниже мы используем глобальный MyBase только разделяют пространства имен)

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); 
      } 
     }); 
    } 
}; 

Я полагаю здесь, что на странице есть <div> или другой элемент с id="userDetails" как

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

и функция MyBase.GetAndShowUserData сделает вызов ajax и заполнит результаты внутри <div id="userDetails"></div>. Код внутри MyBase.GetAndShowUserData является только сырым шаблоном. Я хотел только показать, как вы можете получить доступ к данным из сетки.