jqGrid:在将新数据分配给网格后保留排序,分页和filtertoolbar选择

时间:2015-03-15 10:21:36

标签: jquery sorting jqgrid grid paging

我有jqgrid与分页,排序,filtertoolbar(有两个下拉列表)我在数据上发生任何CRUD操作时使用signalR。服务器发送刷新json并将其重新绑定到网格。

我想在将新鲜的json重新绑定到Grid()之后,在dropdownlist(在filtertoolbar中)和inputfields(在filtertoolbar中)保留旧的排序,分页和值。

这是我正在使用的代码

function PopulateOrdersTable(CCOrder) {
    var gridPageNumber = 1;
    if ($(".ui-pg-input").val() != "1" && $(".ui-pg-input").val() != undefined) {
        gridPageNumber = $(".ui-pg-input").val();
    }

    var sortColumnName = $("#jqgrid").jqGrid('getGridParam', 'sortname');
    var sortOrder = $("#jqgrid").jqGrid('getGridParam', 'sortorder');

    $('#jqgrid').jqGrid('GridUnload');

    if (CCOrder != null) {
        jQuery("#jqgrid").jqGrid({
            data: CCOrder,
            datatype: "local",
            height: 'auto',
            ignoreCase: true,
            stringResult: true,
            colNames: ['#', 'Driver', 'Customer', 'Order Time', 'Delivery Time', 'ETA (Min(s))', 'Amount (AED)', 'Status'],
            colModel: [{
                name: 'OrderId',
                index: 'OrderId',
                width: 50
            }, {
                name: 'DriverName',
                index: 'DriverName',
                width: 120,
                sorttype: "string"
            }, {
                name: 'CustomerName',
                index: 'CustomerName',
                width: 120,
                sorttype: "string"
            }, {
                name: 'StringOrderTime',
                index: 'StringOrderTime',
                sorttype: "date",
                width: 80,
                sopt: ['eq'],
            }, {
                name: 'StringDeliveryTime',
                index: 'StringDeliveryTime',
                sorttype: "date",
                width: 80,
                sorttype: "string",
                sopt: ['eq'],
            }, {
                name: 'StringCustomerETA',
                index: 'StringCustomerETA',
                sorttype: "number",
                width: 70,
                sopt: ['eq'],
            }, {
                name: 'OrderAmount',
                index: 'OrderAmount',
                width: 50,
                sorttype: "number",
                sopt: ['eq'],
            }, {
                name: 'OrderStatus',
                index: 'OrderStatus',
                width: 150,
                sorttype: "string"
            }],
            afterRefresh: function () { ("#jqgrid").jqGrid('setGridParam', { search: true }); },
            rowNum: 5,
            //rowList: [5, 10, 15],
            pager: '#pjqgrid',
            sortname: 'CustomerETA',
            toolbarfilter: true,
            viewrecords: true,
            sortorder: "asc",
            autowidth: true,
            onSelectRow: function (id) {

                var myGrid = $('#jqgrid'),
                    selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
                    celValue = myGrid.jqGrid('getCell', selRowId, 'OrderId');

                PopulateOneDriverOneOrder(celValue);
            }
        });

        setSearchSelect('OrderId', CCOrder);
        setSearchSelect('DriverName', CCOrder);
        setSearchSelect('CustomerName', CCOrder);

        setSearchSelect('OrderStatus', CCOrder);

        $("#jqgrid").jqGrid('filterToolbar', {  autosearch:true, searchOnEnter: false, defaultSearch: "cn" });
        //$("#jqGrid").setGridParam({datatype: 'json', url:'/get_data.php'});
        $("#jqgrid")[0].triggerToolbar();

        $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
        $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
        $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
        $(".ui-jqgrid-pager").removeClass("ui-state-default");
        $(".ui-jqgrid").removeClass("ui-widget-content");

        // add classes
        $(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
        $(".ui-jqgrid-btable").addClass("table table-bordered table-striped");

        $(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
        $(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
        $(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
        $(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
        $(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
        $(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
        $(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
        $(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

        $(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

        $(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

        $(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

        $(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
        $(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");

        if (gridPageNumber != 1) {
            grid = $('#jqgrid')
            grid.setGridParam({
                page: gridPageNumber,
                sortname: sortColumnName,
                sortorder: sortOrder,
            });
            grid.trigger("reloadGrid");
        }
        else
        {
            grid = $('#jqgrid')
            grid.setGridParam({
                sortname: sortColumnName,
                sortorder: sortOrder,
            });
            grid.trigger("reloadGrid");
        }
    }
}

0 个答案:

没有答案