我知道如何使用自定义格式化程序并在jqGrid中调用JavaScript函数.我也知道我可以使用gridComplete函数绑定一个jQuery事件.我的问题类似于以下内容 – 但不一样.
Custom formatter in jqGrid which calls jQuery function
Custom formatter in jqGrid which calls jQuery function
好的,在上面问题中提到的方法中,我们可以对格式化程序返回的元素的click事件使用jQuery函数 – 但它需要循环遍历所有行.
在jqGrid中有没有更好的方法将当前行值放入jQuery事件处理程序而不进行循环？
注意：请注意,我需要调用一个jQuery事件处理程序,它将处理当前行值 – 而不是一个简单的javascript函数.
我的代码如下所示.
<script type="text/javascript">
function clickme(rowID) {
alert("hi");
}
$(document).ready(function() {
$("#grid").jqGrid({
url: "GamesList.aspx/GetMyGames",mtype: 'POST',postData: {
gameSearch: $('#txtGameName').val(),ownerSearch: $('#txtOwner').val(),createdDateFrom: $('#txtCreatedFrom').val(),createdDateTo: $('#txtCreatedTo').val(),liquidAmountFrom: $('#txtLmiquidAmountFrom').val(),liquidAmountTo: $('#txtLmiquidAmountTo').val()
},datatype: "local",//json if want to load initially
ajaxGridOptions: {
contentType: 'application/json; charset=utf-8'
},serializeGridData: function(postData) {
return JSON.stringify(postData);
},jsonReader: {
repeatitems: false,root: function(obj) {
return obj.d;
}
},colNames: ['GameID','GameName','GameOwner','PlannedCloseDate','CreatedOnDate','GameLiquidAmount','Join'],colModel: [{
name: 'GameID',index: 'GameID'
},{
name: 'GameName',index: 'GameName'
},{
name: 'GameOwner',index: 'GameOwner'
},{
name: 'PlannedCloseDate',index: 'PlannedCloseDate',formatter: 'date',formatoptions: {
srcformat: 'm/d/Y',newformat: 'm/d/Y'
}
},{
name: 'CreatedOnDate',index: 'CreatedOnDate',{
name: 'GameLiquidAmount',index: 'GameLiquidAmount'
},{
name: 'Join',index: 'GameID',width: 30,formatter: function(cellvalue,options,rowObject) {
return '<span class="ui-icon ui-icon-folder-open app-custom-button-join" title="click to open" onclick="clickme(' + options.rowId + ') ;"></span>';
}
}],rowNum: 10,/*rowList: [10,20,30],*/
pager: '#pager2',sortname: 'id',viewrecords: true,sortorder: "desc",caption: "Games",gridview: true,height: "auto",loadonce: true,recordtext: "Records {0} - {1} of {2}",emptyrecords: "No records to view",loadtext: "Loading...",pgtext: "Page {0} of {1}",gridComplete: function() {
//Assign a click event to custom button [after gridComplete]
$(".app-custom-button-join").click(function() {
alert("HELLO");
});
}
});
$("#btnSearch").click(function(e) {
$("#grid").jqGrid('setGridParam',{
datatype: 'json'
}).trigger('reloadGrid');
e.preventDefault();
});
});
</script>
参考文献：
> jqgrid custom formatter button click event not working
> jqGrid gridComplete:- getRowData – get row cell value from array
> Issue with jqGrid and jquery click event
> Custom formatter in jqGrid which calls jQuery function
解决方法
你是对的.您当前的代码为列Join的每个span.app-custom-button-join绑定单独的(多个)单击处理程序.为了使代码更有效,可以在整个网格上注册一个单击处理程序.标准事件处理使冒泡(从内到外). jqGrid已经注册了一个单击处理程序,它具有beforeSelectRow和onCellSelect,它将在单击处理程序内部调用.因此,您可以使用更有效的beforeSelectRow回调代码替换gridComplete.相应的实现如下所示
beforeSelectRow: function (rowid,e) {
var $self = $(this),$td = $(e.target).closest("tr.jqgrow>td"),rowid = $td.parent().attr("id"),rowData = $self.jqGrid("getLocalRow",rowid),// or rowData = $self.jqGrid("getRowData",rowid)
iCol = $td.length > 0 ? $td[0].cellIndex : -1,colModel = $self.jqGrid("getGridParam","colModel");
if (iCol >= 0 && colModel[iCol].name === "Join" &&
$(e.target).hasClass("app-custom-button-join")) {
alert("HELLO");
return false;
}
return true;
}
上面的代码显示了如何获取单击行的rowid.从beforeSelectRow返回的布尔值允许您通过单击图标拒绝选择行(如果它是必需的).只需从beforeSelectRow返回false以防止选择.
