jquery - 从服务器重新加载数据时，Free-JQGrid 多选工具栏刷新

问题描述

我有以下代码，当我回调服务器以重新加载网格时，我的下拉过滤器不会根据列数据刷新。
页面加载后，网格加载正常，下拉过滤器加载适当的数据，不包括处于取消或过期状态的报价。当用户单击 Canceled 复选框时，网格会重新加载，并且数据现在包括已取消状态。问题是状态名称下拉工具栏过滤器现在不包括取消的新状态（如果选择则过期）。从我在网上可以找到的内容来看，下拉过滤器似乎应该根据新数据重新加载。我错过了什么？
$(document).ready(function () {
    $("#ckRecentViewed").on('change', function (e) {
        loadGrid();
    });

    $("#ckCanceled").on('change', function (e) {
        loadGrid();
    });

    $("#ckExpired").on('change', function (e) {
        loadGrid();
    });

    $("input:radio:checked").data("chk", true);
    $("input:radio").click(function () {
        $("input[name='" + $(this).attr("name") + "']:radio").not(this).removeData("chk");
        $(this).data("chk", !$(this).data("chk"));
        $(this).prop("checked", $(this).data("chk"));
        $(this).button('refresh'); // in case you change the radio elements dynamically
        loadGrid();
    });

    $("#chkInMyStep").on('change', function (e) {
        loadGrid();
    });

    $('#dvWrapperFilter').on('click', function () {
        $("#dvFilters").slideToggle(function () {
            if ($('#imgHdrPlusMinus').attr('src').indexOf("plus") > 0) {
                $('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("plus", "minus"));
            } else {
                $('#imgHdrPlusMinus').attr('src', $('#imgHdrPlusMinus').attr('src').replace("minus", "plus"));
            }
        });
    });
});

var statusIds = '0,1,3,4,5,6';

var cols = [
    { index: 'CTSID', name: 'CTSID', align: 'left', sortable: true, search: true, width: '20%' },
    { index: 'CustomerName', name: 'CustomerName', align: 'left', sortable: true, search: true, width: '60%' },
    { label: 'Terr', index: 'Territory', name: 'Territory', align: 'center', sortable: true, search: true, width: '20%' },
    { label: 'Zone Manager', index: 'CZMName', name: 'CZMName', align: 'left', sortable: true, search: true, width: '50%' },
    { label: 'Status', index: 'StatusName', name: 'StatusName', align: 'left', sortable: true, width: '30%' },
    { label: 'Version', index: 'VersionNumber', name: 'VersionNumber', align: 'center', sortable: true, search: true, width: '18%' },
    { label: 'Workflow Step', index: 'WorkflowName', name: 'WorkflowName', align: 'left', sortable: true, width: '30%' },
    {
        label: 'Expiration Date', index: 'EffectiveEndDate', name: 'EffectiveEndDate', sortable: true, width: '40%', sorttype: "date", formatter: "date", formatoptions: { newformat: "m/d/y" }, align: 'center',
        searchoptions: {
            sopt: ["eq"], // or any other search operation
            dataInit: function (element) {
                var self = this; // save the reference to the grid
                $(element).datepicker({
                    dateFormat: 'mm/dd/yy',
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    onSelect: function () {
                        setTimeout(function () {
                            self.triggerToolbar();
                        }, 0);
                    }
                });
            }
        }
    },
    {
        label: '', index: 'action', name: 'action', sortable: false, align: 'center', search: false, width: '20%', formatter: addLink, cellattr: function () {
            return "title=\"Click to view quote details\"";
        }
    }
];

var actionUrl = 'Dashboard/GetUserWorkflowDashboard';

var getUniqueNames = function (columnName, mydata) {
    var texts = $.map(mydata, function (item) {
        return item[columnName];
    }),
        uniqueTexts = [], textsLength = texts.length, text, textsMap = {}, i;

    for (i = 0; i < textsLength; i++) {
        text = texts[i];
        if (text !== undefined && textsMap[text] === undefined) {
            // to test whether the texts is unique we place it in the map.
            textsMap[text] = true;
            uniqueTexts.push(text);
        }
    }
    return uniqueTexts;
},
    buildSearchSelect = function (uniqueNames) {
        var values = "";
        $.each(uniqueNames, function () {
            values += this + ":" + this + ";";
        });
        return values.slice(0, -1);
    },
    initMultiselect = function (searchOptions) {
        var $elem = $(searchOptions.elem),
            options = {
                selectedList: 2,
                height: "auto",
                checkAllText: "all",
                uncheckAllText: "no",
                noneSelectedText: "Any",
                open: function () {
                    var $menu = $(".ui-multiselect-menu:visible");
                    $menu.addClass("ui-jqdialog").width("auto");
                    $menu.find(">ul").css("maxHeight", "200px");
                }
            };
        if (searchOptions.mode === "filter") {
            options.minWidth = "auto";
        }
        $elem.multiselect(options);
        $elem.siblings("button.ui-multiselect").css({
            width: "100%",
            margin: "1px 0",
            paddingTop: ".3em",
            paddingBottom: "0"
        });
    },
    setSearchSelect = function (columnName, data) {
        var values = buildSearchSelect(getUniqueNames.call(this, columnName, data));
        $(this).jqGrid("setColProp", columnName, {
            stype: "select",
            searchoptions: {
                value: values,
                sopt: ["in"],
                attr: {
                    multiple: "multiple",
                    size: 4
                },
                selectFilled: initMultiselect
            }
        });
    },
    myDefaultSearch = "cn",

beforeProcessingHandler1 = function (data) {
    var $this = $(this), p = $this.jqGrid("getGridParam");
    // !!! it will be called only after loading from the server
    // datatype is always "json" here
    setSearchSelect.call(this, "WorkflowName", data);
    setSearchSelect.call(this, "StatusName", data);
    setSearchSelect.call(this, "CZMName", data);

    if (this.ftoolbar === true) {
        //if the filter toolbar is not already created
        $("#gs_" + this.id + "WorkflowName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');

        $("#gs_" + this.id + "StatusName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');

        $("#gs_" + this.id + "CZMName").multiselect("destroy");
        $this.jqGrid('destroyFilterToolbar');
    }

    if (p.postData.filters) {
        p.search = true;
    }

    $this.jqGrid("filterToolbar", {
        stringResult: true,
        defaultSearch: myDefaultSearch,
        beforeClear: function () {
            $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    $(this).prev("select[multiple]").multiselect("refresh");
                });
            $(this.grid.hDiv)
                .find(".ui-search-toolbar button.ui-multiselect")
                .each(function () {
                    // synchronize jQuery UI Multiselect with <select>
                    $(this).prev("select[multiple]").multiselect("refresh");
                }
                ).css({
                    width: "98%",
                    marginTop: "1px",
                    marginBottom: "1px",
                    paddingTop: "3px"
                });
        }
    });
};

$(function () {
    //Initialize jqgrid
    $("#gridWorkflowDashboard").jqGrid({
        datatype: 'json',
        url: actionUrl,
        mType: 'GET',
        colModel: cols,
        rowList: [25, 50, 100],
        pager: "#dvDashboardPager",
        forceClientSorting: true,
        loadonce: true,
        beforeProcessing: beforeProcessingHandler1,
        sortname: "EffectiveEndDate",
        sorttype: "date",
        sortorder: "desc",
        rownumbers: false,
        rowNum: 25,
        gridview: true,
        hidegrid: false,
        height: "100%",
        autowidth: true,
        search: true,
        altclass: "GridRows",
        recreateFilter: true,
        hoverrows: true,
        viewsortcols: [true, 'vertical', true],
        ignoreCase: true,
        viewrecords: true
    }).jqGrid("navGrid", { add: false, edit: false, del: false, search: false, refresh: true });
});

function loadGrid() {
    page = $("#gridWorkflowDashboard").getGridParam('page');
    var ids = statusIds;

    var pExperationDate = $('input:radio[name="rdExpiration"]:checked').val();
    var pToDate = $("#datepickerTo").val();
    var pFromDate = $("#datepickerFrom").val();
    var pRecentView = $("#ckRecentViewed")[0].checked;
    var pInMyStep = $("#chkInMyStep")[0].checked;
    var pCanceled = $("#ckCanceled")[0].checked;
    var pExpired = $("#ckExpired")[0].checked;

    if (pCanceled) {
        ids += ',-1';
    }
    else {
        ids = statusIds;
    }

    if (pExpired) {
        ids += ',2';
    }
    else {
        ids = statusIds;

        if (pCanceled) {
            ids += ',-1';
        }
    }

    var data = { ExperationDays: pExperationDate, toDate: pToDate, fromDate: pFromDate, recentView: pRecentView, InMyStep: pInMyStep, StatusIds: ids };

    $.ajax(actionUrl, {
        contentType: 'application/json',
        type: 'GET',
        datatype: 'json',
        loadonce: true,
        data: data,
        success: function (result) {
            $("#gridWorkflowDashboard").jqGrid('clearGridData');
            //$("#gridWorkflowDashboard").jqGrid('destroyFilterToolbar');
            $("#gridWorkflowDashboard").jqGrid('setGridParam',
                {
                    datatype: 'local',
                    data: result
                }).trigger("reloadGrid", [{ page: page }]);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}

function addLink(cellvalue, options, rowObject) {
    return "<input type='button' class='btn btn-info btn-xs grid-btn' value='View' onclick='ViewQuote(\"" + rowObject.CTSID + "\")'\>";
}

function ViewQuote(value) {
    window.location.href = '/CPQ/Quote/EditQuote/' + value;
}

$(function () {
    $("#datepickerFrom").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/dd/yy',
        minDate: "-8Y",
        maxDate: "0Y",
        onClose: function (dateText, inst) {
            loadGrid();
        }
    }); 

    $("#datepickerTo").datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/dd/yy',
        minDate: "-8Y",
        maxDate: "0Y",
        onClose: function (dateText, inst) {
            loadGrid();
        }
    }); 
});
标签： jqueryjqgridjquery-ui-multiselect
jquery - 从服务器重新加载数据时，Free-JQGrid 多选工具栏刷新

问题描述

解决方案

推荐阅读
