Jquery flexgrid学习笔记（一）

fangbubu · 发表于 2013-2-7 19:41:38

第一步

当然是到flexgrid的官方网站上下载它最新的包以及 demo了
目前的最新网站为：http://www.flexigrid.info/
在googlecode上的下载页面为：http://code.google.com/p/flexigrid/downloads/list
直接下载链接地址为：http://flexigrid.googlecode.com/files/flexigrid.zip
下载完的zip中有两个文件夹:__MACOSX和flexigrid
我们需要的就是flexigrid这个文件夹。
第二步，简单应用：

将flexigrid文件夹直接拷贝到我们新建的web project下的WebContent目录，由于Demo中动态加载的数据都是由PHP实现的，如果咱们想改写成java的，还需要自己修改一下。
直接在拷贝的flexigrid目录下建立我们学习测试的demo文件夹myflexgrid。
最简单的flexgird应用：
在myflexgrid下建立一个新的jsp页面，在其head标签内添加如下代码：
<link rel="stylesheet" href="../css/flexigrid/flexigrid.css"type="text/css"></link><script type="text/javascript" src="../lib/jquery/jquery.js"></script><script type="text/javascript" src="../flexigrid.js"></script> 按照官方的例子，只需要在现成的table上(包含thead,和tbody)加上如下代码：
$().ready(function() {$('.flex1').flexigrid( {});});这样简单应用就完成了。
第三步：自己定义表头

将上述例子中的thead全部删除，修改js代码：
$().ready(function() {$('.flex1').flexigrid( {height : 'auto',width : 'auto',colModel : [ {display : 'ISO',name : 'iso',width : 40,sortable : true,align : 'center' }, {display : 'Name',name : 'name',width : 180,sortable : true,align : 'left'}, {display : 'Printable Name',name : 'printable_name',width : 120,sortable : true,align : 'left'}, {display : 'ISO3',name : 'iso3',width : 130,sortable : true,align : 'left',hide : true} ]});});这里主要是增加了colModel，这个就是定义表头的参数。看下实现的页面，我们就可以发现表头是由JS自动生成了。
以后我们需要调整表格的表现形式，就可以像以上的方法添加一些参数在flexigrid方法。

最后贴上页面例子的完整代码：
<%@ 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"><title>flexgrid Test</title><link rel="stylesheet" href="../css/flexigrid/flexigrid.css"type="text/css"></link><script type="text/javascript" src="../lib/jquery/jquery.js"></script><script type="text/javascript" src="../flexigrid.js"></script><script type="text/javascript">$().ready(function() {$('.flex1').flexigrid( {height : 'auto',width : 'auto',colModel : [ {display : 'ISO',name : 'iso',width : 40,sortable : true,align : 'center'}, {display : 'Name',name : 'name',width : 180,sortable : true,align : 'left'}, {display : 'Printable Name',name : 'printable_name',width : 120,sortable : true,align : 'left'}, {display : 'ISO3',name : 'iso3',width : 130,sortable : true,align : 'left',hide : true} ]});});</script></head><body><table class="flex1"><tbody><tr><td>This is data 1 with overflowing content</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr><tr><td>This is data 1</td><td>This is data 2</td><td>This is data 3</td><td>This is data 4</td></tr></tbody></table></body></html>

		自动登录	找回密码
密码			立即注册