Question

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

这是我的定义

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

正如您所见，我想加载修改表单。如何通过点击showLink告诉jqGrid进行ajax调用？感谢

Answer 1

可能的解决方案如下：

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

（在下面的代码中，我们仅对命名空间使用全局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>将进行ajax调用并在MyBase.GetAndShowUserData内填充结果。 <div id="userDetails"></div>内的代码只是一个原始模板。我只想说明如何从网格中访问数据。

从JqGrid ShowLink点击发送Ajax请求

1 个答案: