在 jquery ajax 调用上，无法绑定 jqgrid 数据答案

【问题标题】：on jquery ajax call , unable to bind jqgrid data在 jquery ajax 调用上，无法绑定 jqgrid 数据
【发布时间】：2016-06-09 06:38:15
【问题描述】：

我有 2 个关于在 MVC 应用程序中绑定 jgGrid 的查询。 1.我无法在成功回调方法上绑定来自控制器的jsonData 2. 在按钮单击时，我正在从服务器数据加载 jqgrid，但是当我第二次单击时，它没有触发我的服务器代码（在控制器中），只是第一次执行服务器代码。

下面是我的javascript代码

function buildGrid() {

// 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) { mtype: "GET", $.ajax({ url: 'PageName.aspx/getGridData', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = jQuery("#list")[0]; grid.addJSONData(JSON.parse(data.d)); } }, error: function() { alert("Error with AJAX callback"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it userdata: "userdata", repeatitems: true }, colNames: ['Id', 'First Name', 'Last Name'], colModel: [ { name: 'id', index: 'id', width: 55, search: false }, { name: 'fname', index: 'fname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }, { name: 'lname', index: 'lname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} } ], rowNum: 10, rowList: [10, 20, 30], pager: jQuery("#pager"), sortname: "fname", sortorder: "asc", viewrecords: true, caption: "Grid Title Here" }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, // default settings for edit {}, // add {}, // delete { closeOnEscape: true, closeAfterSearch: true}, //search {} ) });

 var grid = $("#jQGrid"); $("#jQGrid").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: {
        'ddlDSVIN': function () {
            return $('#ddlDevice :selected').val();
        },
        'search': function () { return $("#searchId").val(); },
        'OEMType': function () { return $('#ddlOEM :selected').text(); },
        'frmDate': function () { return fromDate.toDateString(); },
        'toDate': function () { return toDate.toDateString(); }

    },
    datatype: function(postdata) { mtype: "POST",
        $.ajax({ url: '/DataIn/DataInSearchResult/', type: "POST", contentType: "application/json; charset=utf-8", 
        //data: postData,
        datatype: "json",
        success: function(data, st) {
            if (st == "success") {
                var grid = jQuery("#jQGrid")[0]; grid.addJSONData(JSON.parse(data.d));
                var container = grid.parents('.ui-jqgrid-view');
                $('#showgrid').show();
                $('#jQGrid').show();
                $('#divpager').show();
                //container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
                $("#hideandshow").show();
                $("#lblTotal").html($(this).getGridParam("records") + " Results");
                $("#hideandshow2").hide();
            }
        },
        error: function(error) { alert("Error with AJAX callback" + error); } }); }, // this is what jqGrid is looking for in json callback 
    jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it
        userdata: "userdata", repeatitems: true
    },

   // url: '/DataIn/DataInSearchResult/',



    colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],

    colModel: [
        { name: 'CorrelationId', index: 'CorrelationId', jsonmap: 'CorrelationId', hidden: true, width: 2, key: true },
       // { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
        { name: 'Device', jsonmap: 'Device', width: '65px' },
        { name: 'Type', jsonmap: 'Type', width: '65px' },
        { name: 'DateReported', jsonmap: 'DateReported', width: '100px' },
          { name: 'ErrorType', jsonmap: 'ErrorType', width: '85px' },
   { name: 'Error', jsonmap: 'Error', width: '160px' },
   { name: 'Latitude', jsonmap: 'Latitude', width: '78px' }, { name: 'Longitude', jsonmap: 'Longitude', width: '78px' },
   { name: 'Payloadurl', jsonmap: 'Payloadurl', width: '180px', formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],

          rowNum: 10, rowList: [10, 20, 30],
          pager: jQuery("#divpager"),  sortorder: "asc",
            viewrecords: true, caption: "Grid Title Here"
 }).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false }, {}, // default settings for edit
 {}, // add
  {}, // delete


{ closeOnEscape: true, closeAfterSearch: true}, //search
    { }); 
}

上面的方法在 document.ready 函数中被调用 $(documen).ready(function() {

("#buttonclick").click(function() {

buildGrid();
});

});

请问我的代码有什么问题。因为我需要通过使用 postData {} 将参数传递给服务方法来搜索按钮点击，但是如何将此 postData 发送到 url 并将结果绑定到 JqGrid。

谢谢

拉吉。

【问题讨论】：

