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

时间：2015-07-14 07:39:33

标签： jquery search jqgrid toolbar jqgrid-asp.net

我正在使用工具栏搜索本地数据（因为我使用选项loadonce: true）。在我的网格中，有一列“转移数量”。默认情况下是可编辑的。enter image description here

我想要一个类似的功能，假设我在“转移数量”列中输入了一些值。在第4行，其批号名称为'OpStk_Leher_Mumbai-500'（为此请参考上图）如果我使用搜索字符串'P-35'进行搜索并按回车，它会给我根据我的搜索字符串，前三行作为搜索结果，它将排除我输入值的第4行。要了解相关信息，请参阅以下图片...... enter image description here

但是如果我从搜索框中删除搜索字符串并按Enter键，它会给我所有记录，但是，我在第4行“TransferQty”中输入的值会消失，我想保留该值。< / strong>

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

为了理解技术角度，我的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;
    }
});

2 个答案:

答案 0 :(得分：1)

在使用您所描述的行为

时，问题的根源在我看来
  

......一栏'转移数量'。默认情况下是可编辑的。

您为网格的所有行调用editRow。因此，您要在编辑状态下设置网格的所有行。这不是推荐方式，因为它会产生更多问题。

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

如果您想在内联编辑期间进行搜索，并且需要保存数据，则必须在beforeSearch filterToolbar回调内的循环中调用saveRow。就像您为editRow内的所有行明确调用loadComplete一样，您必须在saveRow 之前的所有行调用beforeSearch 触发{ {1}}。

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

答案 1 :(得分：0)

解决方案： - 我已实施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;
});
相关问题
最新问题