我正在使用jgGrid
表单编辑,我正在更新已编辑的值。当我点击提交时,editurl
被调用。在我的场景中,我必须将两个参数传递给Controller。
// jqGrid代码:
var colname = [];
var colHeader = [];
var gridData;
var selectedValue;
var multipleSource;
var colValues = [];
var columns = [{ name: 'Workflow Name', width: '200px' }, { name: 'Workflow Category', width: '150px' }, { name: 'Status', width: '100px' }, { name: 'Workflow Owner', width: '150px' }];
$.ajax({
url: '@Url.Action("LoadColumns","Home")',
// url: "/Home/LoadColumns",
data: { 'workflowId': selectedValue, 'status': $('#Status option:selected').val(), 'customView': $('#CustomViews option:selected').val() },
datatype: 'json',
type: 'GET',
success: OnComplete,
error: OnFail
});
function OnComplete(result) {
// debugger;
gridData = $.parseJSON(result)
colHeader = [];
colname = [];
$.each(gridData.Table1, function () {
colHeader.push(this.Name);
switch (this.Datatype) {
case 'int':
colname.push({ name: this.Name, index: this.Name, width: 130, align: 'left', sortable: true, editable: false, sorttype: 'int' });
break;
case 'String':
colname.push({ name: this.Name, index: this.Name, width: 130, align: 'left', sortable: true, editable: true });
break;
case 'DateTime':
colname.push({
name: this.Name, search: true, index: this.Name, width: 130, stype: "text", editable: true, searchoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/y', maxDate: 0, changeMonth: true, changeYear: true, onSelect: function (dateText, inst) {
setTimeout(function () {
$('#jQGridDemo')[0].triggerToolbar();
}, 50);
}
});
}
}, editoptions: {
dataInit: function (el) {
$(el).datepicker({
dateFormat: 'm/d/y', maxDate: 0, changeMonth: true, changeYear: true
});
}
}
});
break;
case 'dropdown':
colname.push({
name: this.Name, index: this.Name, width: 130, edittype: "select", formatter: 'select',
cellattr: function (rowId, val, rawObject, cm, rdata) {
var strVal = [];
strVal = val.split("_");
if (rawObject[cm.name + "_Title"] == "") {
// debugger;
return 'title="' + strVal[0].toString() + '"';
}
else
return 'title="' + val + ' (' + rawObject[cm.name + "_Title"] + ')"';
},
editoptions: { value: ':Select;' + this.ValueList.slice(0, -1) }, stype: 'select'
, searchoptions: { value: ':All;' + this.ValueList.slice(0, -1) }, align: 'left', sortable: true, editable: true
});
break;
default:
colname.push({ name: this.Name, index: this.Name, width: 130, align: 'left', sortable: true, editable: true });
break;
break;
}
});
jQuery("#jQGridDemo").jqGrid({
data: gridData.BuildTransactionsDataTable,
datatype: "local",
hoverrows: false,
colNames: colHeader,
colModel: colname,
id: 'TransactionId',
localReader: {
root: 'rows',
id: 'TransactionId',
repeatitems: false
},
rowNum: 10,
rowList: [10, 20, 30],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
loadonce: true,
sortorder: 'desc',
caption: "Grid",
gridview: true,
autoencode: true,
ignoreCase: true
});
jQuery("#jQGridDemo").jqGrid('filterToolbar', { stringResult: true, searchOperators: true, searchOnEnter: false, defaultSearch: "cn" });
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: false,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ multipleSearch: true },
//{
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
debugger;
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
onclickSubmit: function (response, postdata) {
debugger;
var resultGriddata = JSON.stringify(postdata);
var resultColumndata = JSON.stringify(gridData.Table1);
$.ajax({
url: "/Home/UpdateData",
datatype: 'json',
data: { 'gridData': resultGriddata, 'columnData': resultColumndata },
type: 'POST',
success: OnComplete,
error: OnFail
});
function OnComplete(result) {
alert(result);
}
},
editData: {
TransactionId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
debugger;
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
alert(response);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
return [true, response.responseText]
}
},
delData: {
TransactionId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
}
在这段代码中,我传递了三个参数,使网格加载:
//控制器代码:
[HttpPost]
public ActionResult UpdateData(string gridData, string columnData)
{
return Content("Success");
}
我尝试过两种方式:
1。添加EditData:
我尝试在editData
下添加editurl
并尝试传递一个参数。但是我在控制器中得到了null。
editData: { _dokdata: function () { return JSON.stringify(gridData); } }
2。在onclickSubmit中传递数据:
我已经尝试在onclickSubmit
事件中将数据发布到控制器。像,
onclickSubmit: function (response, postdata) {
postdata.extraParam = gridData;
var resultGriddata = JSON.stringify(postdata);
var resultColumndata = JSON.stringify(gridData.Table1);
$.ajax({
url: "/Home/UpdateData",
datatype: 'json',
data: { 'gridData': resultGriddata, 'columnData':resultColumndata },
type: 'POST',
success: OnComplete,
error: OnFail
});
function OnComplete(result) {
alert(result);
}
},
现在在onclickSubmit
我必须传递两个参数并将这些值输入控制器。现在,控制器被调用,两个参数都带有预期的值(数据)。我不确定代码中的其他事件。
但是在代码后面的过程中,我在编辑弹出窗口中收到错误,指出“Url未设置”。因此,我尝试过多次为'clientarray'
和editurl
提供cellsubmit
,但没有任何帮助。
有人说,在我的搜索中,所有内容都应该针对InlineEdit
而不是针对FormEdit
。不确定我是不是我错了。
如何在不显示弹出窗口错误的情况下完成此工作?
的sampleData:
{"Table1":[{"Name":"Have Queries","Datatype":"String","ValueList":"","ValueId":"139646","ValueType":"F"},{"Name":"Assign to Karthik","Datatype":"String","ValueList":"","ValueId":"139665","ValueType":"F"},{"Name":"Field Format","Datatype":"DateTime","ValueList":"","ValueId":"141803","ValueType":"F"},{"Name":"URLFields","Datatype":"String","ValueList":"","ValueId":"447592","ValueType":"F"},{"Name":"Testing","Datatype":"String","ValueList":"","ValueId":"705958","ValueType":"F"},{"Name":"Start Task","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139584","ValueType":"T"},{"Name":"Create Credentials","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139585","ValueType":"T"},{"Name":"Branching and Mapping","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139586","ValueType":"T"},{"Name":"Application Walkthrough","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139587","ValueType":"T"},{"Name":"Call","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139588","ValueType":"T"},{"Name":"Queries","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139589","ValueType":"T"},{"Name":"Development Ready","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139591","ValueType":"T"},{"Name":"Assign","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139666","ValueType":"T"},{"Name":"Check Developer","Datatype":"dropdown","ValueList":"In Process:In Process;Completed:Completed;Re-Work Required:Re-Work Required;Assigned:Assigned;Not Required:Not Required;","ValueId":"139701","ValueType":"T"}],"Table2":[{"TransactionId":"141090","TransactionStatus":"29607","StartDate":"1/18/1900 5:02:00 PM","Have Queries":"Y","Assign to Karthik":"Yes","Field Format":"","URLFields":"","Testing":"","Start Task":"Completed","Start Task_Title":"43_False","Create Credentials":"Completed","Create Credentials_Title":"_False","Branching and Mapping":"Completed","Branching and Mapping_Title":"2_False","Application Walkthrough":null,"Application Walkthrough_Title":null,"Call":"Completed","Call_Title":"_False","Queries":null,"Queries_Title":null,"Development Ready":null,"Development Ready_Title":null,"Assign":null,"Assign_Title":null,"Check Developer":null,"Check Developer_Title":null},{"TransactionId":"141101","TransactionStatus":"29607","StartDate":"5/10/2013 12:00:00 AM","Have Queries":"N","Assign to Karthik":"Yes","Field Format":"","URLFields":"","Testing":"","Start Task":"Completed","Start Task_Title":"43_False","Create Credentials":"In Process","Create Credentials_Title":"2_True","Branching and Mapping":"Completed","Branching and Mapping_Title":"_False","Application Walkthrough":"Completed","Application Walkthrough_Title":"_False","Call":"Completed","Call_Title":"_False","Queries":null,"Queries_Title":null,"Development Ready":null,"Development Ready_Title":null,"Assign":null,"Assign_Title":null,"Check Developer":null,"Check Developer_Title":null}]}
答案 0 :(得分:1)
首先,您应该决定使用哪种编辑模式。如果您要使用form editing,则代码中不应存在cellEdit: true
选项。 Yo使用了错误的选项celledit
而不是cellEdit
,所以它会被忽略,但是这些选项的存在会使代码更难以阅读。您在问题中提到的cellsubmit
选项(例如cellsubmit: "remote"
)仅适用于cell editing需要使用cellEdit: true
的情况。
您发布的代码不包含任何表单编辑代码。目前还不清楚您是使用navGrid
一些选项还是formatter: "actions"
使用formatoptions: {editformbutton: true}
或直接调用editGridRow方法...哪些选项以及您如何使用表单编辑尚不清楚你的问题,所以你必须猜测你做了什么。
如果您决定使用表单编辑,那么应将editData
置于正确的位置。 editData
不是jqGrid选项(请参阅here)。它是editGridRow方法的参数(选项/属性)(参见here)。根据您使用表单编辑的方式,您应该将其放在相应的位置。例如,如果您使用navGrid,则其中的第3和第4个参数(请参阅prmEdit
和prmAdd
)允许您指定转发到editGridRow
的选项navGrid
如果用户单击导航栏的“编辑”或“添加”按钮。您在the question中发布的代码使用editData
的正确位置,但“在editData
下添加editurl
”(请参阅问题文本)是错误的方法
您写道“我必须将2个参数传递给Controller”(但您发布的UpdateData
动作控制器的代码只包含一个参数gridData
)。您没有发布colModel
这更难以理解您(通过您使用误解名称的方式:colModel: colname
,但colName
选项有另一个值colHeader
),但可能只有colModel
中的一列具有editable: true
属性。在使用表单编辑的情况下,我真的不是最佳选择,使用单元格编辑可能更简单。要使用它,您需要添加cellsubmit: "remote"
,cellEdit: true
和cellurl: "/Home/UpdateData"
。在jqGrid将发送到服务器(到cellurl
) 3 参数的情况下(参见the documentation):
name
中的colModel
属性值相同。id
为名称的rowid。可以使用prmNames
option来更改id
名称。例如,prmNames: {id: "TransactionId"}
会将rowid的名称更改为TransactionId
。oper=edit
。可以按用法prmNames
更改名称。例如,prmNames: {oper: "myOper", editoper: "myEdit"}
会将oper=edit
更改为myOper=myEdit
。此外,可以使用beforeSubmitCell
和serializeCellData
来自定义数据:
beforeSubmitCell: function (rowid, name, value, iRow, iCol) {
return {gridData: gridData};
},
serializeCellData: function (postdata) {
return JSON.stringify(postdata);
}
您可以以任何其他方式更改serializeCellData
。例如
serializeCellData: function (postdata) {
return {
gridData: JSON.stringify(postdata.gridData),
columnData: JSON.stringify(postdata.columnNameFromColModel)
};
}