从JqGrid ShowLink发送Ajax请求click [英] Send Ajax request from JqGrid ShowLink click

问题描述

当用户单击jqGrid中的链接时，我需要加载一些动态html.

I need to load some dynamic html when a user click on a link in a 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单击showLink进行ajax调用? 谢谢

as you can see i would like to load a modification form. How can i tell jqGrid to do an ajax call on the click of showLink ? Thanks

推荐答案

可能的解决方案如下:

1. 在用户名"中，删除不需要的edittype: 'select'和align: 'left'，并考虑添加title: false，而不是删除鼠标悬停在单元格上时工具提示的显示.
2. 将包含formatter: 'showlink'的formatoptions修改为以下内容:formatoptions: { baseLinkUrl: 'javascript:', showAction: "MyBase.GetAndShowUserData(jQuery('#userlist'),'#myDiv','", addParam: "');" }. jqGrid将构造<a>元素的href属性，如下所示:href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'#userDetails','?id=rowId');"其中rowId是相应网格行的ID.
3. 添加一个 global 函数(在JavaScript的顶层定义)，例如，名称为MyBase.GetAndShowUserData，如下所示:

1. In the 'Username' you remove unneeded edittype: 'select' and align: 'left' and consider to add title: false instead to remove displaying of the ToolTip on hover a cell with the mouse.
2. Modify formatoptions which contain formatter: 'showlink' to following: formatoptions: { baseLinkUrl: 'javascript:', showAction: "MyBase.GetAndShowUserData(jQuery('#userlist'),'#myDiv','", addParam: "');" }. jqGrid will construct href attribute of <a> element like following: href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'#userDetails','?id=rowId');" where rowId will be the id of the corresponding grid row.
3. Add a global function (defined on the top level of your JavaScript) for example with the name MyBase.GetAndShowUserData like following:

(在下面的代码中，我们仅将全局MyBase用于命名空间)

(In the code below we use global MyBase only for namespacing)

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"的元素，例如

I suppose here, that on your page there are a <div> or other element with id="userDetails" like

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

和函数MyBase.GetAndShowUserData将进行ajax调用并将结果填充在<div id="userDetails"></div>内部. MyBase.GetAndShowUserData中的代码仅是原始模板.我只想说明如何从网格访问数据.

and the function MyBase.GetAndShowUserData will make an ajax call and fill the results inside the <div id="userDetails"></div>. The code inside of MyBase.GetAndShowUserData is a raw template only. I wanted only to show how you can access the data from the grid.

这篇关于从JqGrid ShowLink发送Ajax请求click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！