0

私は、サイトでの2つの異なるが類似した検索のためにjqGridに取り組んでいます。アイデアは、ポップアップ ウィンドウに 2 つの異なる div を配置することです。1 つは検索フィールドを持ち、もう 1 つは結果を表示します。機能性は良いのですが、見た目がちょっと気になります。一つには、グリッドが 1 つの異なるサイズとして表示されます。ただし、両方のポップアップウィンドウに非常によく似たコードを使用しています...

<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
)};
)};

そのコードはこのウィンドウを設定します...

ここに画像の説明を入力

<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...
)};
)};

そのコードはこのウィンドウを設定します...

クロムを使用してデバッグすると、幅が設定されていることがわかります。彼らがどのようにやっているかはわかりません。element.style {} が設定されていることは知っています

element.style {
width: 870px;
}

2番目のケースでは...そして最初のケースではそれも設定されています...

element.style {
width: 340px;
}

実際のコードは言う

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

2番目のケースでは、

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

最初のケースでは。
なぜこれが発生しているのか、どうすれば変更できるのかわかりません。幅の設定方法を決定しているのは何ですか? 幅をより一貫して設定する方法についてのアイデアやアドバイスはありますか? 最初のグリッドを 2 番目のグリッドと同じ幅にしたい。

ありがとう ここに画像の説明を入力

4

2 に答える 2

1

両方のグリッドの div が に設定されているautowidth: true場合、グリッドは親要素の幅に拡張する必要があります。この場合、両方のグリッドの親要素が同じ場合、グリッドは同じ幅にする必要があります。

別の厄介なオプションは、最初のグリッドで列の幅を指定して、2 番目のグリッドの幅と同じになるようにすることです。

参考までに、 http: //www.trirand.com/jqgridwiki/doku.php?id=wiki: options で autowidth プロパティを調べることができ ます。

于 2012-12-19T14:51:57.187 に答える
0

searchPatientおよびdiv を完全に削除してみてsearchEncounter、何かが変わるかどうかを確認してください。はいの場合、それらの内部のいくつかの違いが、結果のグリッドを含む兄弟 div に影響を与えています。

于 2012-12-19T14:51:08.523 に答える