【发布时间】：2011-12-28 04:58:56
【问题描述】：
我之前使用的是以下版本：
- jQuery - 1.4.3
- jqGrid - 4.1.2
现在我使用以下版本：
- jQuery - 1.6.4
- jqGrid - 4.3.1
使用最新版本时，我注意到以下几点：
默认不显示jqgrid的列排序图标。它们仅在单击列标题时显示。
jqgrid 分页单元
pager_right为空。它应该显示重新加载和搜索的图标-
jqgrid 调整大小句柄不显示。我正在使用
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
我比较了以下多次，但一切似乎都一样
CSS
jqgrid 定义
有没有其他人经历过这种情况？还是我错过了什么？
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<div class="userinfo">
<table id="myjqgrid"></table>
<div id="Pager"></div>
<script src="js/myjqgrid.js" type="text/javascript"></script>
</div>
</div>
</body>
</html>
JSON
{
"colModel": [
{
"name": "ID",
"label": "ID",
"width": 60,
"align": "left",
"jsonmap": "cells.0.value",
"sortable": true
},
{
"name": "FirstName",
"label": "FirstName",
"width": 100,
"align": "left",
"jsonmap": "cells.1.value",
"sortable": false
},
{
"name": "LastName",
"label": "LastName",
"width": 100,
"align": "left",
"jsonmap": "cells.2.value",
"sortable": false
}
],
"colNames": [
"ID",
"FirstName",
"LastName"
],
"mypage": {
"outerwrapper": {
"page":"1",
"total":"1",
"records":"1",
"innerwrapper": {
"rows":[
{
"id":"1",
"cells":
[
{
"value":"12345",
"label": "ID"
},
{
"value":"David",
"label": "FirstName"
},
{
"value":"Smith",
"label": "LastName"
}
]
},
{
"id":"2",
"cells":
[
{
"value":"37546",
"label": "ID"
},
{
"value":"Willy",
"label": "FirstName"
},
{
"value":"Peacock",
"label": "LastName"
}
]
},
{
"id":"3",
"cells":
[
{
"value":"62345",
"label": "ID"
},
{
"value":"Kim",
"label": "FirstName"
},
{
"value":"Holmes",
"label": "LastName"
}
]
},
{
"id":"4",
"cells":
[
{
"value":"186034",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
}
]
}
}
}
}
JQGrid 定义 (myjquery.js)
$(document).ready(function () {
$.ajax({
type: "GET",
url: "myjqgrid.json",
data: "",
dataType: "json",
success: function(response){
var columnData = response.mypage.outerwrapper,
columnNames = response.colNames,
columnModel = response.colModel;
$("#myjqgrid").jqGrid({
datatype: 'jsonstring',
datastr: columnData,
colNames: columnNames,
colModel: columnModel,
jsonReader: {
root: "innerwrapper.rows",
repeatitems: false
},
gridview: true,
pager: "#Pager",
rowNum: 2,
rowList: [2, 4, 6, 8],
viewrecords: true,
recordpos: 'left',
multiboxonly: true,
multiselect: true,
sortname: 'id',
sortorder: "desc",
sorttype: "text",
sortable: true,
caption: "<h2>My JQGrid</h2>",
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
cache: true,
loadComplete: function(data){
}
});
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager');
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});
【问题讨论】：
-
您是否尝试过使用 jqGrid 4.3.1，但使用了一些旧版本的 jQuery (
-
@Oleg：是的，我用 jQuery 1.4.3 尝试了 jqGrid 4.3.1，但它仍然不起作用。我已经发布了我的 html、json 和 jqgrid 定义代码。
-
@Oleg：你能指出我哪里出错了吗？