添加将重定向到JQGrid中当前行的View Page的按钮
我试图添加按钮而不是View列，但我尝试使用formatter仍然按钮没有加载，但记录即将到来的其余列。 以下是我的代码：
$(function () { $("#grid").jqGrid({ url: "/Location/LocationsList1", datatype: 'json', mtype: 'Get', colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'], colModel: [ { key: true, hidden: true, name: 'Id', index: 'Id', editable: true }, { key: false, name: 'CountryName', index: 'CountryName', editable: true }, { key: false, name: 'StateName', index: 'StateName', editable: true }, { key: false, name: 'CityName', index: 'CityName', editable: true }, { key: false, name: 'Name', index: 'Name', editable: true }, { key: false, name: 'View', index: 'View', editable: true,formatter:ViewButton }], pager: jQuery('#pager'), rowNum: 10, rowList: [10, 20, 30, 40], height: '100%', viewrecords: true, caption: 'Location', emptyrecords: 'No records to display', jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, Id: "0" }, }); }); function ViewButton(cellvalue, options, rowObject) { var rowid= options.rowid; var button = "" $('#' + rowid).die(); $('#' + rowid).live('click', function (rowId) { alert("hi"); alert(rowId); }); };
我是JqGrid的新手，不知道它是如何工作的。 任何指导/帮助将不胜感激。
代码有一些问题
-
options没有rowid属性，但它有rowId属性。 您应该将options.rowid更改为options.rowId - 在构建网格主体的HTML片段期间将调用格式化程序。 页面上当前不存在网格元素。 因此你不能使用
$('#' + rowid).live('click', ...);在这一刻。 - 格式化程序必须返回HTML片段，该片段将放置在相应的单元格中（在
return button;在格式化程序的末尾。 - JavaScript中存在众所周知的名称转换。 应该使用函数，只有在定义新类的构造函数时才会以大写字母开头。 您会看到
ViewButton将以其他颜色显示，以便将类与其他function区分开来。 您应该将ViewButton重命名为viewButton以保存JavaScript的标准名称转换。 - 最好不要在
colModel指定index属性。 以同样的方式，不应该包含具有默认值的属性，例如key: false。 要为许多列指定公共属性，可以使用cmTemplate属性。 - 一个应该减少全局函数的数量，因为函数将被视为
window对象的属性。 - 而不是使用隐藏列
name: 'Id'可以指定jsonReaderid: 'Id'属性。 您使用repeatitems: false属性，这意味着输入数据的每个项都具有属性CountryName，StateName等。 id属性的默认名称（rowid –
id）是id，但您使用的是Id。 属性id: "Id"通知jqGrid。
修改后的代码可以是以下内容
$(function () { function viewButton(cellvalue, options, rowObject) { return ""; } $("#grid").jqGrid({ url: "/Location/LocationsList1", datatype: 'json', colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'], colModel: [ { name: 'Id', key: true, hidden: true }, { name: 'CountryName' }, { name: 'StateName' }, { name: 'CityName' }, { name: 'Name' }, { name: 'View', editable: false, formatter: viewButton } ], cmTemplate: { editable: true }, pager: '#pager', rowNum: 10, rowList: [10, 20, 30, 40], height: '100%', viewrecords: true, caption: 'Location', emptyrecords: 'No records to display', jsonReader: { repeatitems: false, id: "Id" } }); $("#jqGridA").click(function (e) { var $td = $(e.target).closest("tr.jqgrow>td"), rowid = $td.parent().attr("id"), p = $(this).jqGrid("getGridParam"); if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") { alert(rowid); } }); });
上面代码的最后一部分（ $("#jqGridA").click(...); ）为整个网格注册一个单击处理程序。 如果用户单击任何单元格，则会因事件冒泡而调用事件处理程序。 e.target给出了单击的DOM元素（例如 ）。 通过使用closest我们可以转到外部
元素，其中父元素是网格的行（
）。 该行的.attr("id")是rowid。 这种绑定更有效地将点击处理程序绑定到网格内的每个按钮。
顺便说一句，jqGrid已经有一个click事件处理程序。 可以使用beforeSelectRow回调，因为它将在click处理程序内部调用。 只应该忘记从beforeSelectRow回调中返回true ，以通知jqGrid您允许选择行。 回调beforeSelectRow已经将rowid作为第一个参数，这简化了我们的代码。 最终的代码将是
$(function () { function viewButton(cellvalue, options, rowObject) { return ""; } $("#grid").jqGrid({ url: "/Location/LocationsList1", datatype: 'json', colNames: ['Id', 'Country Name', 'State Name', 'City Name', 'Location Name','View'], colModel: [ { name: 'CountryName' }, { name: 'StateName' }, { name: 'CityName' }, { name: 'Name' }, { name: 'View', editable: false, formatter: viewButton } ], cmTemplate: { editable: true }, pager: '#pager', rowNum: 10, rowList: [10, 20, 30, 40], height: '100%', viewrecords: true, caption: 'Location', emptyrecords: 'No records to display', jsonReader: { repeatitems: false, id: "Id" }, beforeSelectRow: function (rowid, e) { var $td = $(e.target).closest("tr.jqgrow>td"), p = $(this).jqGrid("getGridParam"); if ($td.length > 0 && p.colModel[$td[0].cellIndex].name === "View") { alert(rowid); } } }); });