아래 예제에서는 3 개의 jqGrid가 올바르게 정렬되지 않습니다. 다음과 같이 HTML 부분을 만들었습니다.jqGrid가 화면 레이아웃에서 올바르게 정렬되지 않습니다. 없어진 물건 있어요?
<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>
전체 코드는 자바 스크립트로 보며 아래의 코드에서 테스트해볼 수 있습니다. 다음은 페이지를 찾는 방법은 다음과 같습니다
내가 그것을
제목 1
GRID1
제목이
GRID2
제목 3
처럼 보여줄 것이라고 기대하고 있습니다 Grid3
위의 스크린 샷과 같이 혼합되지는 않습니다. 또한 <span>
으로 시도해 보았습니다. 격자 사이에 <br/>
을 삽입하고 높이 속성이있는 style
속성을 모두 추가하면 성공하지 못합니다.
어떻게이 문제를 해결할 수 있습니까? 도와주세요. 그것을 밖으로 시도하는
코드는 :
// 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>
실제로 도움이, 감사합니다! 나는'/ table' 태그가'
고맙습니다. 기꺼이 도와주세요. –