【发布时间】：2016-11-22 06:34:44
【问题描述】：
我有一个如下图所示的网格：
目前，我在页脚中有添加、编辑、删除按钮。我需要在每一行中都有“编辑”和“删除”按钮。当我点击每一行的编辑按钮时，它会显示编辑表单，当我点击提交时，它会将数据保存到数据库中。
我的代码如下所示：
$(document).ready(function () {
//jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
$("#list_records").jqGrid({
url: 'ajaxELearningFetchTableData.php?table=GET_TRAINING_TYPE',
//url: 'server.php',
editurl: 'ajaxELearningSaveTrainingType.php',
datatype: "json",
colNames: ["TRAINING TYPE ID", "TRAINING TYPE NAME", "REMARKS"],
colModel: [
{
label: 'TRAINING TYPE ID',
name: 'TRAINING_TYPE_ID',
index: 'TRAINING_TYPE_ID',
editable: true,
sortable: true,
sorttype: "text",
editoptions: {readonly: "readonly"},
width: 40
},
{
label: 'TRAINING TYPE NAME',
name: 'TRAINING_TYPE_NAME',
index: 'TRAINING_TYPE_NAME',
width: 120,
editable: true, // must set editable to true if you want to make the field editable
editoptions: {size: 50, maxlength: 80},
editrules: {required: true, maxlength: 80},
sortable: true,
sorttype: "text",
// set options related to the layout of the Edit and Add Forms
formoptions: {
colpos: 1, // the position of the column
rowpos: 2, // the position of the row
label: "Training Type Name:", // the label to show for each input control
elmsuffix: "(*)"
}
},
{
label: 'REMARKS',
name: 'REMARKS',
width: 140,
editable: true,
edittype: 'textarea',
editoptions: {rows: 3, cols: 45},
formoptions: {
colpos: 1,
rowpos: 3
}
}
],
loadonce: true,
viewrecords: true,
altRows: true,
// width: auto,
// height: auto,
width: 1000,
height: 300,
rowNum: 10,
rowList: [10, 20, 30],
caption: "Training Type Information",
sortname: 'TRAINING_TYPE_ID',
sortorder: "asc",
emptyrecords: "No Records to Display.",
//footerrow: true,
pager: "#perpage"
});
$('#list_records').navGrid('#perpage',
// the buttons to appear on the toolbar of the grid
{edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false},
// options for the Edit Dialog
{
height: 'auto',
width: 620,
editCaption: "Edit Training Type",
url: 'ajaxSaveTrainingType.php',
recreateForm: true,
closeAfterEdit: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Add Dialog
{
height: 'auto',
width: 620,
addCaption: "Add Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
//
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Delete Dailog
{
height: 'auto',
width: 620,
addCaption: "Delete Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
//rp_ge, postdata
onclickSubmit: function () {
var sel_id = $('#list_records').jqGrid('getGridParam', 'selrow');
var trainingTypeId = $('#list_records').jqGrid('getCell', sel_id, 'TRAINING_TYPE_ID');
return {tTypeId: trainingTypeId};
},
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
});
});
欢迎任何帮助。
谢谢。
【问题讨论】：
-
有没有办法在窗口中间显示添加和编辑表单？