问题描述
我知道如何使用自定义格式化程序并在 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
好的，在上述问题中提到的方法中，我们可以在格式化程序返回的元素的点击事件上使用 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 事件处理程序 而无需 循环?
Is there a better way to get the current row value into a jQuery event handler without looping, in jqGrid?
注意:请注意，我需要调用 jQuery 事件处理程序，它将处理当前行值——而不是简单的 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 点击事件问题
- jqGrid中调用jQuery函数的自定义格式化程序
推荐答案
你是对的.您当前的代码为每个 span.app-custom-button-join 绑定 separate (multiple) click 处理程序加入列.为了使代码更有效，可以在整个网格上注册 one 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 事件处理程序中而不循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！