在jquery jqgrid的编辑模式下发布其他数据以及内联编辑的自定义验证

时间:2010-11-15 09:40:20

标签: asp.net-mvc jqgrid

我正在使用jqgrid,其中我需要在编辑时将附加数据传递给控制器​​......但我无法这样做......这是我的代码,如下所示..

 <script type="text/javascript">

//

        var checkMileageLimit = function (value, colname) {

            var clName = (colname == 'MileageLimitPM' ? 'MileageLimitAM' : 'MileageLimitPM');

            if (parseInt(value) + parseInt($('#' + clName).val()) > parseInt($("#TotalMileage").val())) {
                return [false, "sum of AM and PM mileage should not  exceed Total Mileage", ""];
            }
            else return [true, "", ""];
        };

        var checkTouchLimit = function (value, colname) {

            var clName = (colname == 'TouchLimitPM' ? 'TouchLimitAM' : 'TouchLimitPM');

            if (parseInt(value) + parseInt($('#' + clName).val()) > parseInt($("#TotalTouches").val())) {
                return [false, "sum of AM and PM Touches should not  exceed Total Touches", ""];
            }
            else return [true, "", ""];
        };

        var lastsel;
        $("#list").jqGrid({
            url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
            datatype: 'json',
            mtype: 'GET',
            postData: {
                StartDate: function () { return $('#StartDate').val(); },
                EndDate: function () { return $('#EndDate').val(); },
                siteId: function () { return $('#ListFacility').length == 0 ? -1 : $('#ListFacility').val(); }
            },
            colNames: ['RowID', 'SiteID', 'CalDate', 'Store Open', 'Start Time', 'End Time',
                   'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
                   'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
            colModel: [
            { name: 'RowID', index: 'RowID', width: 40, key: true, editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
            { name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
            { name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: false, formoptions: { elmsuffix: ' *'} },
            { name: 'StoreOpen', index: 'StoreOpen', width: 40, editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'} }, width: "40" },
            { name: 'StartTime', index: 'StartTime', width: 100, editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'EndTime', index: 'EndTime', width: 100, editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, editable: true, formatter: 'integer',
                edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
                    required: true
                }, formoptions: { elmsuffix: ' *' }
            },
            { name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkMileageLimit, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkTouchLimit, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', formatter: 'integer', editrules: { custom: true, custom_func: checkTouchLimit, required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TotalTouches', index: 'TotalTouches', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'TotalMileage', index: 'TotalMileage', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
            { name: 'WeekDay', index: 'WeekDay', width: 200, editable: false, hidden: false }
        ],
            pager: $('#listPager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'CalDate',
            sortorder: "desc",
            viewrecords: true,
            caption: 'Schedule Calendar',
            autowidth: false,
            gridview: true,
            id: "RowID",    

            ondblClickRow: function (id) {

                if (id && id !== lastsel) {
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editGridRow', id,{ onclickSubmit});
                    lastsel = id;
                }

            }
          , editurl: '<%= Url.Action("UpdateGrid", "TouchSchedule") %>'

        }).navGrid('#listPager',
               { edit: true, add: false, del: false, search: false, refresh: true },
                 {width:400,height:400,closeAfterEdit:true,
                onclickSubmit:function(params) {   var ajaxData = {};

                var list = $("#list");
                var selectedRow = list.getGridParam("selrow");
                rowData = list.getRowData(selectedRow);
                ajaxData = { CalDate: rowData.CalDate };

                return ajaxData; }}

    );

        $('#btnSubmit').click(function () {
            $("#list").clearGridData();
            $("#list").trigger("reloadGrid");

        });
    });

//]] GT;     

请让我知道我哪里出错......我也观察到,如果我使用内联编辑,那么自定义验证不会被解雇?如何通过内联编辑解决这个问题?

提前感谢...

2 个答案:

答案 0 :(得分:5)

首先,您不要在代码中使用内联编辑。您以错误的方式使用editGridRow

jQuery('#list').jqGrid('editGridRow', id,{ onclickSubmit});

而不是内联编辑模式中使用的editRow

您至少应该为onclickSubmit事件句柄设置一个值:

jQuery('#list').jqGrid('editGridRow', id,
                       { onclickSubmit : function(params, posdata) {
                                             alert ("in onclickSubmit");
                                             // ...
                                         }
                       });

此外,您尝试不使用基于value参数的验证作为自定义验证函数的参数。您尝试阅读其他文本字段。你应该明白,这不是最好的方法。此外,在内联编辑的情况下,文本字段将使id不同于列的相应名称。因此,$("#TotalMileage")的使用对于表单编辑是可以的,但如果是内联编辑,它应该是$("#"+rowid+"_TotalMileage")

您可以考虑另外使用beforeCheckValues功能,它将使用将要发布的数据的所有字段。在验证表单的每个字段之前,该函数将被称为 。在内联编辑的情况下,这是不可能的,因此您必须以任何方式检测您使用的模式(例如,您可以设置一个手动定义当前的变量)并使用字段ID的相应名称转换。另一种方法是使用dataEvents'change'事件处理程序。

要在表单修改时发送其他数据,您可以使用editData,使用onclickSubmit或自定义serializeEditData功能中的其他数据返回该对象。您还可以修改onclickSubmit函数内部数据发布期间使用的URL。

要以内联编辑模式发送其他数据,您可以使用editRowextraparam参数或使用jqGrid的inlineData参数。

最后还有一句话。您应该开始使用voting up的答案和accepting答案。至少你已经评论了另一个答案,并发布了回答你的问题所需的其他信息。例如前段时间你已经问过almost the same question我要求你发布HTML代码。许多其他问题仍未解决,目前尚不清楚您是否至少在那里阅读过。它会继续,你会得到更少或没有答案。

答案 1 :(得分:0)

我一眼就会说它与你使用GET而不是POST有关。 Get将数据连接到查询字符串。这可能会干扰电网。