Jquery flexgrid学习笔记（一）
第一步
当然是到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>