在不循环的情况下将当前行值获取到jQuery事件处理程序中 [英] Get current row value into a jQuery event handler without looping
问题描述
我知道如何使用自定义格式化程序并在jqGrid中调用JavaScript函数.我也知道我可以使用gridComplete函数来绑定jQuery事件.我的问题类似于以下内容-但不相同.
jqGrid中的自定义格式化程序，它调用jQuery函数
I know how to use a custom formatter and call a JavaScript function in jqGrid. I also know that I can use gridComplete function to bind a jQuery event. My question is similar to the following – but not the same.
Custom formatter in jqGrid which calls jQuery function
好的，在上述问题中提到的方法中，我们可以在格式化程序返回的元素的click事件上使用jQuery函数-但它需要遍历所有行.
Okay, in the approach mentioned in the above question, we can use a jQuery function on the click event of the element returned by the formatter – but it required looping through all the rows.
是否有更好的方法在jqGrid中将当前行值放入jQuery event handler中而没有循环?
Is there a better way to get the current row value into a jQuery event handler without looping, in jqGrid?
注意:请注意，我需要调用jQuery event handler来处理当前行的值，而不是简单的javascript函数.
Note: Please note that I need to invoke a jQuery event handler which will process current row value – not a simple javascript function.
我的代码在下面列出.
<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',
formatter: 'date',
formatoptions: {
srcformat: 'm/d/Y',
newformat: 'm/d/Y'
}
}, {
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自定义格式化程序按钮单击事件不起作用
- jqGrid gridComplete:-getRowData-从中获取行单元格值数组
- 出现jqGrid和jquery click事件的问题
- jqGrid中的自定义格式化程序，它调用jQuery函数
- 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绑定分开(多个)click处理程序.为了使代码更有效，可以在整个网格上注册一个 click处理程序.标准事件处理使冒泡(从内部到外部). jqGrid已经注册了一个click处理程序，它具有beforeSelectRow和onCellSelect，它们将在click处理程序内部调用.因此，例如，您可以将gridComplete替换为beforeSelectRow回调的更有效的代码.相应的实现如下所示
You are right. Your current code bind separate (multiple) click handler for every span.app-custom-button-join of the column Join. To make the code more effective one can register one click handler on the whole grid. The standard event processing makes bubbling (from inner to outer). jqGrid registers already one click handler and it has beforeSelectRow and onCellSelect which will be called inside of the click handler. Thus you can replace gridComplete with more effective code of beforeSelectRow callback for example. The corresponding implementation can looks like below
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即可防止选择.
The above code shows how to get rowid of clicked row. The Boolean value returned from beforeSelectRow allows you to deny selection of row by click on the icon (if it's required of cause). One need just return false from beforeSelectRow to prevent selection.
这篇关于在不循环的情况下将当前行值获取到jQuery事件处理程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
