jqGrid gefrorene Header

Wir verwenden die neueste Version von free-jqgrid.jqGrid gefrorene Header

Wir wollen für alle unsere Grids fest (eingefroren) Header: verticall Scrollbar inside Grid, die nur den Inhalt scrollt.

Wie ich weiß, kann dies mit festen Rasterhöhe erreicht werden, aber es wäre toll, die Höhe an die Bildschirmhöhe des Benutzers anzupassen. (Können wir die Größe beim Laden der Seite irgendwie ändern?)

Was ist der beste Weg, dies zu implementieren?

Beispiel: https://jsfiddle.net/qrxkuvfz/1/

Einstellung width: 400 tut schlechte Arbeit. Ich möchte nur die Schriftrolle innerhalb des Rasters sein. Und Höhe - max verfügbar.

Quelle

2017-04-11 freeek

@Oleg, herzlich willkommen! – freeek

1) Wenn du mir eine Nachricht schreiben willst, dann solltest du einen Kommentar mit "@Oleg" zu meiner ** alten Antwort ** schreiben. Nur für den Fall, dass der Stackoverflow den Namen "Oleg" auf meine Benutzer-ID [315935] (http://stackoverflow.com/users/315935/oleg) abbilden kann. Sie sollten wissen, dass es fast 2000 andere Benutzer mit dem Namen Oleg gibt (siehe [hier] (http://stackoverflow.com/search?q=Oleg)). 2) Ich muss zuerst meinen Hauptjob machen. Sie sollten keine sofortige Antwort von mir erwarten. 3) Bitte posten Sie detailliertere Beschreibung, was Sie tun und was Sie brauchen. Bilder und JavaScript-Code könnten sehr hilfreich sein. – Oleg

Ich bin mir nicht sicher, ob Sie derzeit kostenlos jqGrid verwenden. Das Problem, das Sie beschreiben, sollte bei richtiger Verwendung von jqGrid überhaupt nicht existieren. Es ist wirklich erforderlich, dass Sie JavaScript-Code veröffentlichen, den Sie verwenden. Verwenden Sie einfaches Grid oder TreeGrid, Grid mit Subgrids, Datengruppierung, ...? Wo fülle ich das Grid mit lokalen Daten ('Datentyp:" local ") oder benutze Server-seitiges Paging? Benutzt du überhaupt Pager/Toppager? Welchen Wert haben die Parameter 'rowNum' und' height'? – Oleg

Wenn ich Ihre Anforderungen richtig verstanden habe, dann brauchen Sie nur hinzufügen, `` Option jqGrid. Zum Beispiel verwendet die modifizierte Demo https://jsfiddle.net/OlegKi/qrxkuvfz/2/

rowNum: 15, 
maxHeight: 330,

Die maxHeight groß genug ist, alle 15 Zeilen in rowNum, aber wenn der Benutzer Erhöhung angegeben angezeigt werden soll.

Alternativ können Sie onPaging Rückruf (siehe the wiki article) verwenden, wo Sie setGridHeight Methode verwenden height Option von jqGrid bis zu einem gewissen numerischen Wert einzustellen oder zu "auto" hängen von den newRowNum und currentRowNum Eigenschaften des options Parameter.

Quelle

2017-04-11 10:53:28 Oleg

Ja, ist die einzige Frage, ist es möglich, 'maxHeight' oder' height' zu browsers Fenstergröße zu setzen? Wenn also beim ersten Laden die ganze Seite mit dem Gitter übereinstimmt, wie wenn wir 'auto' verwenden. Wenn nicht, werden wir nur eine gewöhnliche Höhe von c wählen. – freeek

@freeek: Sie können die Witwenhöhe * vor * erstellen, indem Sie jqGrid erstellen und die entsprechende 'rowNum',' maxHeight' oder 'height' verwenden. Die 'window.innerHeight' ist der Basiswert, den Sie verwenden können. Die Seite hat wahrscheinlich andere Elemente wie Navigationsleisten auf den Seiten, die den besten Wert für "rowNum", "maxHeight" oder "height" reduzieren. Sie sollten den Wert von 'window.innerHeight' etwas verringern und die entsprechenden Werte von' rowNum', 'maxHeight' oder' height' setzen. – Oleg

ok, nur gedacht vielleicht gibt es schon einige eingebaute Methoden. Jetzt ist es klar. – freeek

Grundsätzlich können Sie Ihre CSS zu beheben Ihre Header (gefroren), verwenden und ein wenig Javascript/jquery verwenden Höhe so zum tbody zuweisen, dass die Tabelle auf dem Bildschirm auf passt.

Fügen Sie auch eine overflow Eigenschaft hinzu, um die Bildlaufleiste in Ihrem CSS nach der spezifischen Höhe zu aktivieren.

Siehe Code:

$("tbody").height($(window).innerHeight() + "px");

table { 
 
    position: relative; 
 
    width: 700px; 
 
    background-color: #aaa; 
 
    overflow: hidden; 
 
    border-collapse: collapse; 
 
} 
 

 

 
/*thead*/ 
 

 
thead { 
 
    position: relative; 
 
    display: block; 
 
    /*seperates the header from the body allowing it to be positioned*/ 
 
    width: 700px; 
 
    overflow: visible; 
 
} 
 

 
thead th { 
 
    background-color: #99a; 
 
    min-width: 120px; 
 
    height: 36px; 
 
    min-height: 36px; 
 
    border: 1px solid #222; 
 
} 
 

 
thead th:nth-child(1) { 
 
    /*first cell in the header*/ 
 
    position: relative; 
 
    display: block; 
 
    background-color: #88b; 
 
} 
 

 

 
/*tbody*/ 
 

 
tbody { 
 
    display: block; 
 
    width: 700px; 
 
    overflow-y: auto; 
 
} 
 

 
tbody td { 
 
    background-color: #bbc; 
 
    min-width: 120px; 
 
    border: 1px solid #222; 
 
    height: 36px; 
 
    min-height: 36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Town</th> 
 
     <th>County</th> 
 
     <th>Age</th> 
 
     <th>Profession</th> 
 
     <th>Anual Income</th> 
 
     <th>Matital Status</th> 
 
     <th>Children</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John Smith</td> 
 
     <td>Macelsfield</td> 
 
     <td>Cheshire</td> 
 
     <td>52</td> 
 
     <td>Brewer</td> 
 
     <td>£47,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jenny Jones</td> 
 
     <td>Threlkeld</td> 
 
     <td>Cumbria</td> 
 
     <td>34</td> 
 
     <td>Shepherdess</td> 
 
     <td>£28,000</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Peter Frampton</td> 
 
     <td>Avebury</td> 
 
     <td>Wiltshire</td> 
 
     <td>57</td> 
 
     <td>Musician</td> 
 
     <td>£124,000</td> 
 
     <td>Married</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Simon King</td> 
 
     <td>Malvern</td> 
 
     <td>Worchestershire</td> 
 
     <td>48</td> 
 
     <td>Naturalist</td> 
 
     <td>£65,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lucy Diamond</td> 
 
     <td>St Albans</td> 
 
     <td>Hertfordshire</td> 
 
     <td>67</td> 
 
     <td>Pharmasist</td> 
 
     <td>Retired</td> 
 
     <td>Married</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Austin Stevenson</td> 
 
     <td>Edinburgh</td> 
 
     <td>Lothian</td> 
 
     <td>36</td> 
 
     <td>Vigilante</td> 
 
     <td>£86,000</td> 
 
     <td>Single</td> 
 
     <td>Unknown</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Wilma Rubble</td> 
 
     <td>Bedford</td> 
 
     <td>Bedfordshire</td> 
 
     <td>43</td> 
 
     <td>Housewife</td> 
 
     <td>N/A</td> 
 
     <td>Married</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Kat Dibble</td> 
 
     <td>Manhattan</td> 
 
     <td>New York</td> 
 
     <td>55</td> 
 
     <td>Policewoman</td> 
 
     <td>$36,000</td> 
 
     <td>Single</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Henry Bolingbroke</td> 
 
     <td>Bolingbroke</td> 
 
     <td>Lincolnshire</td> 
 
     <td>45</td> 
 
     <td>Landowner</td> 
 
     <td>Lots</td> 
 
     <td>Married</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alan Brisingamen</td> 
 
     <td>Alderley</td> 
 
     <td>Cheshire</td> 
 
     <td>352</td> 
 
     <td>Arcanist</td> 
 
     <td>A pile of gems</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

Quelle

2017-04-11 09:22:55 nashcheez

Ja, das ist in Ordnung, aber ein bisschen spezifischer für jqGrid-Grids, da es bereits eigene Stile hat, vielleicht werde ich ein bisschen später ein Beispiel machen. – freeek

Ja, machen Sie eine Demo und ich werde versuchen, dies auf der Demo selbst zu implementieren. – nashcheez

Ich habe eine kurze Demo gemacht – freeek

jqGrid gefrorene Header

Antwort

Verwandte Themen