儘管代碼類似，但jqGrid顯示不同的大小

我正在爲一個網站上的兩個不同但相似的搜索在jqGrid上工作。這個想法是在一個彈出窗口中有兩個不同的div。一個具有搜索字段，另一個顯示結果。功能很好，但美學讓我有些煩惱。一方面，網格在一個網格中的大小不同。我使用非常相似的代碼然而兩個彈出窗口...儘管代碼類似，但jqGrid顯示不同的大小

<div> 
    <div id="searchPatient" class="float-left"> 

     <ul> 
      <li><a href="#searchByMRN">Search By MRN</a></li> 
      <li><a href="#searchByDemographics">Search By Demo</a></li> 
      @*<li><a href="#retTable">Return Table</a></li>*@ 
     </ul> 
     @Html.Partial("_SearchByMRN") 
     @Html.Partial("_SearchByDemographic") 
     @*@Html.Partial("_RetTable")*@ 
    </div> 
    <div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;"> 
     Search For Patient Return Results 
     <table id="list" class="scroll"></table> 
    </div>  
    <div id="resultDiv" style="float: right; clear:both"> 
    </div> 
</div> 

$(document).ready(function() { 
    $("#list").jqGrid({ 
     shrinkToFit: false, 
     autowidth: true, 
     datatype: 'jsonstring', 
     mtype: 'POST', 
     colNames: [ 
        'Last Name', 
        'First Name', 
        'DOB', 
        'Gender', 
        'EMPIID', 
        'MedipacId', 
        'EPCID' 
        ], 
     colModel: [ 
        { name: 'Last_Name', width: 115, align: 'left' }, 
        { name: 'First_Name', width: 115, align: 'left' }, 
        { name: 'DOB', width: 115, align: 'left' }, 
        { name: 'GENDER', width: 115, align: 'left' }, 
        { name: 'EMPIID', width: 115, align: 'left' }, 
        { name: 'medipacId', width: 145, align: 'left' }, 
        { name: 'EPCID', width: 145, align: 'left' } 
       ], 
       ...//unnecessary settings and what-not 
)}; 
)};

該代碼窗口設置...

enter image description here

<div> 
    <div id="searchEncounter" class="float-left"> 
    @using (Html.BeginForm("searchEncounterByCriteria", "SearchEncounter", new { popId = popId }, FormMethod.Post, new { id = "SearchPatID" })) {  
      <ul> 
       <li>First Name</li>@Html.TextBox("fNameTB", null, new { id = "fNameTB" }) 
       <li>Last Name</li>@Html.TextBox("lNameTB", null, new { id = "lNameTB" }) 
       <li>MRN</li>@Html.TextBox("MRN", null, new { id = "MRN" }) 
       <li>Hospital Fin</li>@Html.TextBox("HospFin", null, new { id = "HospFin" }) 
      </ul> 
     <br /> 
     <p><input id="sPat" type="submit" value="search For This Patient" class="button" style="float: left; width:auto"/></p>  
    } 
    </div> 
    <div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;"> 
     Search For Encounter Return Results 
     <table id="list" class="scroll"></table> 
    </div> 
    <div id="resultDivSE" style="float: right; clear:both"> 
    </div> 
</div> 

    $(document).ready(function() { 
     $("#list").jqGrid({ 
         shrinkToFit: false, 
         autowidth: true, 
         datatype: 'jsonstring', 
         mtype: 'POST', 
         colNames: [ 
            'MRN', 
            'Hospital Fin', 
            'First Name', 
            'Last Name', 
            'Date of birth', 
            'Completed Pathway', 
            'Completed Pathway Reason', 
            'PCP Appointment', 
            'Specialist Appointment', 
            'Admit Date' 
            ], 
         colModel: [ 
            { name: 'MRN', width: 125, align: 'left' }, 
            { name: 'Hospital_Fin', width: 145, align: 'left' }, 
            { name: 'First_Name', width: 115, align: 'left' }, 
            { name: 'Last_Name', width: 115, align: 'left' }, 
            { name: 'Date_of_birth', width: 145, align: 'left' }, 
            { name: 'Completed_Pathway', width: 125, align: 'left' }, 
            { name: 'Completed_Pathway_Reason', width: 165, align: 'left' }, 
            { name: 'PCP_Appointment', width: 115, align: 'left' }, 
            { name: 'Specialist_Appointment', width: 125, align: 'left' }, 
            { name: 'Admit_Date', width: 185, align: 'left' }], 
            ...//superfluous settings that have nothing to do with Grid... 
)}; 
)};

該代碼窗口設置..

現在，當使用chrome進行調試時，我發現正在設置寬度。他們是怎麼做的，我不知道。我不知道element.style {}被設置爲

element.style { 
width: 870px; 
}

在第二種情況下... 並在它被設置得第一種情況下...

element.style { 
width: 340px; 
}

的實際的代碼表示

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 870px;">

在第二種情況下

和

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 340px;">

在第一種情況下。
我不知道爲什麼發生這種情況，以及如何改變它？什麼是確定如何設置寬度？關於如何更一致地設置寬度的任何想法或建議？我希望第一個網格和第二個網格一樣寬。

謝謝 enter image description here

來源

2012-12-19 SoftwareSavant

嘗試完全去除searchPatient和searchEncounter的div，看看是否有新的變化。如果是的話，他們內部的一些差異正在影響包含最終網格的兄弟網格。

來源

2012-12-19 14:51:08

如果兩個網格的div都設置爲autowidth: true，則網格應該展開爲父元素的寬度。在這種情況下，如果兩個網格的父元素都相同，則網格應該具有相同的寬度。

另一個混亂的選擇是你可以指定你的列寬在第一個網格中加起來等於第二個網格的寬度。

僅供參考，你可以檢查在 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

來源

2012-12-19 14:51:57 Mark

的autowidth財產ShrinkToFit只是使列符合給定尺寸的表格寬度內。也許有關於我的第一個div寬度的東西。 – SoftwareSavant

對於由第二個（較大）網格的包含元素具有相同寬度的父元素所包含的第一個（較小）網格，是否有autowidth：true？ – Mark

我剛剛測試過，如果你有autowidth：true set，並且當網格被創建時網格被一個具有設置寬度的元素所包含，它將會擴展到這個尺寸。編輯我的答案來反映這一點。所以在你的情況下，設置網格autowidth屬性，並讓它包含在與第二個網格大小相同的元素中。 – Mark

儘管代碼類似，但jqGrid顯示不同的大小

回答

相關問題