Question

我遇到了JQGrids水平滚动条的问题在ASP.NET MVC应用程序中。问题是，我给网格一个固定的宽度，并期望当我调整列的大小时，水平滚动条应该动态显示;但它并没有将网格溢出页面。我试图在包含网格的表格周围添加一个带有overflow = scroll的div元素，即使这样也无法解决问题。

我做错了吗？我试图挖掘现有的线程，但找不到类似的线程。

我附上了HTML和脚本代码作为参考。任何帮助表示赞赏。

<div id="div1" class="clsInner">
    <table>
        <tr>
            <td colspan="2" class="clsHeading">
                Existing Proposals
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table id="list" cellpadding="0" cellspacing="0" class="scroll">
                </table>
                <%-- <div id="pager" class="scroll" style="text-align: center;">
                </div>--%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
            </td>
        </tr>
    </table>
</div>

和

 jQuery("#list").jqGrid({
     url: '<%= Url.Content("~/OrganizationAccount/AccountHomeGridData") %>/',
     datatype: 'json',
     mtype: 'GET',
     colNames: [
         'Id', 'Proposal Name', 'Proposal #', "", "", 'Organization', 'Category',
         'Sub Category', 'Status', 'Updated On', 'Updated By', 'Review', 'Edit'],
     colModel: [
         { name: 'ProposalId', index: 'ProposalId', width: 1, align: 'left' },
         { name: 'ProposalName', index: 'ProposalName', width: 180,  align: 'left' },
         { name: 'ProposalNumber', index: 'ProposalNumber', width: 72,
           align: 'left', resizable: false },
         { name: 'ProposalNumber1', index: 'ProposalNumber1', width: 1,
           align: 'left' },
         { name: 'ProposalNumber2', index: 'ProposalNumber2', width: 90,
           align: 'left' },
         { name: 'Organization', index: 'Organization', width: 150, align: 'left' },
         { name: 'Category', index: 'Category', width: 85,
           align: 'left', resizable: false },
         { name: 'SubCategory', index: 'SubCategory', width: 90, align: 'left' },
         { name: 'Status', index: 'Status', width: 100, align: 'left' },
         { name: 'LastUpdated', index: 'LastUpdated', width: 90,
           align: 'left', resizable: false },
         { name: 'UpdatedBy', index: 'UpdatedBy', width: 100, align: 'left' },
         { name: 'Review', index: 'Review', width: 50,
           align: 'center', sortable: false, resizable: false },
         { name: 'Edit', index: 'Edit', width: 40,
           align: 'center', sortable: false, resizable: false}],
     //pager: jQuery("#pager"),
     rowNum: 10,
     rowList: [10, 20, 30],
     sortname: 'ProposalName',
     sortorder: "asc",
     viewrecords: true,
     pginput: false,
     pgbuttons: false,
     rowList: false,
     imgpath: '<%= Url.Content("~/scripts/themes/sand/images")%>/',
     caption: 'Proposal Details',
     width: '980'
     //autowidth: true,
     //forceFit: false
 });

 jQuery("#list").hideCol("ProposalId");
 jQuery("#list").hideCol("ProposalNumber1");
 jQuery("#list").hideCol("ProposalNumber2");

在ASP.NET MVC应用程序中控制JQGrid水平滚动条

0 个答案: