你的分享就是我们的动力 ---﹥

优秀的jQuery插件-Flexigrid

时间:2013-05-30 14:42来源:www.chengxuyuans.com 点击:

首先我想解释一下什么叫表格插件,所谓的表格插件就是为我们提供了一种用表格查看数据的方式,可能还会伴随分页、排序、重置大小等功能
今天我要给大家推荐一款优秀的表格插件,flexigrid是一个轻量级但是功能丰富的jQuery插件,能够利用ajax加载基于xml的数据源
提前申明:该插件已由本人亲自测试,证明官方给的源码存在问题(没有改变列大小的功能),因此直接截取了官方demo的js和css文件,方可正确显示,因此建议下载本站整理的源码。
特点:
1、可调整列的宽度

2、可调整表格的宽度和高度

3、可调整列的顺序

4、拥有很酷的主题

5、可以转换一张普通的表

6、可以通过 ajax 异步加载数据源(XML格式 和 JSON 格式)

7、分页

8、可自由控制显示或隐藏指定的列

9、操作工具条

10、搜索功能

11、可访问的API

[荐]优秀的jQuery插件-Flexigrid预览图

qqq

使用步骤【普通静态表格】

1、下载源码包 马上下载 以下是以本站整理的 Demo 来讲解的

2、将解压后的源码中的 css 文件夹、js 文件夹 复制到自己的网站中。

3、将以下的 css 和 js文件引用到自己的网站中

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/flexigrid.pack.css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>

4、将表格插件的 html 嵌入到 body中。实际上就是一个 table.flexme(这里的样式名要和 js 中的对应)
table 里面包含了一个 thead(用来表示表头)和一个 tbody(表主体)

 <table class="flexme">
	<thead>
		<tr>
			<th width="100">Col 1</th>
			<th width="100">Col 2</th>
			<th width="100">Col 3 is a long header name</th>
			<th width="300">Col 4</th>
		</tr>
	</thead>
	<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>
		//................更多行
	</tbody>
</table>

5、调用插件

<script  type="text/javascript">
 $(function () {
          $('.flexme').flexigrid();
   });
</script>

以上便完成了 Flexigrid 插件的整个调用过程。

插件应用方法

到此我们已经知道该如何去使用 Flexigrid 插件了,但是在实际的开发中,我们可能有自己的需求,至少表中的数据是动态的而不是写死的,那么到底该如何更好地将该插件运用到自己的网站中呢?

1、上面我们看到的是写死在html中的表格,那么我们也可以在页面加载后从后台取出数据,然后组装成一个具有以上格式的 table 表格,然后动态添加到页面中,调用插件即可。

2、第一种方式有点笨拙,而且如果牵涉到分页的话就不能和插件本身融入到一起了,所以 Flexigrid 插件本身就提供了对 ajax异步获取数据的支持。

ajax动态加载数据的实现步骤

想实现 ajax 加载数据的效果,我们只需要将使用步骤中的第 4 步和第 5 步修改即可。
1、2、3步不变。
4、因为是 异步加载,所以我们只需要放置一个 table标签即可

<table class="flexme" style="display: none"></table>

5、调用插件的 js 代码,由于是异步加载,所以代码相应会比较多。
通过 ajax 异步获取表格数据的 js 代码以及本站对每个参数进行额说明:

$("#flex1").flexigrid({
	url: 'post2.php', //要请求的后台处理程序地址
	dataType: 'json', //返回的数据格式 一般为 json
	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},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [    //显示的按钮以及点击触发的事件
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	searchitems : [ //可供搜索的列名
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",  //初始以哪个字段排序
	sortorder: "asc", //升序:asc   降序:desc
	usepager: true,   //是否使用分页
	title: 'Countries', //表头的标题
	useRp: true,  
	rp: 15,   //每页显示的记录条数
	showTableToggleBtn: true, //是否显示表格“展开”和“折叠”图标
	width: 700,  //表格宽度
	height: 200  //表格高度
});   

以上的 url 和 dataType 参数是与后台处理程序相关的。
url 表示我们要从哪个后台程序获取数据,而该后台程序就负责从数据库取出数据然后返回给前台插件调用,这里的程序是 php 的,还可以是 java、.net以及其他后台程序。
dataType 表示返回的数据类型,这里是 JSON。而我们一般也就是返回JSON数据,便于处理。

下面给大家一个图解

Untitled

 

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/63193.html