工具栏搜索本地数据，即使搜索后仍保留单元格中的值

Question

我正在使用工具栏搜索本地数据（因为我正在使用选项loadonce: true）。在我的网格中，有一列 'Transfer Qty.' 默认情况下是可编辑的。

我想要这样的功能，假设我在第 4 行的 'Transfer Qty.' 列中输入了一些值，其批号名称为 'OpStk_Leher_Mumbai-500'（为此请参考上图），如果我使用搜索字符串 'P-35' 进行搜索并按回车键，它会根据我的搜索字符串给出前三行作为搜索结果，并且它将排除我输入值的第 4 行.要获得一个想法，请参考下图...

但是如果我从搜索框中删除搜索字符串并按回车键，它会给我所有记录但是，我在第 4 行第 'TransferQty' 列中输入的值消失了，我想无论如何保留该值。

如果有人知道如何做到这一点，请分享您的宝贵意见。

为了从技术角度理解，我的jQgrid代码如下：

 var oGrid = $('#tbLots'), 
 topPagerSelector = '#' + $.jgrid.jqID(oGrid[0].id) + "_toppager", lastSel;

oGrid.jqGrid({
    url: sRelativePath + '/WSAjax.asmx/GetDataForGrid',
    mtype: "POST",
    datatype: "json",
    ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
    serializeGridData: function (data) {
        return JSON.stringify(data);
    },
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    },
    colNames: ['SISDIdForExch', 'SubLotId', 'Lot#', 'Expiry Date', 'Qty.', 'Transfer Qty.'],
    colModel: [
        { name: 'SISDIdForExch', index: 'SISDIdForExch', hidden: true },
        { name: 'SubLotId', index: 'SubLotId', hidden: true },
        { name: 'LotNo', index: 'LotNo', editable: false, sortable: false, width: 100},
        {name: 'Expiry', index: 'Expiry', editable: false, search: false, align: 'center', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'd/m/Y' }, sortable: false, width: 60 },
        { name: 'BucketQty', index: 'BucketQty', editable: false, search: false, template: viewNumTemplate, width: 60 },
        { name: 'TransferQty', index: 'TransferQty', editable: true, search: false, template: editNumTemplate, width: 60, editrules: { minValue: 0.00 },
            editoptions: {
                dataInit: function (domElem) {
                    $(domElem).on("blur", function () {
                        calculateTotalTransferQty($("#tbLots"));
                    });
                }
            }
        }
    ],
    prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
    search: false,
    postData: {
        filters: null,
        spName: 'GetLotDetails',
        paramXML: $xmlDoc.html().toString()
    },
    width: 'auto',
    height: 'auto',
    rowNum: 1000,
    sortname: '',
    sortorder: 'asc',
    page: 1,
    gridview: true,
    toppager: true,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    caption: 'Item Lots',
    editurl: 'clientArray',
    footerrow: true,
    loadonce: true,
    gridComplete: function () {
        $("table#tbLots tr:last").addClass('ireg-jqgrid-lastrow');
        $("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
    },
    loadComplete: function (data) {
        updateJqGridButtonState($(this), jqGridMode.None);
        //Following piece of code made 'Transfer Qty.' column by default editable. 
        var l_oIds = oGrid.jqGrid('getDataIDs'), i;
        for (i = 0; i < l_oIds.length; i++) {
            oGrid.jqGrid('editRow', l_oIds[i], true);
        }
        //Set focus on first editable cell. 
        if (l_oIds.length > 0)
            $('#' + l_oIds[0] + '_TransferQty').get(0).focus();
    },
    onSelectRow: function (rowid) {
        if (rowid && rowid != lastSel) {
            if (typeof lastSel !== "undefined") {
                $(this).jqGrid('restoreRow', lastSel);
            }
            lastSel = rowid;
        }
        updateJqGridButtonState($(this), jqGridMode.None);
    }
});
oGrid.jqGrid('filterToolbar', { stringResult: true, defaultSearch: 'cn', //groupOp: 'OR',
    beforeSearch: function () {
        if (colDataTypes.length != 0 && colDataTypes != undefined) {
            var oRules = new Array();
            var postdata = $('#tbLots').jqGrid('getGridParam', 'postData'), 
            oCustFilter = $.parseJSON(postdata.filters), colName, searchStr, operator, groupOperator = '';
            for (var i = 0; i < oCustFilter.rules.length; i++) {
                groupOperator = oCustFilter.groupOp;
                searchStr = oCustFilter.rules[i].data;
                colName = oCustFilter.rules[i].field;
                operator = oCustFilter.rules[i].op;
                oRules.push({ field: colName, op: operator, data: searchStr });
            }

            if (searchVal != null && searchVal != '') {
                var oFilter = { groupOp: groupOperator, rules: oRules };
                $.extend(postdata, { filters: JSON.stringify(oFilter) });
                $('#tbLots').jqGrid('setGridParam', { search: true, postData: postdata });
                $('#tbLots').trigger("reloadGrid", [{ page: 1}]);
            }
        }
        return true;
    }
});
//Added afterRefresh function to clear toolbar.
oGrid.jqGrid('navGrid', topPagerSelector, { add: false, edit: false, del: false, search: false,
    afterRefresh: function () {
        $(this)[0].clearToolbar();
    } 
 }, {}, {}, {}, {});

这是我更新的代码，您教我的方法

