`
fangbubu
  • 浏览: 42871 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
安泽源
社区版块
存档分类
最新评论

Jquery flexgrid学习笔记（一）

jQueryCSSJavaScriptHTMLPHP 
阅读更多

第一步

当然是到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>

 

分享到：
| flexgrid参数
评论
1 楼 skyfen 2011-01-05  
你这代码字段不能排序的。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery flexgrid 学习

    《jQuery flexgrid 学习详解》 在网页开发中，数据展示往往是一个不可或缺的部分，而jQuery flexgrid就是一款强大的网格布局工具，它可以帮助开发者轻松实现复杂的数据表格展示和操作。本文将深入探讨jQuery ...

    jquery flexgrid 修改版本

    FlexGrid是一款基于jQuery的网格插件，它提供了丰富的数据展示和操作功能，广泛应用于数据密集型的Web应用中。然而，原生的FlexGrid存在一些限制，比如在已有数据的基础上直接通过JSON添加新数据的功能并不完善。...

    Jquery框架Flexgrid优化

    在原有数据绑定方式下做了修改，数据展示效率提高50%

    jquery表格插件flexgrid最新版及实例

    好好的flexgrid组件就这样断更，给大家留着希望能够帮助你，此外还加了些例子，希望都用其拉

    stuts2+ibatis+jQuery +UI + flexgrid+Json做的一个用户管理界面

    【标题】"stuts2+ibatis+jQuery +UI + flexgrid+Json做的一个用户管理界面"揭示了这个项目是基于一系列技术构建的用户管理系统。接下来，我们将详细探讨这些技术及其在用户管理中的应用。 **Struts2**：Struts2 是...

    flexgrid

    FlexGrid 是一个强大的 jQuery 插件，用于在网页中创建响应式、可调整大小的数据网格。这个插件允许开发者以灵活的方式展示数据，提供多种排序、分页和过滤功能，适用于构建复杂的数据驱动的Web应用。jQuery ...

    Asp.net 调用jquery的插件flexgrid

    FlexGrid是由wijmo库提供的一款jQuery插件，它提供了一个高度可定制的表格，可以显示大量数据并支持多种交互功能。在ASP.NET项目中使用FlexGrid，你需要先引入jQuery库和wijmo库的相关文件，通常包括jQuery.js、...

    flexgrid demo

    FlexGrid 是一个强大的 jQuery 插件，用于创建灵活、可自定义的数据网格。这个"flexgrid demo"提供了演示和源代码，帮助开发者更好地理解和应用这个工具。在本文中，我们将深入探讨 FlexGrid 的核心功能、如何使用它...

    一个好用的flexgrid

    开发者可以通过解压并参考这些内容来学习如何在自己的项目中集成和使用FlexGrid。 在实际应用中，开发人员可能需要了解以下知识点： - 如何在Windows Forms应用程序中添加和配置FlexGrid控件。 - 数据绑定的基本...

    flexgrid最新版+实例

    FlexGrid 是一款强大的前端JavaScript表格库，专为构建功能丰富的数据展示和操作界面而设计。它以其灵活性、高效性和易用...通过深入学习和实践，你将能够充分利用FlexGrid的潜力，创建出满足各种需求的数据展示应用。

    C1FlexGrid教程

    这一部分将逐步引导开发者通过实例来学习FlexGrid控件的编辑、大纲和数据分析等操作。 ### 7. 基于任务的帮助 介绍如何使用C1FlexGrid编辑器来访问特定的功能，并提供一些高级技巧，例如如何为单元格区域添加渐变...

    c1FlexGrid简单操作

    通常，这样的测试项目会包含初始化控件、设置属性、处理事件以及数据绑定的相关代码，这些都是学习和掌握c1FlexGrid操作的关键部分。 总之，c1FlexGrid是一个功能丰富的表格控件，它的下拉列表功能、列类型设置和...

    使用flexgrid

    flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use

    Flexgrid使用教程实例

    Flexgrid是一款功能强大的网格控件，常用于Windows应用程序开发，特别是在.NET Framework环境下，它提供了灵活的数据展示和操作能力。在本教程中，我们将深入探讨Flexgrid的使用，了解其核心特性，以及如何通过实例...

    Flexgrid用法

    Flexgrid是一种流行的数据网格控件，常用于Web应用程序中，以展示、操作和管理大量数据。它以其灵活性、可扩展性和强大的功能而受到开发者青睐。在这个实例中，我们将深入探讨如何利用Flexgrid实现异步增删改操作，...

    C1FlexGrid绘制柱形图

    C1FlexGrid是一款强大的.NET控件，主要用于在Windows Forms应用程序中显示网格数据。它由ComponentOne公司开发，提供了丰富的功能，包括数据绑定、排序、过滤、分页等。本话题聚焦于C1FlexGrid的一个高级特性——...

    flexgrid使用简单实例

    这个“flexgrid使用简单实例”是开发者学习和理解FlexGrid基本功能的一个好素材，它提供了如何在不连接数据库的情况下进行数据操作的演示。 首先，FlexGrid的核心特性是它的灵活性和可定制性。它可以展示二维表格...

    flexgrid asp.net

    Flexgrid 是一个基于 jQuery 的数据网格控件，用于在网页中展示和操作表格数据。它在 ASP.NET 平台上被广泛使用，提供了丰富的功能，如排序、分页、过滤和编辑。在 ASP.NET 应用中，Flexgrid 可以通过 AJAX 技术与...

    flexgrid滚轮示例

    FlexGrid控件是Windows Forms应用程序中常用的一种网格控件，它允许开发者以表格形式展示数据，并提供了丰富的功能和自定义选项。"flexgrid滚轮示例"是指在使用FlexGrid时，通过鼠标滚轮实现网格内容的滚动效果。在...

Magicbox
Global site tag (gtag.js) - Google Analytics