Question

我确实收到了Json数据。我有123条记录。但它只显示第一页10条记录。分页不起作用。

代码：

            @section stylesheets {
        <link rel="stylesheet" href="~/assets/css/jquery-ui.css" />  @*jQuery UI - v1.11.2 - 2014-10-28*@
        <link rel="stylesheet" href="~/assets/css/ui.jqgrid.css" />
        <link rel="stylesheet" href="~/assets/css/select2.css" />
    }

    <table id="jqgrid"></table>
    <div id="jqgridPager"></div>
    @section scripts
    {
        <script>
            API_URL = "/VendorManagement/";
            var gridSelector = "#jqgrid";
            var pagerSelector = "#jqgridPager";
        </script>

        <script src="~/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
        <script src="~/assets/js/jqGrid/jquery.jqGrid.src.js"></script>  @*@license jqGrid  4.6.0 - jQuery Grid*@

        <script>
            $(document).ready(function () {
                function styleSearchForm(form) {
                    var dialog = form.closest('.ui-jqdialog');
                    var buttons = dialog.find('.EditTable');
                    buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                    buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                    buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
                }
                function styleSearchFilters(form) {
                    form.find('.delete-rule').val('X');
                    form.find('.add-rule').addClass('btn btn-xs btn-primary');
                    form.find('.add-group').addClass('btn btn-xs btn-success');
                    form.find('.delete-group').addClass('btn btn-xs btn-danger');
                }
                function styleEditForm(form) {
                    //enable datepicker on "sdate" field and switches for "stock" field
                    //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                    //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                    //update buttons classes
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide(); //ui-icon, s-icon
                    buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                    buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>');

                    buttons = form.next().find('.navButton a');
                    buttons.find('.ui-icon').hide();
                    buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                    buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
                }

                function styleDeleteForm(form) {
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide(); //ui-icon, s-icon
                    buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                    buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>');
                }

                jQuery(gridSelector).jqGrid({
                    url: API_URL + 'GetVendors',
                    datatype: 'json',
                    mtype: 'GET',
                    height: 'auto',
                    colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
                    colModel: [
                        { name: 'pkey', index: 'pkey', width: 50, hidden: true },
                        { name: 'Company', width: 120 },
                        { name: 'ContactName', width: 110 },
                        { name: 'ContactPhone', width: 120 },
                        { name: 'UserName', align: "right", width: 90 },
                        { name: 'UserKey', align: "right", width: 120, hidden: true },
                        { name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
                        { name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
                        { name: 'ClientID', align: "right", width: 100, formatter: "integer" },
                        { name: 'PhotoURL', align: "right", width: 80 },
                        { name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
                    ],
                    cmTemplate: { autoResizable: true, editable: true },
                    rowNum: 10,
                    rowList: [10, 20, 30],
                    pager: pagerSelector,
                    sortname: 'company',
                    sortorder: "asc",
                    viewrecords: true,
                    jsonreader: {
                        root: "rows",
                        page: "page",
                        total: "total",
                        records:"records"
                    },
                    caption: "Vendor Managerment"
                });

                $(gridSelector).jqGrid('navGrid', pagerSelector,
                        {
                            //navbar options
                            edit: true,
                            editicon: 'ace-icon fa fa-pencil blue',
                            add: true,
                            addicon: 'ace-icon fa fa-plus-circle purple',
                            del: true,
                            delicon: 'ace-icon fa fa-trash-o red',
                            search: true,
                            searchicon: 'ace-icon fa fa-search orange',
                            refresh: true,
                            refreshicon: 'ace-icon fa fa-refresh green',
                            view: true,
                            viewicon: 'ace-icon fa fa-search-plus grey'
                        },
                        {
                            //edit record form
                            //closeAfterEdit: true,
                            //width: 700,
                            recreateForm: true,
                            mtype: 'PUT',
                            onclickSubmit: function (params, postdata) {
                                params.url = API_URL + 'UpdateVendor';
                            },
                            beforeShowForm: function (e) {
                                var form = $(e[0]);
                                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                                styleEditForm(form);
                            }
                        },
                        {
                            //new record form
                            //width: 700,
                            closeAfterAdd: true,
                            recreateForm: true,
                            viewPagerButtons: false,
                            mtype: 'POST',
                            onclickSubmit: function (params, postdata) {
                                params.url = API_URL + 'PostVendor';
                            },
                            afterSubmit: function (response, postdata) {
                                if (response.responseText != "")
                                {
                                var userKey = JSON.parse(response.responseText).UserKey;
                                alert("The password you created for the new vendor is\n\n" + userKey);
                                        return [true, "OK"];
                                } else {
                                    return [false, "error"];
                                }
                            },
                            beforeShowForm: function (e) {
                                var form = $(e[0]);
                                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                    .wrapInner('<div class="widget-header" />');
                                styleEditForm(form);
                            }
                        },
                        {
                            //delete record form
                            recreateForm: true,
                            mtype: 'DELETE',
                            onclickSubmit: function (params, postdata) {
                                params.url = API_URL + 'DeleteVendor';
                            },
                            beforeShowForm: function (e) {
                                var form = $(e[0]);
                                if (form.data('styled')) return false;

                                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                                styleDeleteForm(form);

                                form.data('styled', true);
                            }
                        },
                        {
                            //search form
                            recreateForm: true,
                            afterShowSearch: function (e) {
                                var form = $(e[0]);
                                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                                styleSearchForm(form);
                            },
                            afterRedraw: function () {
                                styleSearchFilters($(this));
                            },
                            multipleSearch: true
                            /**
                                                 multipleGroup:true,
                                                 showQuery: true
                                                 */
                        },
                        {
                            //view record form
                            recreateForm: true,
                            beforeShowForm: function (e) {
                                var form = $(e[0]);
                                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                            }
                        }
                    );

                jQuery(gridSelector).jqGrid('inlineNav', pagerSelector, { edit: true, add: true, del: true });
            });

            function aceSwitch(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=checkbox]')
                        .addClass('ace ace-switch ace-switch-5')
                        .after('<span class="lbl"></span>');
                }, 0);
            }
        </script>
    }

Answer 1

我可以改写一下我的问题。它正在工作，但它的图标是看不见的。添加代码

 loadComplete: function () {
                var table = this;
                setTimeout(function () {
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },

此外：

function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
            });
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({ container: 'body' });
            $(table).find('.ui-pg-div').tooltip({ container: 'body' });
        }

分页在JqGrid中不起作用

1 个答案: