jqGrid表格插件学习(一) 第一个Demo

 

jqGrid学习

最近的工作任务频繁涉及到很多的jqGrid这个插件,鉴于刚接触这个东西时不太了解,以至于在这个上面耽误了一些时间,现在将jqGrid学习总结一下:

应用中经常会遇到向用户展示信息的情况。我们可以自己通过

标签来实现。在此介绍另一种方法:通过jQuery的插件来实现信息的展示以及对数据的操作等功能。

在网上,关于jQuery的表格插件有不少。其中有几款做的很好,比如:flexiGridjqGrid。不过flexGrid网上的资料很少,官方文档不全。而jqGrid的官方文档却相当的全面。官方文档网址:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs,文档是全英文的,有兴趣的可以去看看。

 

一、jqGrid的第一个Demo

学习任何一项技术,第一个例子相当的重要,如果第一个例子都不能运行成功,那接下来的学习将是相当的困难,甚至没法进行下去。所以,在此先实现第一个例子,希望对刚刚接触jqGrid的人有所帮助。  
    jqGrid
获得数据的方式有多种,包括xmlJSON,Array等。第一个例子,我使用了最简单的方式,即Array方式。之后的例子会用json从服务器端获得数据。本例子没有从跟后台交互,在这个例子中我们使用到了一个addRowData的方法

 

我的例子效果如下:

jqGrid表格插件学习(一) 第一个Demo_第1张图片

也许大家一般看到的都是蓝色的吧,我的例子的颜色是灰色的,这个是css中定义的样式导致的,有兴趣的可以去jquery-ui-1.8.24.custom.css中看看 

 

前台页面代码如下:

注意:我的jqGrid使用的jqGrid3.8

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <base href="<%=basePath%>">

    <title>jqGrid第一个例子title>

    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/jquery-ui-1.8.24.custom.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>css/ui.jqgrid.css" />

    <script src="<%=basePath%>js/jquery-1.8.2.min.js" type="text/javascript">script>

    <script src="<%=basePath%>js/grid.locale-cn.js" type="text/javascript">script>

    <script src="<%=basePath%>js/jquery-ui-1.8.24.custom.min.js" type="text/javascript">script>

    <script src="<%=basePath%>js/jquery.jqGrid.min.js" type="text/javascript">script>

  head>

  <script type="text/javascript">

 …

  script>

  <body>

    <table id="gridTable">table>

    <div id="gridPager">div>

  body>

html>

 

jqGrid3.8集成了jQuery UI,所以,此处需要导入UI相关jscss。另外,grid.locale-cn.js这个国际化文件需要从jqGrid源码包提取。另外,这个文件必须在jquery.jqGrid.min.js之前导入,同时jquery-1.8.2.min.js需要在 grid.locale-cn.js之前导入,因为这个里面调用到了jquery的对象, JS是解释型语言,是根据标签引用分块顺序执行的, 必须先有jquery才能保证代码正确执行

 

javascript代码:

 

$(document).ready(function(){

        $("#gridTable").jqGrid({

        datatype: "local",

            height: 250,

            colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],

            colModel:[

                 {name:'id',index:'id', width:60, sorttype:"int"},

                 {name:'userName',index:'userName', width:90},

                 {name:'gender',index:'gender', width:90},

                 {name:'email',index:'email', width:125,sorttype:"string"},

                 {name:'QQ',index:'QQ', width:100},               

                 {name:'mobilePhone',index:'mobilePhone', width:120},               

                 {name:'birthday',index:'birthday', width:100, sorttype:"date"}               

                 ],

            sortname:'id',

            sortorder:'asc',

            viewrecords:true,

            rowNum:10,

            rowList:[10,20,30],

            pager:"#gridPager",

            caption: "第一个jqGrid例子"

        }).navGrid('#pager2',{edit:false,add:false,del:false});

       

        var mydata = [

                {id:"1",userName:"flySky",gender:"",email:"[email protected]",QQ:"8000000",mobilePhone:"13223423424",birthday:"1985-10-01"},

                {id:"2",userName:"李雪",gender:"",email:"[email protected]",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},

                {id:"3",userName:"王才",gender:"",email:"[email protected]",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},

                {id:"4",userName:"马丽",gender:"",email:"[email protected]",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},

                {id:"5",userName:"赵刚",gender:"",email:"[email protected]",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},

                {id:"6",userName:"叶公",gender:"",email:"[email protected]",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},

                {id:"7",userName:"李晴",gender:"",email:"[email protected]",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},

                {id:"8",userName:"流星",gender:"",email:"[email protected]",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},

                {id:"9",userName:"孙先",gender:"",email:"[email protected]",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}

                ];

        for(var i = 0 ; i <= mydata.length ; i++){

        jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);

        }

    });

 

从上面看出来,jqGrid的使用是:$("#tableId").jqGrid(optional);

其中,optional是一个对象,有很多属性,具体什么含义,怎么配置,之后的文章我会介绍,也可以在官方网站找到详细的介绍。 

同时jqGrid还有别的调用方法,这个也在以后详细探讨 

 

最后附上例子代码和jqGrid的源码包

你可能感兴趣的:(javascript)