0
我做了一個簡單的HTML表單。我想從CouchDB中獲取一些JSON數據並將其顯示在jqGrid中。但我得到的是這個sh ****在Firefox或IE輸出。 Output Firefox 這只是一行，但我不知道爲什麼列表會這麼長。我也不知道爲什麼有些部分被拉開（抱歉，我不能說好英語）。jquery JqGrid輸出佈局錯誤
這是它的外觀開始之前，我的JavaScript動作和我做了一個簡單的紅色盒子indicatting在jqGrid的應該是：HTML Page before Action 正如你看到的，我的兩個文本框獲得覆蓋的jqGrid的。
我不知道是什麼原因導致這個問題，我沒有足夠的知識。有人能幫我嗎 ？
這裏是我的代碼：
的index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Testformular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<!--<script type="text/javascript" charset="utf8" src="/DataTables/js/jquery.dataTables.js"></script>-->
<!--<script src="jqgrid/js/minified/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script src="jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="jqgrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.theme.css">
<!--
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
-->
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css">
<!--<link rel="stylesheet" type="text/css" href="/DataTables/css/jquery.dataTables.css">-->
<link rel="stylesheet" type="text/css" href="index.css">
<script src="index2.js" type="text/javascript"></script>
</head>
<body onLoad="inputonload();">
<div class="page">
<div class="eingabe">
<form name="form" method="post">
<div>
<input class="input" onmouseover="clearOnClickFromkkz()" onmouseout="test()" value="Kundenkürzel" type="text" id="kkz">
</div>
<div>
<input class="input" onmouseover="clearOnClickFrommgr()" onmouseout="manager_updat()" type="text" id="mgr" name="manager" value="Manager">
</div>
</form>
</div>
<table id="Grid1" style="height: 290px; width: 444px"><div id="gridpager"></div></table>
</div>
</div>
</body>
</html>
我的JavaScript文件
function clearOnClickFromkkz() {
if (document.getElementById('kkz').value === "Kundenkürzel") {
document.getElementById('kkz').value = "";
document.getElementById('kkz').style.color = "#000000";
}
}
function clearOnClickFrommgr() {
if (document.getElementById('mgr').value === "Manager") {
document.getElementById('mgr').value = "";
document.getElementById('mgr').style.color = "#000000";
}
}
function inputonload() {
document.getElementById('kkz').style.color = "#A1A1A1";
document.getElementById('mgr').style.color = "#A1A1A1";
}
function manager_updat() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/mgr/_view/by_mgr?key="' + document.getElementById('mgr').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('mgr').value === "") {
document.getElementById('mgr').value = "Manager";
document.getElementById('mgr').style.color = "#A1A1A1";
}
}
function sid_update() {
var link = 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"';
var request = $.ajax({
type: 'GET',
url: link,
dataType: "json",
});
request.done(function(data){
console.log(data);
$("#content").html(data);
});
if (document.getElementById('kkz').value === "") {
document.getElementById('kkz').value = "Kundenkürzel";
document.getElementById('kkz').style.color = "#A1A1A1";
}
}
function test() {
jQuery(document).ready(function() {
var pager = '#gridpager';
jQuery("#Grid1").jqGrid({
url: 'http://127.0.0.1:5984/php_couch3/_design/sid/_view/by_sid?key="' + document.getElementById('kkz').value + '"',
datatype: 'json',
mtype: 'GET',
colNames: ['key', 'value'],
colModel: [{ name: 'key', index: 'key', width: 150 },
{ name: 'value', index: 'value', width: 150}],
sortname: 'id',
pager: '#gridpager',
viewrecoreds: true,
scrollOffset: 0,
imgpath: 'Themes/images'
}).navGrid(pager, {edit: true, add: true, del: true, refresh: true, search: true, position: 'left'});
});
}
我的CSS文件：
body{
}
.input {
margin:0px;
font-size:12px;
width:90%;
height:30px;
margin-bottom: 2px;
float:left;
text-align:center;
vertical-align:middle
}
div.eingabe {
width:150px;
float:left;
border: 0px;
padding: 0px;
margin: 0 0 0 0;
}
div.content {
border:1px solid #efeff7;
background-color:#efeff7;
width:650px;
height:100%;
float:right;
}
div.page {
position:absolute;
width:805px;
height:90%;
min-height:600px;
margin-left: 25%;
margin-top:10px;
border: 0px lime solid;
}
Heyy，我明白了！我必須更改jqGrid插件的CSS文件中的一些設置。選項「overflow-x：hidden」解決了我的問題。我必須將它添加到文件「ui.jqgrid.css」中的類「.ui-jqgrid」中。 @曼哈頓感謝您的幫助，但我解決了它！ – 2014-09-15 07:29:39