抱歉，但首先我不建议您永远不要使用 datatype 定义为您只需调用 $.ajax 的函数。您在样式中找到的所有示例都是为非常旧的 jqGrid 版本创建的，并且提供了错误的代码。您可以改用datatype: "json" 并使用jqGrid 的url 选项。您可以在jsonReader.root 或beforeProcessing 回调中对服务器响应进行额外的自定义。它在 datatype 函数中节省了很多你必须做的（而且你目前不做的）不必要的工作。
请提供上面的示例代码，纠正错误的代码行，bcz我是jqgrid的新手。即使我不明白你的意思.. 因为我是 jqgrid 及其结构和属性的初学者......
我在回答中提出了修改后的代码。我不知道您从url: '/DataIn/DataInSearchResult/' 使用的数据响应的确切格式。可能需要额外的修改。此外，您使用 jqGrid 的 哪个版本和来自哪个分支 可能很重要。我建议您使用free jqGrid 4.13.0。它是我开发的 jqGrid 的分支。此外，您可以考虑使用loadonce: true 场景。如果网格的总行数不是那么大（例如

标签： jqgrid jqgrid-asp.net mvcjqgrid

【解决方案1】：

不推荐使用datatype。而不是那个可以使用datatype: "json"。它通知 jqGrid 应该使用 $.ajax 方法为您发出 Ajax 请求。可以使用 jqGrid 的附加选项来指定底层$.ajax 请求的选项。

代码中的下一个问题

$(documen).ready(function() {
    $("#buttonclick").click(function() {
        buildGrid();
    });
});

如果用户点击#buttonclick按钮，每次都会调用函数buildGrid。问题是你最初有一个空表

<table id="jQGrid"></table>

在您的页面上，但在创建网格后（调用$("#jQGrid").jqGrid({...});），空表将转换为相对复杂的潜水和表结构（见the picture）。 jqGrid 将忽略第二次调用非空表。这就是为什么第二次点击按钮#buttonclick什么都不做的原因。

您可以通过两种方式解决问题。第一个是在创建网格之前包含$("#buttonclick").jqGrid("GridUnload");。这将破坏网格并重新创建初始的空表。第二种方式os好一点。第二次不能破坏网格，而是调用$("#buttonclick").trigger("reloadGrid");。它将强制向服务器发出新的 Ajax 请求。

您的原始代码的最小更改将跟随我们到以下内容：

$(documen).ready(function() {
    var $grid = $("#jQGrid");

    $grid.jqGrid({ 
        //setup custom parameter names to pass to server 
        prmNames: {
            search: "isSearch",
            nd: null,
            rows: "numRows",
            sort: "sortField",
            order: "sortOrder"
        },
        // add by default to avoid webmethod parameter conflicts 
        postData: {
            ddlDSVIN: function () {
                return $('#ddlDevice').val();
            },
            search: function () {
                return $("#searchId").val();
            },
            OEMType: function () {
                return $('#ddlOEM')
                    .find("option")
                    .filter(":selected")
                    .text();
            },
            frmDate: function () {
                return fromDate.toDateString();
            },
            toDate: function () {
                return toDate.toDateString();
            }
        },
        mtype: "POST",
        url: '/DataIn/DataInSearchResult/',
        datatype: "json",
        ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
        loadComplete: function () {
            $('#showgrid').show();
            $('#jQGrid').show();
            $('#divpager').show();
            $("#hideandshow").show();
            $("#lblTotal").html($(this).getGridParam("records") + " Results");
            $("#hideandshow2").hide();
        },
        jsonReader: {
            root: root: function (obj) {
                return typeof obj.d === "string" ?
                    $.parseJSON(obj.d) :
                    obj.d;
            },
            total: "totalpages",
            records: "totalrecords"
        },
        colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
        colModel: [
            { name: 'CorrelationId', hidden: true, width: 2, key: true },
            // { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
            { name: 'Device', width: 65 },
            { name: 'Type', width: 65 },
            { name: 'DateReported', width: 100 },
            { name: 'ErrorType', width: 85 },
            { name: 'Error', width: 160 },
            { name: 'Latitude', width: 78 },
            { name: 'Longitude', width: 78 },
            { name: 'Payloadurl', width: 180, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#divpager",
        sortorder: "asc",
        viewrecords: true,
        caption: "Grid Title Here"
    }).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false },
        {}, // default settings for edit
        {}, // add
        {}, // delete
        { closeOnEscape: true, closeAfterSearch: true} //search
    );

    $("#buttonclick").click(function() {
        $grid.trigger("reloadGrid");
    });
});

【讨论】：