Question

我正在为一个网站上的两个不同但相似的搜索工作jqGrid。想法是在弹出窗口中有两个不同的div。一个具有搜索字段，另一个显示结果。功能很好，但美学让我有点烦恼。一方面，网格以一个不同的大小出现。我为两个弹出窗口使用非常相似的代码但是......

<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

Answer 1

如果两个网格的div都设置为autowidth: true，则网格应扩展为父元素的宽度。在这种情况下，如果两个网格的父元素相同，则网格应该具有相同的宽度。

另一个杂乱的选择是你可以在第一个网格中指定你的列宽，加起来是第二个网格的等效宽度。

作为参考，您可以检查autowidth属性 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Answer 2

尝试完全删除searchPatient和searchEncounter div，看看是否有变化。如果是，它们内部的一些差异正在影响包含结果网格的兄弟div。

尽管代码类似，jqGrid显示不同的大小

2 个答案: