基本上,討厭鬼這次要發的教學文是一個系列文

也因為要講的東西比較多,所以會分成幾個階段來講

jqGrid的基本建立~~這裡會撘配struts2

jqGrid的列表~~這裡會撘配struts2+spring+hibernate

再來就是jqGrid的一些用法,以及能做到的事情~

 

 

如果各位看倌要照著討厭鬼的方法做,又還沒有看struts2架構的話

可以先去看下這篇喔!!Struts2 架構配置教學

那如果沒有要用同一種架構的話~參考看看即可

 

 

那麼一開始網頁上會用到套件不外乎jquery與jqGrid

所以我們要先去下載這兩個套件

直接JqGrid的官網下載就可以了

討厭鬼這裡用的是4.4.1的版本

 

基本上會用到的物件為下列

<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" >
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-cn.js"></script>

請各位將這些js與css放到對應的資料夾

分別為WebContent/js與WebContent/css

如果想要畫面好看一點可以去jquery的官網下載jquery-ui-1.8.19.custom.css

這樣畫面會好看一點

 

為了不浪費大家的時間討厭鬼就直接jsp給大家看

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.19.custom.css" >
<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" >
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-cn.js"></script>
<title>grid首頁</title>
<script type="text/javascript">
    $(document).ready(function() {
        $("#grid").jqGrid({
            datatype: "local",
            height: 250,
            colNames:['序號','遊戲', '好玩程度'],
            colModel:[
                {name:'id',index:'id', width:60 },
                {name:'game',index:'game', width:90 },
                {name:'level',index:'level', width:100},
            ],
            caption: "討厭鬼grid"
        });
    });
    function insertGrid(){
        var gameDate = [
            {id:"1",game:"WOW",level:"不好玩,沒新意"},
            {id:"2",game:"D3",level:"還可以"},
            {id:"3",game:"Lineage",level:"死外掛"},
            {id:"4",game:"RO",level:"不想玩"}
        ];
        for(var i=0;i<=gameDate.length;i++){
            $("#grid").jqGrid('addRowData',i+1,gameDate[i]);
        }
    }
</script>
</head>
<body onload="insertGrid();">
    <table id="grid"></table>
</body>
</html>

 

這裡的重點就是

要在body建立一個table的物件,並給它id

 

 

然後在畫面剛出來的時候就先

把這個table變成我們要的樣式

$(document).ready(function() {
        $("#grid").jqGrid({
            datatype: "local",
            height: 250,
            colNames:['序號','遊戲', '好玩程度'],
            colModel:[
                {name:'id',index:'id', width:60 },
                {name:'game',index:'game', width:90 },
                {name:'level',index:'level', width:100},
            ],
            caption: "討厭鬼grid"
        });
    });

 

datatype為資料來源

height為grid的高度

colNames這個是指標題列

colModel指的是每一個資料列的id

colNames的數量跟colModel的數量要一樣

caption為這個grid的名稱

 

  var gameDate = [
            {id:"1",game:"WOW",level:"不好玩,沒新意"},
            {id:"2",game:"D3",level:"還可以"},
            {id:"3",game:"Lineage",level:"死外掛"},
            {id:"4",game:"RO",level:"不想玩"}
        ];
        for(var i=0;i<=gameDate.length;i++){
            $("#grid").jqGrid('addRowData',i+1,gameDate[i]);
        }

 

 

在這邊用的資料格式是JSON

JSON的key值會對應到grid的name

這邊用的是addRowData的方法

一筆一筆的把資料加到grid中

好了以後,就可以看到成果了

 

 

在這邊呢,討厭鬼覺得如果美工夠好的人可以不用這個套件

因為討厭鬼的美工很爛所以我才

 

 

 

 

補充:

struts.xml內容

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">

<struts>
<package name="default" extends="struts-default" namespace="/grid">
<action name="index" class="grid.com.action.GridAction" method="index">
<result name="success">/grid/index.jsp</result>
</action>
</package>
</struts>

 

GridAction.java內容

package grid.com.action;

import com.opensymphony.xwork2.ActionSupport;

public class GridAction extends ActionSupport{

public String index(){
return SUCCESS;
}
}

 

 

因為這篇算是基本的教學,所以看起來應該會比較兩光

請各位看倌多多包涵

創作者介紹
創作者 討厭鬼 的頭像
討厭鬼

討厭鬼教學

討厭鬼 發表在 痞客邦 留言(0) 人氣()