基本上，討厭鬼這次要發的教學文是一個系列文
也因為要講的東西比較多，所以會分成幾個階段來講
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;
}
}
因為這篇算是基本的教學，所以看起來應該會比較兩光
請各位看倌多多包涵
留言列表
程式教學 (5)