javascript - Ajax Jqgrid 重新加载网格不工作 c# .net

Question

我正在使用 Web 方法来获取 json 响应，但网格中的“刷新”按钮不起作用。

这是背后的代码:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getData()
{
    string data = GetJson();
    return data;
}

public static string GetJson()
{
    List<NameData> dataList = new List<NameData>();

    NameData data1 = new NameData();
    data1.pkNameID = 1;
    data1.Name = "Name_One";
    dataList.Add(data1);

    NameData data2 = new NameData();
    data2.pkNameID = 2;
    data2.Name = "Name_two";
    dataList.Add(data2);

    System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

    return js.Serialize(dataList);
}

public class NameData
{
    public int pkNameID { get; set; }

    public string Name { get; set; }
}

这是 ajax 脚本:

$(document).ready(function () {
        GetData();
    });

    function GetData() {
        $.ajax({
            type: "POST",
            url: "ListTest.aspx/getData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            //async: false,
            success: function (response) {
                var item = $.parseJSON(response.d);
                if (item != null && item != "" && typeof (item) != 'undefined') {

                    $("#list").jqGrid({
                        url: 'ListTest.aspx/getData',
                        data: item,
                        datatype: 'local',
                        colNames: ['pkNameID', 'Name'],
                        colModel: [
                        { name: 'pkNameID', index: 'pkNameID', width: 30, align: 'left', stype: 'text', editable: false },
                        { name: 'Name', index: 'Name', width: 80, align: 'left', stype: 'text', editable: true }],
                        rowNum: 5,
                        rowList: [10, 20, 30],
                        pager: '#pager',
                        sortname: 'pkNameID',
                        sortorder: 'desc',
                        caption: "Test Grid",
                        viewrecords: true,
                        async: false,
                        loadonce: false,
                        gridview: true,
                        width: 500,
                        edit: true,

                        loadComplete: function (result) {
                            //alert(jQuery("#list").jqGrid('getGridParam', 'records'));
                        },
                        loadError: function (xhr) {
                            alert("The Status code:" + xhr.status + " Message:" + xhr.statusText);//Getting reponse 200 ok
                        }
                    }).navGrid('#pager', { edit: true, add: false, del: false, search: false, refresh: true });


                }
                else {
                    var result = '<tr align="left"><td>' + "No Record" + '</td></tr>';
                    $('#list').empty().append(result);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    }

所以，当我尝试单击刷新按钮(我需要服务器刷新)时，网格不会刷新。我尝试将数据类型:'local'更改为数据类型:'json'，但这得到错误代码:200。我不知道如何修复它。

感谢您今后的帮助!

Answer 1

我认为它不起作用，因为您在 ajax 调用的“成功”中创建了表。 我建议要么添加一个调用 getData 函数的自定义刷新按钮(在函数开头添加 $("#list").GridUnload() )，要么在 jqgrid 实例化内部进行 ajax 调用。 第一种方法应该更容易，尽管不太优雅。 以下是没有刷新按钮的第二种解决方案的示例，但将其添加到此代码中应该很容易:

$("#resTable").jqGrid({
        datatype: "json",
        mtype: 'POST',
        url: "../WS/myServices.asmx/GetData",
        postData: "{firstParam:" + JSON.stringify(firstParam) +
        ", secondParam:" + JSON.stringify(secondParam) +
        ", thirdParam:" + JSON.stringify(thirdParam) + "}",
        loadonce: true,
        jsonReader: {
            repeatitems: false,
            root: function (data) {
                if (data && data.d.length > 0) {
                    return data.d;                    
                }
                else
                    alert("No result");
            }
        },
        ajaxGridOptions: {
            contentType: "application/json",
            type: 'post',
            error: function (result) {
                alert(result.responseText);
            }
        },
        colModel: [
            { label: 'Action', name: 'act', width: 100, sortable: false },
            { label: 'Col1', name: 'Col1', width: 250, sortable: false, key: true },
            { label: 'Col2', name: 'Col2', width: 350, sortable: true },
            { label: 'Col3', name: 'Col3', width: 120, sortable: false },
            { label: 'Col4', name: 'Col4', width: 120, sortable: false, hidden:true }
        ],
        height: 'auto',
        loadComplete: function () {
            var ids = jQuery("#resTable").jqGrid('getDataIDs'); //get the row IDs
            for (var i = 0; i < ids.length; i++) {
                var funct = "javascript:someFunction('" + ids[i] + "');";
                be = '<input type="button" class = "Btn" value="Do something" onclick="' + funct + '"  />';
                jQuery("#resTable").jqGrid('setRowData', ids[i], { act: be });
            }
        },
        beforeSelectRow: function (rowid, e) { 
            return false; //to avoid selecting
        },
        hoverrows: false, //to avoid hovering
        caption: "My table"
    });