【发布时间】：2011-12-29 17:23:50
【问题描述】：
HTML
<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" href="themes/redmond/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" 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>
<style>
.ui-jqgrid .ui-jqgrid-bdiv {
overflow: inherit !important;
}
.overlay{
position: absolute;
border: 1px solid black;
background-color: black;
color: #FFFFFF;
}
</style>
</head>
<body>
<table id="myjqgrid"></table>
<div id="Pager"></div>
</body>
</html>
JSON
{
"colModel": [
{
"name": "Overlay",
"label": "Overlay",
"width": 60,
"align": "left",
"jsonmap": "cells.0.value",
"sortable": true
},
{
"name": "ID",
"label": "ID",
"width": 60,
"align": "left",
"jsonmap": "cells.1.value",
"sortable": true
},
{
"name": "FirstName",
"label": "FirstName",
"width": 100,
"align": "left",
"jsonmap": "cells.2.value",
"sortable": false
},
{
"name": "LastName",
"label": "LastName",
"width": 100,
"align": "left",
"jsonmap": "cells.3.value",
"sortable": false
}
],
"colNames": [
"Overlay",
"ID",
"FirstName",
"LastName"
],
"mypage": {
"outerwrapper": {
"page":"1",
"total":"1",
"records":"20",
"innerwrapper": {
"rows":[
{
"id":"1",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"12345",
"label": "ID"
},
{
"value":"David",
"label": "FirstName"
},
{
"value":"Smith",
"label": "LastName"
}
]
},
{
"id":"2",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"37546",
"label": "ID"
},
{
"value":"Willy",
"label": "FirstName"
},
{
"value":"Peacock",
"label": "LastName"
}
]
},
{
"id":"3",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"62345",
"label": "ID"
},
{
"value":"Kim",
"label": "FirstName"
},
{
"value":"Holmes",
"label": "LastName"
}
]
},
{
"id":"4",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"186034",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"5",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"67345",
"label": "ID"
},
{
"value":"Paul",
"label": "FirstName"
},
{
"value":"Lawrence",
"label": "LastName"
}
]
},
{
"id":"6",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"12906",
"label": "ID"
},
{
"value":"Andy",
"label": "FirstName"
},
{
"value":"Charlery",
"label": "LastName"
}
]
},
{
"id":"7",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"564565",
"label": "ID"
},
{
"value":"Bets",
"label": "FirstName"
},
{
"value":"Josilyn",
"label": "LastName"
}
]
},
{
"id":"8",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"34345",
"label": "ID"
},
{
"value":"Pink",
"label": "FirstName"
},
{
"value":"Floyd",
"label": "LastName"
}
]
},
{
"id":"9",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"3429",
"label": "ID"
},
{
"value":"Rose",
"label": "FirstName"
},
{
"value":"Ben",
"label": "LastName"
}
]
},
{
"id":"10",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"6668",
"label": "ID"
},
{
"value":"Amy",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"11",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"22786",
"label": "ID"
},
{
"value":"Zarine",
"label": "FirstName"
},
{
"value":"Khan",
"label": "LastName"
}
]
},
{
"id":"12",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"56444",
"label": "ID"
},
{
"value":"Dolly",
"label": "FirstName"
},
{
"value":"Mathews",
"label": "LastName"
}
]
},
{
"id":"13",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"99453",
"label": "ID"
},
{
"value":"Ginger",
"label": "FirstName"
},
{
"value":"Wills",
"label": "LastName"
}
]
},
{
"id":"14",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1234",
"label": "ID"
},
{
"value":"Fabrice",
"label": "FirstName"
},
{
"value":"Papa",
"label": "LastName"
}
]
},
{
"id":"15",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"45000",
"label": "ID"
},
{
"value":"Helen",
"label": "FirstName"
},
{
"value":"Kites",
"label": "LastName"
}
]
},
{
"id":"16",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1255",
"label": "ID"
},
{
"value":"Barbara",
"label": "FirstName"
},
{
"value":"Dorris",
"label": "LastName"
}
]
},
{
"id":"17",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"5555",
"label": "ID"
},
{
"value":"Eugene",
"label": "FirstName"
},
{
"value":"Mark",
"label": "LastName"
}
]
},
{
"id":"18",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"1867",
"label": "ID"
},
{
"value":"Harry",
"label": "FirstName"
},
{
"value":"King",
"label": "LastName"
}
]
},
{
"id":"19",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"45888",
"label": "ID"
},
{
"value":"Lorraine",
"label": "FirstName"
},
{
"value":"Williams",
"label": "LastName"
}
]
},
{
"id":"20",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"4567777",
"label": "ID"
},
{
"value":"Mark",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
},
{
"id":"21",
"cells":
[
{
"value":"Click Me!",
"label": "Overlay"
},
{
"value":"7777",
"label": "ID"
},
{
"value":"Davis",
"label": "FirstName"
},
{
"value":"Sheppard",
"label": "LastName"
}
]
}
]
}
}
}
}
JQGrid 定义
$(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: 21,
rowList: [21],
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(){
$("td[title = 'Click Me!']").live("click", function(){
$("div.overlay").remove();
var RowID = $(this).closest("tr").attr("id");
if ($(this).siblings("div").length == 0) {
$(this).closest("td").append("<div class='overlay' id='"+RowID+"'>This is an overlay.</div>");
$(this).siblings("div#" + RowID).css("display", "block");
}
})
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
$("#myjqgrid").jqGrid('gridResize',{minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
}
});
});
我遇到的问题
当我调整网格大小时分页工作正常如果我不更改 CSS
如果我更改 CSS FROM
.ui-jqgrid .ui-jqgrid-bdiv {overflow: auto;}TO.ui-jqgrid .ui-jqgrid-bdiv {overflow: inherit !important;}，分页栏在记录之间流动我更改 CSS 的原因是因为当我点击“点击我！”时会显示一个叠加层链接在每一行的第二列。更改 CSS 会正确显示页面上最后一条记录的覆盖。如果我不更改 CSS，页面上最后一条记录的叠加层将被隐藏。
因此，
我不会更改 CSS
- 调整网格大小时分页工作正常
- 页面上最后一条记录的叠加层被隐藏
我更改了 CSS
- 调整网格大小时，记录之间会显示分页栏
- 页面上最后一条记录的叠加显示正确
我尝试使用 CSS 定位和 z-index 进行叠加，但没有奏效。
【问题讨论】：
-
抱歉，我不明白您在标题为
'Click Me!'的<td>单元格中放置的叠加层的含义。.ui-jqgrid .ui-jqgrid-bdiv {overflow: inherit !important;}的使用绝对是错误的方式。此外，您可能应该使用ui-widget-overlay类来与您使用的 jQuery UI CSS 兼容。无论如何，为了能够帮助您，我应该首先了解您要达到的目标。 -
叠加层特定于每一行，因此叠加层放置在
<td>单元格中。要触发覆盖，我有文本“点击我！”在细胞中。这也可以是图像而不是文本。我已经发布了所有代码。我不知道如何为您创建演示链接。除了隐藏在分页栏下方的页面的最后一行之外，覆盖效果很好。 -
如果用户单击“覆盖”列中的单元格，是否要显示一个包含一些信息的 div？如果用户选择网格的任何其他行，div 应该保持可见？您的问题是否只是在靠近单击点的位置显示 div，但在包括寻呼机在内的整个网格上显示？如果 div 的大小会很大，也应该超过页面上的其他元素？
-
如果用户单击“覆盖”列中的单元格，您是否希望显示一个包含一些信息的 div？ - 是的，如果用户点击文本“点击我！”。 如果用户选择网格的任何其他行，div 应该保持可见？ - 不。如果用户选择网格的任何其他行，则该特定行的覆盖应该打开。 您的问题是否只是将 div 显示在靠近单击点的位置，但显示在包括寻呼机在内的整个网格上？ - 是的，div 应该显示在靠近单击点的位置。不在整个网格上。
-
如果 div 的大小会很大，应该也超过页面上的其他元素？ - 是的