oGrid.jqGrid('filterToolbar', { stringResult: true, defaultSearch: 'cn', //groupOp: 'OR',
    beforeSearch: function () {
       if (colDataTypes.length != 0 && colDataTypes != undefined) {
            var oRules = new Array();
            var postdata = $('#tbLots').jqGrid('getGridParam', 'postData'), 
                oCustFilter = $.parseJSON(postdata.filters), colName, searchStr, operator, groupOperator = '';
            for (var i = 0; i < oCustFilter.rules.length; i++) {
                groupOperator = oCustFilter.groupOp;
                searchStr = oCustFilter.rules[i].data;
                colName = oCustFilter.rules[i].field;
                operator = oCustFilter.rules[i].op;
                //iReg-1821: Uncommneted the following code.
                var colIndex = getColumnIndexByName($('#tbLots'), colName);
                var searchVal = '', bAttachQuote = false;

                if ('STRING' === colDataTypes[colIndex]) {
                    searchVal = searchStr;
                    bAttachQuote = true;
                } 

                oRules.push({ field: colName, op: operator, data: searchStr, coldatatype: colDataTypes[colIndex], attachquote: bAttachQuote });
            }

            if (searchVal != null && searchVal != '') {
                var oFilter = { groupOp: groupOperator, rules: oRules };
                $.extend(postdata, { filters: JSON.stringify(oFilter) });
                $('#tbLots').jqGrid('setGridParam', { search: true, postData: postdata });
                $('#tbLots').trigger("reloadGrid", [{ page: 1}]);
            }
        }

        HERE IS MY CODE, WHAT YOU TAUGHT ME TO DO 
        var l_oIds = oGrid.jqGrid('getDataIDs'), i;
        for (i = 0; i < l_oIds.length; i++) {
            oGrid.jqGrid('saveRow', l_oIds[i], false, 'clientArray');
        }

        return true;
    }
});

Answer 1

在我看来，问题的根源在于使用你描述的行为

... one column 'Transfer Qty.' which is by default editable.

您为网格的所有行调用 editRow。因此，您将网格的所有行设置为 editing 状态。不推荐这种方式，因为它会产生更多问题。

问题如下。如果您开始内联编辑，那么 jqGrid 会将所有编辑行的原始值保存在内部 savedRow 参数内，该参数是所有编辑行的原始值数组。在内联编辑期间，用户可以从可编辑字段中进行任何更改，但用户可以通过按 Esc 键 取消更改。换句话说，jqGrid 必须保存旧值和当前（尚未保存）的修改值。如果用户单击 header 列，则 jqGrid 默认按该列排序。排序是指re-filling网格的当前页。不清楚当前可编辑的行是应该保存还是丢弃。因此在内联编辑期间通常禁止排序。搜索也存在同样的问题。

如果您想在内联编辑期间允许搜索并且需要保存数据，那么您必须在 filterToolbar 的 beforeSearch 回调内的循环中调用 saveRow。就像您为 loadComplete 内的所有行显式调用 editRow 一样，您必须在 beforeSearch 之前为 内的所有行调用 saveRow reloadGrid.

的触发器

对你的代码多说一句。在我看来，网格的最后一行具有特殊意义——它包含页脚信息。您在 gridComplete 内的行上设置 ireg-jqgrid-lastrow class。该行将不可编辑。在我看来，这种情况可以在 jqGrid 中以另一种方式实现。您可以在网格中添加 footerrow: true 选项。它在主网格下方添加了 separate div，但所有内容看起来都非常接近您包含的图片。主要区别在于主要数据与页脚的分离。您可以使用 footerData 方法将数据放在页脚中，也可以使用 userDataOnFooter: true 选项。 jqGrid 会自动将页脚与来自服务器返回的数据的userdata 部分数据一起使用。有关相应的演示和实施细节，请参阅 the old answer and this one or this one。

Answer 2

解决方案：- 我已经实施 loadonce: true

oGrid.jqGrid('filterToolbar', { stringResult: true, defaultSearch: 'cn', //groupOp: 'OR',
    beforeSearch: function () {

        var oRules = new Array();
        var postdata = $('#tbLots').jqGrid('getGridParam', 'postData'), 
            oCustFilter = $.parseJSON(postdata.filters), colName, searchStr, operator, groupOperator = '';
        for (var i = 0; i < oCustFilter.rules.length; i++) {
            groupOperator = oCustFilter.groupOp;
            searchStr = oCustFilter.rules[i].data;
            colName = oCustFilter.rules[i].field;
            operator = oCustFilter.rules[i].op;

            oRules.push({ field: colName, op: operator, data: searchStr });
        }

        var oFilter = { groupOp: groupOperator, rules: oRules };
        $.extend(postdata, { filters: JSON.stringify(oFilter) });
        $('#tbLots').jqGrid('setGridParam', { search: true, postData: postdata });
        //$('#tbLots').trigger("reloadGrid", [{ page: 1}]);
    }

    /*here is the code, what you taught me to do*/
    var l_oIds = oGrid.jqGrid('getDataIDs'), i;
    for (i = 0; i < l_oIds.length; i++) {
        oGrid.jqGrid('saveRow', l_oIds[i], false, 'clientArray');
    }

    //reloading grid after saverow
    $('#tbLots').trigger("reloadGrid", [{ page: 1}]);

    return true;
});

工具栏搜索本地数据，即使搜索后仍保留单元格中的值

Toolbar search local data, retain value in cell even after searching

search

jquery

toolbar

jqgrid

jqgrid-asp.net