Отправить запрос Ajax от JqGrid ShowLink нажмите - PullRequest
Новая
       21

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

1 голос
/ 31 августа 2010

Мне нужно загрузить динамический 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? Спасибо

1 Ответ

1 голос
/ 31 августа 2010

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

  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 является только необработанным шаблоном.Я хотел только показать, как вы можете получить доступ к данным из сетки.

...