Question

使用jqgrid，加载数据一次，在本地排序和过滤，并在每次更新/插入/删除后进行刷新。它工作正常，除此之外，如果我使用过滤器（在网格顶部），过滤器在刷新后保持不变，但过滤器不会重新应用于新加载的数据。我在尝试使用trigger（'reloadGrid'）重新加载网格后尝试调用mygrid [0] .triggerToolbar（），但没有效果。

感谢您提供任何帮助或指示： - ）

以下代码：

 var lastsel;
 var mygrid;
 var currentLang;

 //setup grid with columns, properties, events
 function initGrid(lang, productData, resellerData, resellerSearchData) {


    mygrid = jQuery("#list2").jqGrid({
    //data loading settings
    url: '/public/Gadgets/LinkGadget/ProductLinks/' + lang,
    editurl: "/public/Gadgets/LinkGadget/Edit/" + lang,
    datatype: "json",
    mtype: 'POST',
    jsonReader: {
        root: "rows",
        cell: "",
        page: "currpage",
        //total: "totalrecords",
        repeatitems: false
    },
    loadError: function (xhr, status, error) { alert(status + " " + error); },
    //column definitions
    colNames: ['Id', 'ProductId', 'Reseller Name', 'Link', 'Link Status'],
    colModel: [
    { name: 'Id', index: 'Id', width: 40, sortable: false, resizable: true, editable: false, search: false, key: true, editrules: { edithidden: true }, hidden: true },
    { name: 'ProductId', index: 'ProductId', width: 190, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: productData }, editrules: { required: true} },
    { name: 'ResellerName', indexme: 'ResellerName', width: 190, sortable: false, sorttype: 'text', resizable: true, editable: true, search: true, stype: 'select', edittype: "select", editoptions: { value: resellerData }, editrules: { required: true }, searchoptions: { sopt: ['eq'], value: resellerSearchData} },
    { name: 'Link', index: 'Link', width: 320, sortable: true, sorttype: 'text', resizable: true, editable: true, search: true, edittype: "textarea", editoptions: { rows: "3", cols: "50" }, editrules: { required: true }, searchoptions: { sopt: ['cn']} },
    { name: 'LinkStatus', index: 'LinkStatus', width: 100, sortable: false, resizable: true, editable: false, search: false, formatter: linkStatusFormatter}],
    //grid settings
    //rowList: [10, 25, 50],
    rowNum: 20,
    pager: '#pager2',
    sortname: 'ProductId',
    sortorder: 'asc',
    height: '100%',
    viewrecords: true,
    gridview: true,
    loadonce: true,
    viewsortcols: [false, 'vertical', true],
    caption: " Product links ",
    //grid events
    onSelectRow: function (id) {
        if (id && id !== lastsel) {
            if (lastsel == "newid") {
                jQuery('#list2').jqGrid('delRowData', lastsel, true);
            }
            else {
                jQuery('#list2').jqGrid('restoreRow', lastsel);
            }
            jQuery('#list2').jqGrid('editRow', id, true, null, afterSave); //reload on success
            lastsel = id;
        }
    },
    gridComplete: function () {
        //$("#list2").setGridParam({ datatype: 'local', page: 1 });
        $("#pager2 .ui-pg-selbox").val(25); //changing the selected values triggers paging to work for some reason
    }
});

//page settings
jQuery("#list2").jqGrid('navGrid', '#pager2', 
        { del: false, refresh: false, search: false, add: false, edit: false }
);

//refresh grid button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Refresh", title: "Refresh grid", buttonicon: 'ui-icon-refresh',
    onClickButton: function () {
        reload();
    }
});

//clear search button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Clear search", title: "Clear Search", buttonicon: 'ui-icon-refresh',
    onClickButton: function () {
        mygrid[0].clearToolbar();
    }
});

//add row button
jQuery("#list2").jqGrid('navButtonAdd', '#pager2', { caption: "New", buttonicon: 'ui-icon-circle-plus',
    onClickButton: function (id) {
        var datarow = { Id: "newid", ProductId: "", ResellerName: "", Link: "" };
        jQuery('#list2').jqGrid('restoreRow', lastsel); //if editing other row, cancel this
        lastsel = "newid"; // id;
        var su = jQuery("#list2").addRowData(lastsel, datarow, "first");
        if (su) {
            jQuery('#list2').jqGrid('editRow', lastsel, true, null, afterSave); //reload on success
            jQuery("#list2").setSelection(lastsel, true);
        }
    },
    title: "New row"
});

//delete row button
jQuery("#list2").jqGrid('navButtonAdd', "#pager2", { caption: "Delete", title: "Delete row", buttonicon: 'ui-icon-circle-minus',
    onClickButton: function () {
        if (lastsel) {
            if (confirm('Are you sure you want to delete this row?')) {
                var url = '/public/Gadgets/LinkGadget/Edit/' + currentLang;
                var data = { oper: 'del', id: lastsel };
                $.post(url, data, function (data, textStatus, XMLHttpRequest) {
                    reload();
                });
                lastsel = null;
            }
            else {
                jQuery("#list2").resetSelection();
            }
        }
        else {
            alert("No row selected to delete.");
        }
    }
});
jQuery("#list2").jqGrid('filterToolbar');
 }

 //Used by initGrid - formats link status column by adding button
 function linkStatusFormatter(cellvalue, options, rowObject) {
if (rowObject.Id != "newrow")
    return "<input style='height:22px;width:90px;' type='button' " + "value='Check link' " + "onclick=\"CheckLink(this, '" + rowObject.Id + "'); \"  />";
else
    return "";
 }

 //Used by initGrid - reloads grid
 function reload() {

//jqgrid setting "loadonce: true" will reset datatype from json to local after grid has loaded. "datatype: local" 
// does not allow server reloads, therefore datatype is reset before trying to reload grid
$("#list2").setGridParam({ datatype: 'json' }).trigger('reloadGrid');
//mygrid[0].clearToolbar();
lastsel = null;

//Comments: after reload, toolbar filter is not applied to refreshed data. Tried row below without luck
//mygrid[0].triggerToolbar();
}

   //after successful save, reload grid and deselect row
 function afterSave() {
     reload();
 }

Answer 1

保存/更新删除后，您的数据未被重新绑定到网格

重装后jqgrid应用过滤器？

1 个答案: