在jqGrid的Edit Url中传递参数进行表单编辑

2024-04-16

我在用jgGrid表单编辑,我在其中更新编辑的值。当我点击提交时editurl被叫。在这种情况下,在我的场景中,我必须将两个参数传递给控制器​​。

//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以下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我必须传递两个参数并将这些值获取到控制器中。现在控制器正在被调用,两个参数的值都符合预期(数据)。我不确定代码中的其他事件。

但是在代码后面的过程之后,我在编辑弹出窗口中收到错误消息:“网址未设置”。所以我尝试了很多方式给予'clientarray' for editurl and cellsubmit,但没有任何帮助。

有人说,在我的寻找中,应该付出一切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}]}

首先,您应该决定使用哪种编辑模式。如果你想使用表单编辑 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing那就不要cellEdit: true选项应该存在于您的代码中。您使用了错误的选项celledit代替cellEdit,因此它将被忽略,但此类选项的存在使代码更难以阅读。顺便一提cellsubmit您在问题中提到的选项(例如cellsubmit: "remote")仅在以下情况下有效细胞编辑 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing这需要使用cellEdit: true.

您发布的代码不包含任何表单编辑代码。不清楚你是否使用navGrid有一些选择或者你formatter: "actions" with formatoptions: {editformbutton: true}或致电编辑网格行 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow直接方法...从您的问题中不清楚您使用哪些选项以及具体如何使用表单编辑,因此人们必须猜测您做了什么。

如果您决定使用表单编辑,那么你应该放置editData在正确的地方. editData is 不是 jqGrid 选项 (see here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options)。它的参数(选项/属性)编辑网格行 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow方法(参见here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#properties)。根据您如何使用表单编辑,您应该将其放置在相应的位置。例如,如果您使用navGrid http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition然后是它的第 3 个和第 4 个参数(参见prmEdit and prmAdd) 允许您指定转发到的选项editGridRow by navGrid如果用户单击导航栏的“编辑”或“添加”按钮。您发布的代码问题 https://stackoverflow.com/q/24800860/315935使用正确的地方editData,但是“添加editData以下editurl“(请参阅问题正文)是错误的方式。

你写了“我必须将2个参数传递给控制器​​”(但是代码UpdateData您发布的动作控制器包含only one范围gridData)。你没有发帖colModel这使得理解你变得更加困难(通过你使用误解名称的方式:colModel: colname, but colName选项有另一个值colHeader),但可能恰好是其中的一列colModel have editable: true财产。在这种情况下,使用表单编辑似乎真的不是最好的选择,并且使用单元格编辑可能会更简单。要使用它,您需要添加cellsubmit: "remote", cellEdit: true and cellurl: "/Home/UpdateData"。在这种情况下 jqGrid 将发送到服务器(到cellurl) 3参数(参见文档 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing#what_is_posted_to_the_server):

  • 名称类似于值的编辑数据name财产在colModel.
  • 名字下的rowidid。一个可以用prmNames option http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options改变id姓名。例如prmNames: {id: "TransactionId"}将 rowid 的名称更改为TransactionId.
  • 固定弦oper=edit。可以根据用途更改名称prmNames。例如prmNames: {oper: "myOper", editoper: "myEdit"}会改变oper=edit to myOper=myEdit.

另外还可以使用beforeSubmitCell and 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)
    };
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在jqGrid的Edit Url中传递参数进行表单编辑 的相关文章