Jquery flexgrid学习笔记（一）

最新推荐文章于 2016-07-06 09:35:12 发布

最新推荐文章于 2016-07-06 09:35:12 发布 · 141 阅读

文章标签：

#jQuery #CSS #JavaScript #HTML #PHP #ViewUI

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用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>