【问题标题】:Pass parameters in Edit Url of jqGrid for Form Editing在jqGrid的Edit Url中传递参数进行表单编辑
【发布时间】:2014-08-06 11:02:24
【问题描述】:

我正在使用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.添加编辑数据: 我尝试在editurl 下方添加editData,并尝试传递单个参数。但是我在 Controller 中得到了 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 is not set”。因此,我尝试了多种方式,例如 'clientarray'editurlcellsubmit,但没有任何帮助。

据说在我的搜索中,所有的都应该是InlineEdit,而不是FormEdit。不知道我哪里错了。

如何在弹出窗口中不显示错误的情况下完成这项工作?

样本数据:

{"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}]}

【问题讨论】:

    标签: jquery ajax jqgrid


    【解决方案1】:

    首先,您应该决定使用哪种编辑模式。如果您想使用form editing,那么您的代码中不应存在cellEdit: true 选项。哟使用了错误的选项celledit 而不是cellEdit,所以它会被忽略,但是这样的选项的存在使代码更难阅读。顺便说一句,您在问题中提到的cellsubmit 选项(例如cellsubmit: "remote")仅适用于需要使用cellEdit: truecell editing

    您发布的代码不包含任何表单编辑代码。目前尚不清楚您是使用带有某些选项的navGrid,还是使用带有formatoptions: {editformbutton: true}formatter: "actions" 或直接调用editGridRow 方法...从您的问题中不清楚哪些选项以及您如何使用表单编辑,因此必须猜测是什么你会的。

    如果您决定使用表单编辑,那么您应该将editData 放置在正确的位置editData 不是 jqGrid 选项(请参阅 here)。它是editGridRow 方法的参数(选项/属性)(参见here)。取决于您如何使用表单编辑,您应该将其放置在相应的位置。例如,如果您使用navGrid,那么它的 3-d 和 4-th 参数(请参阅 prmEditprmAdd)允许您指定通过 navGrid 转发到 editGridRow 的选项,如果用户单击编辑或导航栏的添加按钮。您在the question 中发布的代码使用editData 的正确位置,但是“在editurl 下方添加editData”(请参阅​​您的问题文本)是错误的方式。

    您写了“我必须将 2 个参数传递给控制器​​”(但您发布的 UpdateData 动作控制器的代码包含只有一个参数 gridData)。您没有发布colModel,这让您更难理解(顺便说一句,您使用了误解的名称:colModel: colname,但colName 选项有另一个值colHeader),但可能恰好是colModel 中的一列有editable: true 属性。在这种情况下,表单编辑的使用似乎我真的不是最好的选择,使用单元格编辑可能更简单。要使用它,您需要添加cellsubmit: "remote"cellEdit: truecellurl: "/Home/UpdateData"。在这种情况下 jqGrid 将向服务器发送(到cellurl3 个参数(见the documentation):

    • 编辑数据名称与colModelname属性的值类似。
    • 名称为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)
        };
    }
    

    【讨论】:

    • 由于这个网格要在移动设备中查看,并且为了使编辑更加可视化,我需要使用表单编辑。它向我显示“未设置 URL”,但我能够接收后面代码中的值。在 UI 中,它向我显示了错误。为什么?
    • @SanthoshKumar:您应该发布对应于表单编辑的代码。正如我在回答中所写的那样:1)您发布的代码没有对应于表单编辑的行。 2) 您应该包含准确显示您放置editDataonclickSubmit 等的位置 的代码以及colModel 的定义(至少columnData 列)。
    • 更新了问题。请帮忙。
    • @SanthoshKumar:代码仍然不包含colModel,这很重要(请参阅我之前的评论)。在afterSubmit 内部使用.trigger('reloadGrid') 不好。 $.ajax 的调用也应该从onclickSubmit 中删除。 当前代码没有editurl: "/Home/UpdateData"UpdateData 不包含 id,因此您将不知道 哪一行 将被编辑。如果您想发送_id (TransactionId) 作为UpdateData 的参数,那么您应该验证如何在网格中填充数据。如果您正确填写数据,则 rowid(以id 发送)包含它。
    • 现在添加。让我知道有什么需要。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-04-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-11
    相关资源
    最近更新 更多