posts - 59, comments - 244, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

          jqgrid表格使用

          Posted on 2010-10-28 00:41 penngo 閱讀(4287) 評(píng)論(3)  編輯  收藏 所屬分類: Java
          剛好要用到j(luò)query的表格插件,網(wǎng)上找到了Flexgrid和jqgrid兩個(gè),經(jīng)驗(yàn)考慮后決定使用jqgrid,在這篇文章時(shí),jqgrid的最新版本是3.8.1,官網(wǎng)還提供了封裝jqgrid的ASP.NET和PHP版本,可惜的是我要的java版本沒有,只能直接js調(diào)用,為了了解它的用法,寫了個(gè)簡(jiǎn)單的例子。
          jqgrid.jsp
           1<%@ page language="java" contentType="text/html; charset=UTF-8"
           2    pageEncoding="UTF-8"
          %>
           3<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
           4<html>
           5<head>
           6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           7<title>Insert title here</title>
           8
           9<link rel="stylesheet" type="text/css" href="js/jqueryui/1.8.4/css/ui-lightness/jquery-ui-1.8.4.custom.css" />
          10<link rel="stylesheet" type="text/css" href="js/jqgrid/css/ui.jqgrid.css" />
          11<script src="js/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
          12<script src="js/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
          13<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
          14<script src="js/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
          15<script type="text/javascript"> 
          16jQuery().ready(function (){
          17jQuery("#list1").jqGrid({
          18       url:'data.xml',     
          19    datatype: "xml",
          20       colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
          21       colModel:[
          22           {name:'id',index:'id', width:75},
          23           {name:'invdate',index:'invdate', width:90},
          24           {name:'name',index:'name', width:100},
          25           {name:'amount',index:'amount', width:80, align:"right"},
          26           {name:'tax',index:'tax', width:80, align:"right"},        
          27           {name:'total',index:'total', width:80,align:"right"},        
          28           {name:'note',index:'note', width:150, sortable:false}        
          29       ],
          30       rowNum:10,
          31       autowidth: true,
          32       rowList:[10,20,30],
          33       pager: jQuery('#pager1'),
          34       sortname: 'id',
          35    viewrecords: true,
          36    sortorder: "desc",
          37    caption:"XML Example"
          38}
          );
          39//注意:如果使用的是3.8.1版本時(shí),會(huì)報(bào)No such method: navGrid,jquery.jqGrid.min.js里面缺少navGrid這個(gè)方法,換成3.8版本就行了,
          40//jQuery("#list1").jqGrid('navGrid','#pager1',{add:false,edit:false,del:false});
          41}
          );
          42
          </script> 
          43</head>
          44<body>
          45<table id="list1"></table>
          46<div id="pager1"></div>
          47</body>
          48</html>

          data.xml
           1<?xml version="1.0" encoding="UTF-8"?>
           2<rows>
           3<page>1</page>
           4<total>2</total>
           5<records>5</records>
           6
           7<row id='1'>        
           8<cell>1</cell>
           9<cell>in1</cell>
          10<cell>aaab</cell>
          11<cell>100rrrr</cell>
          12<cell>12345</cell>
          13<cell>222</cell>
          14<cell>記得 </cell>
          15</row>
          16
          17<row id='2'>        
          18<cell>2</cell>
          19<cell>in1</cell>
          20<cell>aaab</cell>
          21<cell>100</cell>
          22<cell>12345</cell>
          23<cell>222</cell>
          24<cell>記得 </cell>
          25</row>
          26<row id='3'>        
          27<cell>3</cell>
          28<cell>in1</cell>
          29<cell>aaab</cell>
          30<cell>100</cell>
          31<cell>12345</cell>
          32<cell>222</cell>
          33<cell>記得 </cell>
          34</row>
          35<row id='4'>        
          36<cell>4</cell>
          37<cell>in1</cell>
          38<cell>aaab</cell>
          39<cell>100</cell>
          40<cell>12345</cell>
          41<cell>222</cell>
          42<cell>記得 </cell>
          43</row>
          44<row id='5'>        
          45<cell>5</cell>
          46<cell>in1</cell>
          47<cell>aaab</cell>
          48<cell>100</cell>
          49<cell>12345</cell>
          50<cell>222</cell>
          51<cell>記得 </cell>
          52</row>
          53<row id='6'>        
          54<cell>6</cell>
          55<cell>in1</cell>
          56<cell>aaab</cell>
          57<cell>100</cell>
          58<cell>12345</cell>
          59<cell>222</cell>
          60<cell>記得 </cell>
          61</row>
          62<row id='7'>        
          63<cell>7</cell>
          64<cell>in1</cell>
          65<cell>aaab</cell>
          66<cell>100</cell>
          67<cell>12345</cell>
          68<cell>222</cell>
          69<cell>記得 </cell>
          70</row>
          71<row id='8'>        
          72<cell>8</cell>
          73<cell>in1</cell>
          74<cell>aab</cell>
          75<cell>100</cell>
          76<cell>12345</cell>
          77<cell>222</cell>
          78<cell>記得 </cell>
          79</row>
          80<row id='9'>        
          81<cell>9</cell>
          82<cell>in1</cell>
          83<cell>aaab</cell>
          84<cell>100</cell>
          85<cell>12345</cell>
          86<cell>222</cell>
          87<cell>記得 </cell>
          88</row>
          89</rows>
          90

          運(yùn)行服務(wù)器,直接訪問jqgrid.jsp,應(yīng)該能看到效果

          評(píng)論

          # re: jqgrid表格使用[未登錄]  回復(fù)  更多評(píng)論   

          2010-10-28 09:00 by 雪山飛鵠
          無圖無真相,上圖

          # re: jqgrid表格使用  回復(fù)  更多評(píng)論   

          2010-10-28 14:47 by pengo
          @雪山飛鵠
          哈哈,有興趣就試下,圖就懶得上了。遇上問題的話,可以一起討論學(xué)習(xí)下。

          # re: jqgrid表格使用  回復(fù)  更多評(píng)論   

          2011-01-07 20:55 by
          有沒有更進(jìn)一步的例子了,如后臺(tái)用servlet
          主站蜘蛛池模板: 綦江县| 雅江县| 曲麻莱县| 科技| 化德县| 安丘市| 咸丰县| 阆中市| 萨嘎县| 晋江市| 鹿邑县| 漠河县| 七台河市| 宁武县| 三门峡市| 江华| 罗甸县| 磐安县| 四平市| 佛山市| 石景山区| 阜阳市| 时尚| 响水县| 三亚市| 康保县| 漳浦县| 当涂县| 莆田市| 高陵县| 汶川县| 环江| 都兰县| 梧州市| 团风县| 利辛县| 绥滨县| 车致| 峨眉山市| 屏边| 义马市|