Forum
Log In
Home
Topic RSS
Related Topics
13:18
10/08/2010
Offline
I want to integrate qtip with jqgrid ,but i can't find an event like mouseover in jqgrid, so my qtip effects can't appear!
I have made two demos,but all of them can't meet my requirements。
1.demo.jsp
<%@page contentType="text/html; charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的第一个jqGrid例å</title>
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen"
href="styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="styles/themes/ui.jqgrid.css" />
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jQuery/jquery.qtip.js"></script>
<script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script src="scripts/jQuery/plugins/grid.locale-zh_CN.js"
type="text/javascript"></script>
<script src="scripts/jQuery/plugins/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
createtable();
//showTip();
});
function createtable()
{
$("#gridTable").jqGrid( {
ajaxGridOptions : {type:"POST"},
mtype:"POST",
url : 'demoServlet',
datatype : "json",
height : 250,
width : 800,
colNames : [ 'ç¼–å·', '用户å', '性别', '邮箱', 'QQ', '手机å·', '出生日期' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sortable:false
}, {
name : 'userName',
index : 'userName',
align:"center",
width : 90,
sortable:false
}, {
name : 'gender',
index : 'gender',
sortable:false,
width : 90
}, {
name : 'email',
index : 'email',
sortable:false,
formatter:'showlink',
formatoptions:{
baseLinkUrl:'someurl.php',
addParam: '&action=edit',
idName:'email'},
width : 125
}, {
name : 'QQ',
index : 'QQ',
sortable:false,
width : 100
}, {
name : 'mobilePhone',
sortable:false,
index : 'mobilePhone',
width : 120
}, {
name : 'birthday',
sortable:false,
index : 'birthday',
width : 100
} ],
onCellSelect: function(rowid, index, contents, event) {
//alert(contents);
$.ajax({
type: "POST",
url: "jsondata.jsp?name="+contents+"&age=28",//产生JSONæ•°æ®çš„æœåŠ¡ç«¯é¡µé¢
dataType: "json",
contentType: "application/json; charset=utf-8",
//data:"name="+contents+"&age=28",//å‘æœåŠ¡å™¨å‘出的查询å—符串（æ¤å‚æ•°å¯é€‰ï¼‰
success: function(json) {
var string="<table>";
$(json).each(function(i){
var a=json[i];
string+="<tr>";
$.each(a ,function(j){
string+="<td>"+i+"="+a[j]+"</td>";
});
string+="</tr>";
});
string+="</table>";
//alert(string);
$(event.target).qtip({
content: string,
position: { adjust: { screen: true } },
hide: { effect: { type: 'slide' } },
style: {
name: 'light',
tip: 'topMiddle',
padding: 5,
border: {
width: 3,
radius: 8
},
width: 300
}
});
}
});
event.preventDefault();
},
hoverrows:true,
viewrecords : true,
headertitles:false,
emptyrecords:true,
hidegrid: true,
hiddengrid:true,
pagerpos :'right',
recordpos:'center',
rowNum : 10,
altRows:false,
rowList : [ 10, 20, 30 ],
jsonReader : {
repeatitems : false
},
gridview:true,
pager : "#gridPager",
pgbuttons:true,
caption : "jqGrid与Servlet集æˆ"
}).navGrid('#gridPager', {
search:false,
edit : false,
add : false,
del : false
});
}
function getData(str,str2){
$("#list").html("");//清空列表ä¸çš„æ•°æ®
//å‘é€ajax请求
$.getJSON(
"jsondata.jsp",//产生JSONæ•°æ®çš„æœåŠ¡ç«¯é¡µé¢
{name:str,age:str2},//å‘æœåŠ¡å™¨å‘出的查询å—符串（æ¤å‚æ•°å¯é€‰ï¼‰
//对返回的JSONæ•°æ®è¿›è¡Œå¤„ç†ï¼Œæœ¬ä¾‹ä»¥åˆ—表的形å¼å‘ˆçŽ°
function(json){
//循环å–jsonä¸çš„æ•°æ®,并呈现在列表ä¸
$(json).each(function(i){
var a=json[i];
$("#list").append("<tr>");
$.each(a ,function(j){
// $("#list").append("<li>"+j+": "+a[j]+"</li>");
$("#"+j).html(a[j]);
});
$("#list").append("</tr>");
});
});
}
function getDatatest(str,str2){
var string="<table>";
//å‘é€ajax请求
$.getJSON(
"jsondata.jsp",//产生JSONæ•°æ®çš„æœåŠ¡ç«¯é¡µé¢
{name:str,age:str2},//å‘æœåŠ¡å™¨å‘出的查询å—符串（æ¤å‚æ•°å¯é€‰ï¼‰
//对返回的JSONæ•°æ®è¿›è¡Œå¤„ç†ï¼Œæœ¬ä¾‹ä»¥åˆ—表的形å¼å‘ˆçŽ°
function(json){
//循环å–jsonä¸çš„æ•°æ®,并呈现在列表ä¸
$(json).each(function(i){
var a=json[i];
string+="<tr>";
$.each(a ,function(j){
// $("#list").append("<li>"+j+": "+a[j]+"</li>");
// $("#"+j).html(a[j]);
string+="<td>"+i+"="+a[j]+"</td>";
});
string+="</tr>";
});
string+="</table>";
});
alert(string);
}
</script>
</head>
<body>
<div id="tooltip"></div>
<table id="gridTable"></table>
<div id="gridPager"></div>
<input type="button" onclick="getData('lee','28')" value="test"></input>
<table border="1" id="test">
<tbody id="list"></tbody>
<tr>
<td id="name"></td>
<td id="fireTime"></td>
<td id="jobRunTime"></td>
<td id="jobFullResult"></td>
</tr>
<tr>
<td id="name1"></td>
<td id="fireTime1"></td>
<td id="jobRunTime1"></td>
<td id="jobFullResult1"></td>
</tr>
<tr>
<td id="name2"></td>
<td id="fireTime2"></td>
<td id="jobRunTime2"></td>
<td id="jobFullResult2"></td>
</tr>
</table>
</body>
</html>
2.DemoServlet.java
package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
* Servlet implementation class DemoServlet
*/
public class DemoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DemoServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 定义返回的数æ®ç±»åž‹ï¼šjson，使用了json-lib
JSONObject jsonObj = new JSONObject();
String page = request.getParameter("page"); // å–得当å‰é¡µæ•°,注æ„这是jqgrid自身的å‚æ•°
String rowsnum = request.getParameter("rows"); // å–å¾—æ¯é¡µæ˜¾ç¤ºè¡Œæ•°ï¼Œ,注æ„这是jqgrid自身的å‚æ•°
System.out.println("page="+page+"rowsnum"+rowsnum);
int totalRecord = 80; // 总记录数(åº”æ ¹æ®æ•°æ®åº“å–得，在æ¤åªæ˜¯æ¨¡æ‹Ÿ)
int totalPage = totalRecord % Integer.parseInt(rowsnum) == 0 ? totalRecord
/ Integer.parseInt(rowsnum) : totalRecord / Integer.parseInt(rowsnum)
+ 1; // 计算总页数
// æ ¹æ®jqGrid对JSONçš„æ•°æ®æ ¼å¼è¦æ±‚ç»™jsonObj赋值
jsonObj.put("page", page); // 当å‰é¡µ
jsonObj.put("total", totalPage); // 总页数
jsonObj.put("records", totalRecord); // 总记录数
try {
int index = (Integer.parseInt(page) - 1) * Integer.parseInt(rowsnum); // 开始记录数
int pageSize = Integer.parseInt(rowsnum);
// ä»¥ä¸‹æ¨¡æ‹Ÿæž„é€ JSONæ•°æ®å¯¹è±¡
JSONArray rows = new JSONArray();
for(int i=index;i<index+pageSize;i++)
{
// å˜æ”¾ä¸€æ¡è®°å½•çš„对象
JSONObject cell = new JSONObject();
cell.put("id", i);
if(i%2==0)
{
cell.put("userName", "polaris");
cell.put("gender", "女");
}
else
{
cell.put("userName", "å¾æ–°åŽ");
cell.put("gender", "<a rel=\'jsondata.jsp\' href=\'#\' id="gender"+i+"" >"+"ç”·"+"</a>");
}
cell.put("email", "polaris@gmail.com");
cell.put("QQ", "772"+i+"1837"+i);
cell.put("mobilePhone", "132"+i+"1837"+i+"3"+i);
cell.put("birthday", "198"+i+"-10-"+"1"+i);
// 将该记录放入rowsä¸
rows.add(cell);
}
// å°†rows放入json对象ä¸
jsonObj.put("rows", rows);
// 自控制å°æ‰“å°è¾“出，以检验json对象生æˆæ˜¯å¦æ£ç¡®
System.out.println("è¦è¿”回的json对象：\n" + jsonObj.toString());
// 设置å—符编ç
response.setCharacterEncoding("UTF-8");
// 返回json对象（通过PrintWriter输出）
response.getWriter().print(jsonObj);
} catch (Exception ex) {
ex.printStackTrace();
}
}
}
3.jsondata.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="net.sf.json.*"%>
<%@page import="net.sf.json.JSONObject"%>
<%--
String name=request.getParameter("name");
//String age=request.getParameter("age");
JSONArray array = new JSONArray(); //声明JSON数组
JSONObject objs = new JSONObject();
objs.put("name",name);
objs.put("age","28");
array.add(objs);
for(int i=0;i<10;i++){
JSONObject obj = new JSONObject();
obj.put("name","ants"+i);
obj.put("age",24+i);
array.add(obj);
}
System.out.print(array.toString());
out.print(array.toString());
--%>
<%
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("name="+name+",age="+age);
JSONArray array = new JSONArray(); //声明JSON数组
JSONObject xx = new JSONObject();
xx.put("name","fuck1");
xx.put("fireTime","fuck1");
xx.put("jobRunTime","fuck1");
xx.put("jobFullResult","fuck1");
array.add(xx);
JSONObject bb = new JSONObject();
bb.put("name1","fuck2");
bb.put("fireTime1","fuck2");
bb.put("jobRunTime1","fuck2");
bb.put("jobFullResult1","fuck2");
array.add(bb);
JSONObject mm = new JSONObject();
mm.put("name2","fuckmm");
mm.put("fireTime2","fuckmm");
mm.put("jobRunTime2","fuckmm");
mm.put("jobFullResult2","fuckmm");
array.add(mm);
System.out.print(array.toString());
out.print(array.toString());
%>
<%--
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("name="+name+",age="+age);
String temp="<table>";
temp+="<tr><td>name<td>";
temp+="<td>fireTime<td>";
temp+="<td>jobFullResult<td>";
temp+="</tr>";
temp+="<tr><td>name<td>";
temp+="<td>fireTime<td>";
temp+="<td>jobFullResult<td>";
temp+="</tr></table>";
System.out.print(temp.toString());
out.print(temp.toString());
--%>
13:20
10/08/2010
Offline
4.demo3.jsp but it doesn't work,Help!!!!!!!!!!
<%@page contentType="text/html; charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的第一个jqGrid例å</title>
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen"
href="styles/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="styles/themes/ui.jqgrid.css" />
<!-- 引入jQuery -->
<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
<script src="scripts/jQuery/plugins/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script src="scripts/jQuery/plugins/grid.locale-zh_CN.js"
type="text/javascript"></script>
<script src="scripts/jQuery/plugins/jquery.jqGrid.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
createtable();
});
function showTip()
{
$("a[id*='gender']").each(function(index, domEle)
{
alert($(this).text());
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
url: "jsondata.jsp?name=lee&age=28", // Use the rel attribute of each element for the url to load
title: {
text: 'Wikipedia - ' + $(this).text(), // Give the tooltip a title using each elements text
button: 'Close' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle', // Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', // Use the default light style
width: 570 // Set the tooltip width
}
});
});
}
function createtable()
{
$("#gridTable").jqGrid( {
ajaxGridOptions : {type:"POST"},
mtype:"POST",
url : 'demoServlet',
datatype : "json",
height : 250,
width : 800,
colNames : [ 'ç¼–å·', '用户å', '性别', '邮箱', 'QQ', '手机å·', '出生日期' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sortable:false
}, {
name : 'userName',
index : 'userName',
align:"center",
width : 90,
sortable:false
}, {
name : 'gender',
index : 'gender',
sortable:false,
width : 90
}, {
name : 'email',
index : 'email',
sortable:false,
formatter:'showlink',
formatoptions:{
baseLinkUrl:'someurl.php',
addParam: '&action=edit',
idName:'email'},
width : 125
}, {
name : 'QQ',
index : 'QQ',
sortable:false,
width : 100
}, {
name : 'mobilePhone',
sortable:false,
index : 'mobilePhone',
width : 120
}, {
name : 'birthday',
sortable:false,
index : 'birthday',
width : 100
} ],
hoverrows:true,
headertitles:false,
viewrecords : true,
emptyrecords:true,
hidegrid: true,
hiddengrid:true,
pagerpos :'right',
recordpos:'center',
rowNum : 10,
altRows:false,
rowList : [ 10, 20, 30 ],
jsonReader : {
repeatitems : false
},
gridview:true,
pager : "#gridPager",
pgbuttons:true,
caption : "jqGrid与Servlet集æˆ"
}).navGrid('#gridPager', {
search:false,
edit : false,
add : false,
del : false
});
showTip();
}
function getData(str,str2){
$("#list").html("");//清空列表ä¸çš„æ•°æ®
//å‘é€ajax请求
$.getJSON(
"jsondata.jsp",//产生JSONæ•°æ®çš„æœåŠ¡ç«¯é¡µé¢
{name:str,age:str2},//å‘æœåŠ¡å™¨å‘出的查询å—符串（æ¤å‚æ•°å¯é€‰ï¼‰
//对返回的JSONæ•°æ®è¿›è¡Œå¤„ç†ï¼Œæœ¬ä¾‹ä»¥åˆ—表的形å¼å‘ˆçŽ°
function(json){
//循环å–jsonä¸çš„æ•°æ®,并呈现在列表ä¸
$(json).each(function(i){
var a=json[i];
$("#list").append("<tr>");
$.each(a ,function(j){
// $("#list").append("<li>"+j+": "+a[j]+"</li>");
$("#"+j).html(a[j]);
});
$("#list").append("</tr>");
});
});
}
function getDatatest(str,str2){
var string="<table>";
//å‘é€ajax请求
$.getJSON(
"jsondata.jsp",//产生JSONæ•°æ®çš„æœåŠ¡ç«¯é¡µé¢
{name:str,age:str2},//å‘æœåŠ¡å™¨å‘出的查询å—符串（æ¤å‚æ•°å¯é€‰ï¼‰
//对返回的JSONæ•°æ®è¿›è¡Œå¤„ç†ï¼Œæœ¬ä¾‹ä»¥åˆ—表的形å¼å‘ˆçŽ°
function(json){
//循环å–jsonä¸çš„æ•°æ®,并呈现在列表ä¸
$(json).each(function(i){
var a=json[i];
string+="<tr>";
$.each(a ,function(j){
// $("#list").append("<li>"+j+": "+a[j]+"</li>");
// $("#"+j).html(a[j]);
string+="<td>"+i+"="+a[j]+"</td>";
});
string+="</tr>";
});
string+="</table>";
});
alert(string);
}
</script>
</head>
<body>
<div id="tooltip"></div>
<table id="gridTable"></table>
<div id="gridPager"></div>
<input type="button" onclick="getData('lee','28')" value="test"></input>
<table border="1" id="test">
<tbody id="list"></tbody>
<tr>
<td id="name"></td>
<td id="fireTime"></td>
<td id="jobRunTime"></td>
<td id="jobFullResult"></td>
</tr>
<tr>
<td id="name1"></td>
<td id="fireTime1"></td>
<td id="jobRunTime1"></td>
<td id="jobFullResult1"></td>
</tr>
<tr>
<td id="name2"></td>
<td id="fireTime2"></td>
<td id="jobRunTime2"></td>
<td id="jobFullResult2"></td>
</tr>
</table>
<div id="content">
<a href='#' class="qtip">sdfsfsd</a>
</div>
</body>
</html>
Most Users Ever Online: 715
Currently Online:
60 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
