Im folgenden Beispiel sind die 3 jqGrids nicht richtig ausgerichtet. Ich habe den HTML-Teil wie folgt erstellt:jqGrid wird im Bildschirmlayout nicht richtig ausgerichtet. Was fehlt?
<div>
<h1>Grid 1</h1>
<table id="Grid1"/>
</div>
<div>
<h1>Grid 2</h1>
<table id="Grid2"/>
</div>
<div>
<h1>Grid 3</h1>
<table id="Grid3"/>
</div>
Der vollständige Code mit JavaScript Sie können unten im Snippet ausprobieren. Hier ist , wie die Seite sucht:
Ich erwarte, dass es wie
Titel 1
Grid1
Titel 2
Grid2
Titel 3 zeigen würde
Grid3
aber nicht wie oben im Screenshot verwechselt. Ich versuchte auch das gleiche mit <span>
, Einfügen <br/>
zwischen den Gittern, Hinzufügen style
Attribut mit Höhe Eigenschaft, alle nicht erfolgreich.
Wie kann das behoben werden? Bitte helfen Sie.
-Code-Schnipsel, um es auszuprobieren:
// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
var gridSampleData = [
{ id: 10, firstName: "Jane", lastName: "Doe1"},
{ id: 20, firstName: "Justin", lastName: "Time" }
];
$("#Grid1").jqGrid({
autowidth: true, height: 45,
colModel: [{name: "firstName"}, {name: "lastName"}],
data: gridSampleData
});
$("#Grid2").jqGrid({
autowidth: true, height: 45,
colModel: [{name: "firstName"}, {name: "lastName"}],
data: gridSampleData
});
$("#Grid3").jqGrid({
autowidth: true, height: 45,
colModel: [{name: "firstName"}, {name: "lastName"}],
data: gridSampleData
});
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>
<div>
<h1>Grid 1</h1>
<table id="Grid1"/>
</div>
<div>
<h1>Grid 2</h1>
<table id="Grid2"/>
</div>
<div>
<h1>Grid 3</h1>
<table id="Grid3"/>
</div>
Danke, dass in der Tat geholfen! Ich dachte, dass das '/>' -Tag die Tabelle in '
Vielen Dank. Froh, dass ich Helfen kann. –