jQuery jqGrid 是一個基于jQuery的表格插件,可以實現非常方便的表格操作。其中一個重要的功能就是點擊事件的響應,下面就來詳細講解如何使用 jQuery jqGrid 實現點擊事件。
$(document).ready(function(){
//定義 jqGrid 表格
var grid = $("#jqGrid").jqGrid({
url: "data.json",
mtype: "GET",
datatype: "json",
colModel: [
{ label: "ID", name: "id", key: true, align: "center" },
{ label: "名稱", name: "name", align: "center" },
{ label: "年齡", name: "age", align: "center" },
{ label: "性別", name: "gender", align: "center" }
],
viewrecords: true,
autowidth: true,
height: 300,
rowNum: 10,
pager: "#jqGridPager",
loadComplete: function(data) {
//數據加載完成后進行事件綁定
$(".jqgrow").click(function() {
var rowid = $(this).attr("id");
var rowData = $("#jqGrid").jqGrid("getRowData", rowid);
alert("您點擊的是第" + rowid + "行,名稱為" + rowData.name);
});
}
});
});
上述代碼中,我們指定了一個 data.json 文件作為數據源,定義了表格列的名稱、數據類型和屬性等,同時還設置了表格的樣式、分頁和高度等。在數據加載完成后,我們對每一行的 jqgrow 進行點擊事件綁定,并通過獲取行的 id 和數據進行后續的操作。