我想在 JqGrid 下方创建 Add
Edit
Save
和 Delete
按钮。
<script type="text/javascript">
jQuery(document).ready(function () {
var lastSel = 0;
jQuery("#list").jqGrid({
url: '/SpeakerJqgrid/GridData/',
editurl: "/SpeakerJqgrid/MyEdit/",
datatype: 'json',
mtype: 'GET',
colNames: ['SpeakerID', 'SpeakerName'],
colModel: [
{ name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} },
{ name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
],
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery('#list').restoreRow(lastSel);
lastSel = id;
}
jQuery('#list').editRow(id, true);
},
loadComplete: function () {
//alert("Load Complete");
},
addRowData: function (rowid, rdata, pos, src) {
alert("addRowData");
if (pos === 'afterSelected' || pos === 'beforeSelected') {
if (typeof src === 'undefined' && this[0].p.selrow !== null) {
src = this[0].p.selrow;
pos = (pos === "afterSelected") ? 'after' : 'before';
} else {
pos = (pos === "afterSelected") ? 'last' : 'first';
}
}
return oldAddRowData.call(this, rowid, rdata, pos, src);
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'SpeakerName',
sortorder: "desc",
viewrecords: true,
autowidth: true,
autoheight: true,
imgpath: '/scripts/themes/black-tie/images',
caption: 'My first grid'
})
$("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false});
$("#list").jqGrid('inlineNav', '#pager', {
edittext: "Edit",
addtext: "Add",
savetext: "Save",
canceltext: "Cancel",
addParams: { position: "afterSelected" }
});
});
</script>
通过使用上面的代码,我的网格向我显示名为添加
编辑
保存
和删除
的按钮。
但问题是,当我单击这些按钮时,什么也没有发生。
我的意思是我想创建当我单击“添加”或“编辑”按钮时将触发的事件。
我发现的大多数示例都是关于使用 modal form 添加新行。但我必须使用的是内联网格行添加样式。
我们将不胜感激您的建议。
最佳答案
首先,没有回调函数addRowData
。如果您想修改方法 addRowData要支持“afterSelected”或“beforeSelected”,您应该遵循我的建议 the answer或this one与 the demo .
现在谈谈你的主要问题。 inlineNav内部使用的方法addRow和 editRow方法。因此,如果用户单击 inlineNav 添加的“添加”或“编辑”按钮addRow或editRow将被调用。您可以使用 inlineNav 的 addParams
和 editParams
选项更改 addRow 的默认参数或editRow 。如果您只需要指定自己的回调函数,当用户单击“添加”或“编辑”按钮时将调用该回调函数,您可以使用以下代码:
$("#list").jqGrid('inlineNav', '#pager', {
edittext: "Edit",
addtext: "Add",
savetext: "Save",
canceltext: "Cancel",
addParams: {
position: "afterSelected",
addRowParams: {
// the parameters of editRow used to edit new row
keys: true,
oneditfunc: function (rowid) {
alert("new row with rowid=" + rowid + " are added.");
}
}
},
editParams: {
// the parameters of editRow
key: true,
oneditfunc: function (rowid) {
alert("row with rowid=" + rowid + " is editing.");
}
}
});
此外,如果您需要使用 inlineNav
的编辑按钮,您可能应该删除 onSelectRow
回调的代码。
关于c# - Jqgrid 以 inlineNav 样式添加新的空白行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9564206/