问题描述
当用户单击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
推荐答案
可能的解决方案如下:
- 在用户名"中,删除不需要的
edittype: 'select'
和align: 'left'
,并考虑添加title: false
,而不是删除鼠标悬停在单元格上时工具提示的显示. - 将包含
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. - 添加一个 global 函数(在JavaScript的顶层定义),例如,名称为
MyBase.GetAndShowUserData
,如下所示:
- In the 'Username' you remove unneeded
edittype: 'select'
andalign: 'left'
and consider to addtitle: false
instead to remove displaying of the ToolTip on hover a cell with the mouse. - Modify
formatoptions
which containformatter: 'showlink'
to following:formatoptions: { baseLinkUrl: 'javascript:', showAction: "MyBase.GetAndShowUserData(jQuery('#userlist'),'#myDiv','", addParam: "');" }
. jqGrid will constructhref
attribute of<a>
element like following:href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'#userDetails','?id=rowId');"
whererowId
will be the id of the corresponding grid row. - 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!