jqGrid tableToGrid在排序时丢失滚动条

时间:2011-09-24 17:50:29

标签: asp.net jqgrid

我正在使用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>

1 个答案:

答案 0 :(得分:0)

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

请参阅修改过的演示here