jQuery Grid Plugin - jqGrid - Topic: qtip with jqgrid

asd821226 on qtip with jqgrid

Wed, 11 Aug 2010 13:20:16 +0300

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" />

<script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>

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>

asd821226 on qtip with jqgrid

Wed, 11 Aug 2010 13:18:10 +0300

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

<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>";
   });

</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());
--%>