删除后JQGrid源未填充

Question

我正在使用在$（document）.ready中设置的jqGrid：

jQuery("#list").jqGrid({
        datatype: 'json',
        colNames: ['ID', 'Note', 'Date Added'],
        colModel: [
            { name: 'ID', index: 'ID', width: 60, key: true },
            { name: 'ContactNote', index: 'ContactNote', width: 300, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'; } },
            { name: 'ContactDate', index: 'DateAdded', width: 100 }
        ],
        mtype: 'POST',
        viewrecords: true,
        jsonReader: { repeatitems: false },
        ignoreCase: true,
        height: 450,
        loadonce: false,
        onSelectRow: function (id) { $('#ContactId').val(id); }
    });

这是页面的HTML：

<div class="col-12">
<div class="ui-content-6 ui-widget-content ui-corner-all">
    @using (Html.BeginForm())
    {
        <h3 class="ui-widget-header ui-corner-all">Enter account number</h3>
        <div class="field-container">
            @Html.LabelFor(o => o.AccountNumber)
            @Html.TextBoxFor(o => o.AccountNumber)
        </div>

        <div class="form-submit">
            <button id="btnSearchContactItems">Get Contact Items</button>
        </div>

        <h3 class="ui-widget-header ui-corner-all">Contact item list</h3>

        <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>

        <div class="form-submit">
            <button id="btnRemoveContactItem" type="submit">Remove Selected Contact Item</button>
        </div>

        @Html.HiddenFor(o => o.ContactId)

        @Html.ValidationSummary()
    }
</div>

btnSearchContactItems按钮具有click事件：

$("#btnSearchContactItems").click(function () {

        $("#list")
            .jqGrid('setGridParam', { postData: { accountNumber: $('#AccountNumber').val() }, url: baseSearchURL })
            .trigger('reloadGrid');

        return false;
    });

这是问题：

我让用户输入他们的帐号，然后在btnSearchContactItems按钮上单击，在网格中填写一些注释。 选择一个便笺并单击btnRemoveContactItem按钮后，将调用该操作并删除便笺。 问题在于，一旦未删除，网格就会清空。 我想发生的是让网格重新加载数据减去已删除的行。

我发誓，为了我的一生，我无法重新填充数据。 我试过在网格加载，页面加载等中触发按钮单击，但仍然没有。 如果我实际单击该按钮，它将仅再次填充网格。 有人有什么想法吗？

Answer 1

我想你怎么不想在页面开始时向服务器发送任何请求。 为此，如果创建网格，则可以使用datatype: "local" 。 您可以在创建网格时设置url: baseSearchURL 。 该参数将被忽略，其datatype: "local" 。

现在，我回到主要问题：您可以在创建网格时直接定义postData选项，但是您应该使用函数（方法）作为属性（有关详细信息，请参见答案 ）：

postData: {
    accountNumber: function () {
        var account = $('#AccountNumber').val();
        return account ? account : null;
    }
}

如果重新加载网格，则每次都会调用accountNumber方法。 所以你可以使用

$("#btnSearchContactItems").click(function () {
    $("#list").jqGrid('setGridParam', { datatype: "json" }}).trigger('reloadGrid');
    return false;
});

如果需要，还可以在click处理程序datatype: "local"内进行设置datatype: "local"如果$('#AccountNumber').val()为空， $('#AccountNumber').val() datatype: "local" 。

如果您确实不想将任何accountNumber属性发送到服务器，该属性的值为null或"" ，则可以使用以下格式的serializeGridData

serializeGridData: function (postData) {
    var propertyName, propertyValue, dataToSend = {}, val;
    for (propertyName in postData) {
        if (postData.hasOwnProperty(propertyName)) {
            propertyValue = postData[propertyName];
            val = $.isFunction(propertyValue) ? propertyValue() : propertyValue;
            if (propertyName !== "accountNumber" || val) {
                // don't send "accountNumber" with empty value
                dataToSend[propertyName] = val;
            }
        }
    }
    return dataToSend; // ?? probably you can use JSON.stringify(dataToSend);
}

（有关详细信息，请参见答案 ）

另外，我建议您将gridview: true设置为gridview: true以提高网格的性能并添加rowNum: 10000 。 jqGrid旨在显示页面数据。 您不使用pager选项，但rowNum的默认值为20。因此，如果不设置rowNum: 10000 jqGrid将仅显示前20行数据。 这不是你想要的。