我正在编写用于在jqgrid中进行内联编辑的代码。它在弹出模式下工作正常。但我在内联模式下需要相同的功能。请帮我解决这个问题。过去一周我一直试图解决它。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JQGridReq/jquery-1.9.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="JQGridReq/grid.locale-en.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.js" type="text/javascript"></script>
<link href="JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/json2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="topList">
</div>
<table id="list">
</table> <%--for grid--%>
<div id="pager">
</div> <%--for paging--%>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
function getCountry() {
var country;
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
async: false,
url: "Default.aspx/getNational",
dataType: "json",
success: function (data) {
country = data.d;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
return country;
}
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "Default.aspx/getEmployee",
dataType: "json",
success: function (data) {
data = data.d;
$("#list").jqGrid({
datatype: "local",
colNames: ['', 'Employee Id', 'Name', 'Email', 'Phone', 'Password', 'Nationality', 'Date of Birth'],
colModel: [
{
name: 'act', index: 'act', width: 75, align: 'center', search: false, sortable: false, formatter: 'actions',
formatoptions: {
keys: true,
editformbutton: true,
editOptions: {
recreateForm: true,
reloadAfterSubmit: false,
width: 500,
closeAfterEdit: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
alert(postData);
return JSON.stringify(postdata);
}
},
delOptions:
{
ajaxDelOptions: { contentType: "application/json" },
reloadAfterSubmit: false,
onclickSubmit: function (eparams) {
var retarr = {};
var sr = $("#list").getGridParam('selrow');
rowdata = $("#list").getRowData(sr);
retarr = { employeeId: rowdata.employeeId };
return retarr;
},
serializeDelData: function (postdata) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
} // we want use [Enter] key to save the row and [Esc] to cancel editing.
}
},
{ name: 'employeeId', index: 'employeeId', width: 55, stype: 'text', sortable: true, editable: true, formoptions: { rowpos: 1, colpos: 1 }, editrules: { integer: true } },
{ name: 'name', index: 'name', width: 90, stype: 'text', sortable: true, editable: true, editrules: { required: true }, formoptions: { rowpos: 2, colpos: 1 } },
{ name: 'email', index: 'email', width: 90, stype: 'text', sortable: true, editable: true, editrules: { email: true, required: true }, formoptions: { rowpos: 2, colpos: 2 } },
{ name: 'phone', index: 'phone', width: 70, align: "right", stype: 'text', sortable: true, editable: true, formoptions: { rowpos: 0, colpos: 0 } },
{ name: 'pwd', index: 'pwd', width: 70, align: "right", stype: 'text', edittype: 'password', sortable: true, editable: true, formoptions: { rowpos: 3, colpos: 2 } },
{
name: 'nationalId', index: 'nationalId', width: 80, align: "right", formatter: 'select', stype: 'select',
editable: true, edittype: "select", editoptions: { value: getCountry() }, formoptions: { rowpos: 4, colpos: 1 }
},
{
name: 'dateOfBirth', index: 'dateOfBirth', width: 80, align: "right",
edittype: 'text', editable: true,
editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
});
}
},
formoptions: { rowpos: 4, colpos: 2 }
}
],
//this line is used to pass the data into the database
//
data: JSON.parse(data),
rowno: 10,
loadonce: true,
/* multiselect:true,*/
rowlist: [5, 10, 20],
pager: '#pager',
viewrecords: true,
gridview: true,
sortorder: 'asc',
toppager: true,
cloneToTop: true,
altrows: true,
autowidth: false,
hoverrows: true,
height: 300,
/* toolbar: [true, "top"],*/
rownumbers: true,
caption: "Employee Data",
editurl: 'Default.aspx/EditUpdateDel'
/* ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid,
{recreateForm:true,closeAfterEdit:true,
closeOnEscape:true,reloadAfterSubmit:false, width: 500});
}*/
});
$('#list').jqGrid('navGrid', '#pager',
{
edit: true,
add: true,
del: true,
search: false,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
cloneToTop: true
}
, {
//add//
recreateForm: true,
//reloadAfterSubmit: false,
//beforeShowForm: function (form) {
// $('#tr_employeeId', form).hide();
//},
width: 500,
reloadAfterSubmit: false,
closeAfterAdd: false,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata);
}
},
//edit//
//Here i ham writing a code for doing inline editing in jqgrid. It's working //fine in the pop-up mode.But i need the same in the inline mode.pls help me //solve this problem. I a trying to solve it for the past on week.
{
//recreateForm: true,
//beforeShowForm: function (form) {
// $('#tr_employeeId', form).hide();
//},
//width: 500,
//reloadAfterSubmit: false,
//closeAfterAdd: false,
//ajaxEditOptions: { contentType: "application/json" },
//serializeEditData: function (postData) {
// var postdata = { 'data': postData };
// return JSON.stringify(postdata);
//}
recreateForm: true,
reloadAfterSubmit: false,
width: 500,
closeAfterEdit: true,
ajaxEditOptions: { contentType: "application/json" },
serializeEditData: function (postData) {
var postdata = { 'data': postData };
return JSON.stringify(postdata);
}
},
{
//delte//
ajaxDelOptions: { contentType: "application/json" },
reloadAfterSubmit: false,
onclickSubmit: function (eparams) {
var retarr = {};
var sr = $("#list").getGridParam('selrow');
rowdata = $("#list").getRowData(sr);
retarr = { employeeId: rowdata.employeeId };
return retarr;
},
serializeDelData: function (data) {
var postData = { 'data': data };
return JSON.stringify(postData);
}
});
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
var grid = $("#list");
var topPagerDiv = $('#' + grid[0].id + '_toppager')[0];
$("#" + grid[0].id + "_toppager_center", topPagerDiv).remove(); /"#list_toppager_center"/
$(".ui-paging-info", topPagerDiv).remove();
var bottomPagerDiv = $("div#pager")[0];
$("#add_" + grid[0].id, bottomPagerDiv).remove();
$("#edit_" + grid[0].id, bottomPagerDiv).remove();
$("#del_" + grid[0].id, bottomPagerDiv).remove();
$("#refresh_" + grid[0].id, bottomPagerDiv).remove();
// "#add_list"
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
代码中有很多地方可以更好地进行更改，但您的主要问题是formatoptions对formatter: 'actions'的错误使用。
您可以在formatter: 'actions'选项the documentation中阅读以下内容：
当editformbutton参数设置为true时，表单编辑 对话框显示而不是内嵌编辑。选项editOptions将 仅用于表单编辑。
您尝试使用内联编辑，因此首先必须从editformbutton: true删除formatoptions属性。
要序列化数据，应使用jqGrid 的serializeRowData回调，而不是使用表单编辑的serializeEditData回调
您的代码的一些常见说明。
<script>部分从<body>移动到<head>部分。或者，您可以删除$(document).ready(function () {...});处理程序。 ready用于身体内部的身体状况不佳。employeeId似乎是您加载的数据的本机ID。您可以将key: true添加到employeeId列，或使用jsonReader: {id: "employeeId" }（或jsonReader: {id: 0 }，具体取决于您使用的输入数据的确切格式。data: JSON.parse(data.d)，其中data是success回调的参数。这意味着{strong>您在"Default.aspx/getEmployee"中进行了不必要的 JSON序列化。您可以将带有数据的对象转换为字符串手动，而不是返回object。 DotNet framework *自动将返回的数据转换为JSON。因此，您应该删除将返回数据手动转换为"Default.aspx/getEmployee"内的字符串。之后，您需要将data: JSON.parse(data.d)替换为data: data.d。现在，您可以删除对$.ajax和datatype: "json"使用情况的手动url: "Default.aspx/getEmployee"来电，并仅使用jsonReader: {root: "d.rows", page: "d.page", total: "d.total", records: "d.records"}。如果您不使用服务器端分页，则应另外添加loadonce: true选项还有其他一些地方可以改进代码，但是不能同时解决所有问题。