jqGrid tableToGrid在排序时丢失滚动条

Question

我正在使用 jqGrid 的 tableToGrid 方法将 ASP.Net GridView 转换为 jqGrid。网格被转换，一切看起来都很好。但是，一旦我单击要排序的列，数据就会被排序，然后我就失去了垂直滚动条，或者说真的，只是滚动的能力。当我没有任何分页时，它似乎想要实现分页。例如，返回并绑定到网格的数据包含我刚刚列出的大约 75 行；没有分页。单击一列进行排序后，它显示大约 20 行，没有垂直滚动条，我看不到其他行（超过 20 行）。我必须设置分页吗？

感谢您的帮助。

tableToGrid("#ContentPlaceHolder1_grid",
        { height: 600,
          forceFit: true,
          viewrecords: true, 
          hidegrid: true,
          gridview: true,
          autowidth: true,
          colNames: ['Id', 'Number', 'Facility', 'Department', 'Category', 'Job Title', 'Date Last Modified'],
          colModel: [
              { name: 'Id', index: 'Id', width: 30, hidden: true },
              { name: 'Number', index: 'Number', width: 75, title: false },
              { name: 'Facility', index: 'Facility', width: 120 },
              { name: 'Department', index: 'Department', width: 120 },
              { name: 'Category', index: 'Category', width: 120 },
              { name: 'Job_Title', index: 'Job_Title', width: 170, sortable: false },
              { name: 'Date_Last_Modified', index: 'Date_Last_Modified', width: 100, sortable: true, align: 'right' }
          ]
        });

我的 GridView 被包裹在一个 UpdatePanel 中。

<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="content" class="ui-widget half-height-widget">
            <div class="ui-widget-header ui-corner-top"> 
                <h2 id="PageTitle">
                    <img alt="JSA" src="Images/jsa.png"/>Open JSA Document
                    <span id="toolbar">
                        <asp:Button ID="open" Text="Open" CssClass="button" runat="server" />
                    </span>                        
                </h2>
            </div>        
            <div class="ui-widget-content ui-corner-bottom"> 
                <div id="content-div" style="overflow: auto;">
                    <div id="files" style="height: 601px;">
                        <asp:GridView runat="server" ID="grid" AutoGenerateColumns="False">
                            <Columns>
                                <asp:TemplateField HeaderText="">
                                    <ItemTemplate><img class="jqGrid-icon" onclick='alert(<%# Eval("Id") %>);' alt='' src="images/magnifier-medium.png" /></ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Number" HeaderText="Number" />
                                <asp:BoundField DataField="Facility" HeaderText="Facility" />
                                <asp:BoundField DataField="Department" HeaderText="Department" />
                                <asp:BoundField DataField="Category" HeaderText="Category" />
                                <asp:BoundField DataField="Job_Title" HeaderText="Job Title" />
                                <asp:BoundField DataField="Date_Last_Modified" 
                                    HeaderText="Date Last Modified" />
                            </Columns>
                        </asp:GridView>
                    </div>
                </div>            
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

您应该只在tableToGrid 的第二个参数的jqGrid 选项列表中包含rowNum: 1000。如果您没有可见的寻呼机，则本地数据寻呼仍然存在。因此，您应该将页面大小从默认值rowNum: 20 增加到任何足够大的值（例如 1000 或 10000）。 height: 'auto' 的 usahe 可能是您需要的另一种选择。

查看修改后的演示here。