Question

我正在尝试使用jqgrid编辑表单，但我无法理解为什么jqgrid每次选择一行时都不会调用asmx web方法而我点击编辑图标（jqgrid第一次调用ajax）

这是代码：

function Grid() {  
   var ret = Array();

   var grid = jQuery("#grid");


var hideLoading = function () {
    $("#lui_" + grid).hide();
    $("#load_" + grid).hide();
}

var strSearch = "";
var strField = "";
var strOper = "";

//
//  handler: si occupa di creare il contenuto del menu a tendina (form jqGrid)
//
var buildOptions = function (dataList) {
    var response = dataList;
    var option = "";

    if (response && response.length) {
        for (var i = 0, l = response.length; i < l; i++) {

        if (response[i]["selectedvalue"] == "on")
            option += '<option role="option" selected="selected" value="' + response[i]["Codice"] + '">' + response[i]["Descrizione"] + '</option>';
        else
            option += '<option role="option" value="' + response[i]["Codice"] + '">' + response[i]["Descrizione"] + '</option>';
        }
    }

    return option;
};

grid.jqGrid({
    // setup custom parameter names to pass to server
    prmNames: {
        search: "isSearch",
        nd: null,
        rows: "numRows",
        page: "page",
        sort: "sortField",
        order: "sortOrder"
    },
    // add by default to avoid webmethod parameter conflicts
    postData: {
        searchString: '',
        searchField: '',
        searchOper: ''
    },
    // setup ajax call to webmethod
    datatype: function (postdata) {
        $.ajax({
        url: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/GetRoomRateDiscount") %>',
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(postdata),
        dataType: "json",
        success: function (data, st) {
            if (data.d == "KO") {
            grid.GridUnload();

            jAlert("La ricerca non ha restituito alcun risultato", "Book2Guest");

            return false;
            }

            if (st == "success") {
            var grid = $("#grid")[0];
            grid.addJSONData(JSON.parse(data.d));
            ret = JSON.parse(data.d);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            jAlert("Si è verificato un errore: " + textStatus + " " + errorThrown + " -- " + $.parseJSON(xhr.statusText), "Book2Guest");
        }
        });
    },
    // this is what jqGrid is looking for in json callback
    jsonReader: {
        root: "rows",
        page: "page",
        total: "totalpages",
        records: "totalrecords",
        cell: "cell",
        id: "id",
        userdata: "userdata",
        repeatitems: true
    },
    ajaxSelectOptions: {
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        data: {
            rowId: function () {
                if (JSON.stringify(grid.jqGrid('getRowData', grid.jqGrid('getGridParam', 'selrow'))['Codice']) == undefined)
                    return "";

                return JSON.stringify(grid.jqGrid('getRowData', grid.jqGrid('getGridParam', 'selrow'))['Codice']);
            }
        }
    },
    colNames: ['ID', 'Rate'],
    colModel: [
        { name: 'ID', index: 'ID', width: 10, align: "center", search: false, sorttype: 'int', searchoptions: { sopt: ['eq', 'ne', 'cn']} },
        {
        name: 'TariffaCodiceOfferta',
        index: 'TariffaCodiceOfferta',
        width: 50,
        hidden: true,
        formatter: 'select',
        editable: true,
        edittype: 'select',
        editrules: { edithidden: true }, //, required: true },
        editoptions: {
            multiselect: true,
            dataUrl: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/GetRoomRateListByRowId") %>',
            buildSelect: function (data) {
                var response = $.parseJSON(data.d);

                var option = buildOptions(response);
                var s = '<select>';
                s += option;

                return s + "</select>";
            },
            dataInit: function (elem) {
                setTimeout(function () {
                    $(elem).multiselect({ selectedList: 10 });
                }, 50);
            },
            multiple: true
        }
        },
      ],
rowNum: 10,
rowList: [10, 20, 30],
height: 'auto',
pager: '#gridpager',
viewrecords: true,
shrinkToFit: false,
loadComplete: function () {
    hideLoading();
},
loadError: function () {
    hideLoading();
},
editurl: '<%# ResolveUrl("~/Service/Domain/ServiceRoom.asmx/SaveRoomDiscount") %>',
sortname: "ID",
sortorder: "asc",
caption: "Rate list",
onSelectRow: function (id, status) {},
ondblClickRow: function (rowid) {
    grid.jqGrid('editGridRow', rowid,
    {
    width: 450,
    height: 450,
    closeOnEscape: true,
    addCaption: "Add Rate",
    editCaption: "Edit Rate",
    bSubmit: "Salva",
    bCancel: "Annulla",
    bClose: "Chiudi",
    bYes: "Si",
    bNo: "No",
    bExit: "Annulla",
    editData: { 
        "codice": function () {
            var selectedRow = grid.getGridParam("selrow");
            var rowData = grid.getRowData(selectedRow);
            return rowData["Codice"];
        }
    },
    viewPagerButtons: false,
    closeAfterEdit: true,
    reloadAfterSubmit: true,
    beforeShowForm: function (form) {
        var dlgDiv = $("#editmod" + grid[0].id);
        var parentDiv = dlgDiv.parent(); // div#gbox_list
        var dlgWidth = dlgDiv.width();
        var parentWidth = parentDiv.width();
        var dlgHeight = dlgDiv.height();
        var parentHeight = parentDiv.height();

        // Grabbed jQuery for grabbing offsets from here:
        //http://stackoverflow.com/questions/3170902/select-text-and-then-calculate-its-distance-from-top-with-javascript
        var parentTop = parentDiv.offset().top;
        var parentLeft = parentDiv.offset().left;

        dlgDiv[0].style.top = Math.round(parentTop + (parentHeight - dlgHeight) / 2) + "px";
        dlgDiv[0].style.left = Math.round(parentLeft + (parentWidth - dlgWidth) / 2) + "px";
    },
    onClose: function (response, postdata) {
    }
    });

    return;
},
gridComplete: function () {
    if (grid.getGridParam('records') == 0) // are there any records?
    DisplayEmptyText(true);
    else
    DisplayEmptyText(false);
},
emptyDataText: 'There are no records. '
})
grid.setGridWidth(900, true);
grid.jqGrid('navGrid', '#gridpager',
{
    edit: true,
    view: false,
    add: false,
    del: true,
    search: false
},
//prmEdit
{
    width: 450,
    height: 300,
    closeOnEscape: true,
    addCaption: "Aggiungi Offerta",
    editCaption: "Modifica Offerta",
    bSubmit: "Salva",
    bCancel: "Annulla",
    bClose: "Chiudi",
    saveData: "Sono state apportate delle modifiche, sei sicuro di voler continuare?",
    bYes: "Si",
    bNo: "No",
    bExit: "Annulla",
    editData: { 
        "Codice": function () {
            var selectedRow = grid.getGridParam("selrow");
            var rowData = grid.getRowData(selectedRow);
            return rowData["Codice"];
        } 
    },
    viewPagerButtons: false,
    closeAfterEdit: true,
    reloadAfterSubmit: true,
    beforeShowForm: function (form) {
        var dlgDiv = $("#editmod" + grid[0].id);
        var parentDiv = dlgDiv.parent(); // div#gbox_list
        var dlgWidth = dlgDiv.width();
        var parentWidth = parentDiv.width();
        var dlgHeight = dlgDiv.height();
        var parentHeight = parentDiv.height();

        // Grabbed jQuery for grabbing offsets from here:
        //http://stackoverflow.com/questions/3170902/select-text-and-then-calculate-its-distance-from-top-with-javascript
        var parentTop = parentDiv.offset().top;
        var parentLeft = parentDiv.offset().left;

        dlgDiv[0].style.top = Math.round(parentTop + (parentHeight - dlgHeight) / 2) + "px";
        dlgDiv[0].style.left = Math.round(parentLeft + (parentWidth - dlgWidth) / 2) + "px";
    },
    onClose: function (response, postdata) {}
}
//prmSearch, 
//prmView
);
return ret;

}

更新：要解决此问题，你们必须在jqGrid的编辑部分插入'recreateForm：true'

Answer 1

您当前的代码在'Codice'中没有colModel列，但您尝试从列中获取数据。即使原始服务器响应具有Codice属性，只有在添加具有相同名称的其他隐藏列时，才会保存该属性。

很抱歉，但为了表示信任，我建议您重写您使用的整个代码。使用datatype作为功能并不好。而不是你可以使用jsonReader。 JSON.parse(data.d)内$.ajax的{{1}}调用显示您在服务器端的web方法中发生了一个更重要的错误。它表明您将返回的对象手动转换为dataType: "json"，而不是从Web方法返回 object 。 WebService将对象自动转换为JSON 。由于JSON的手动约定，返回的数据将两次转换为JSON。只是因为服务器代码中的错误，您必须使用String，并且不能像here那样使用JSON.parse(data.d)。

每次jqgrid编辑调用ajax

1 个答案: