传递jqGrid的编辑URL中的参数以进行表单编辑

时间:2014-08-06 11:02:24

标签: jquery ajax jqgrid

我正在使用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}]}

1 个答案:

答案 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个参数(请参阅prmEditprmAdd)允许您指定转发到editGridRow的选项navGrid如果用户单击导航栏的“编辑”或“添加”按钮。您在the question中发布的代码使用editData的正确位置,但“在editData下添加editurl”(请参阅​​问题文本)是错误的方法

您写道“我必须将2个参数传递给Controller”(但您发布的UpdateData动作控制器的代码只包含一个参数gridData)。您没有发布colModel这更难以理解您(通过您使用误解名称的方式:colModel: colname,但colName选项有另一个值colHeader),但可能只有colModel中的一列具有editable: true属性。在使用表单编辑的情况下,我真的不是最佳选择,使用单元格编辑可能更简单。要使用它,您需要添加cellsubmit: "remote"cellEdit: truecellurl: "/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

此外,可以使用beforeSubmitCellserializeCellData来自定义数据:

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)
    };
}