JQuery的Flexigrid的API运用

JQuery的Flexigrid的API使用

JQuery Flexigrid 是一个不错的table插件，给大家介绍一下

1.官网

http://flexigrid.info/

2.优势

支持主流的table功能，简单实用，学习周期短，是一个不错的table插件

3.实践

先书写HTML

	<table class="flexme1">
		<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>
			<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>

然后添加变为奇迹代码

		$('.flexme1').flexigrid();

就好了

下面就是我这篇文章的重点

说一说Flexigrid的JSON API

好了哈哈，希望对你们有帮助

参考：http://blog.cuegraphix.com/?p=86

基本设定

width	table的长度（default：auto）
height	table的宽度（default：200）
striped	表格的线的表示（default：true）
novstripe	纵向表格的表示（default：false）
minwidth	列的最小幅度（default：30）
minheight	行的最小宽度（default：80）
resizable	table是否可以改变大小（default：true）
title	tabke的标题
showTableToggleBtn	是指定table显示和不显示button的（default：true）
minColToggle	最小列数（default：1）
showToggleBtn	列的表示和非表示的button（default：true）
singleSelect	行是否可以多选（default：false）

Ajax设定

url	Ajax的URL
method	Ajax访问方式（default：post）
dataType	数据的类型（default：xml）
errormsg	访问失败时候的error message
usepager	是否使用翻页工具栏
nowrap	单元格数据量过大时，是否折叠
page	page表示数
total	总行数
sortname	排序的名字
sortorder	什么顺序（asc，desc）
query	检索的Key
qtype	检索的列名
rp	一个页表示的行数
useRp	是否有页表示行数变更的工具
rpOptions	页的行数信息（[10,15,20,25,40]）
pagestat	页面信息状态
procmsg	读取页信息时候的信息
no msg	没检索到信息时候的信息
autoload	自动加载
hideOnSubmit	隐藏提交button
blockOpacity	透明度指定

其他

1.colModel 列信息

display 显示信息

name 名字

width 宽度

sortable 是否可排序

align 居中状态

hide 是否隐藏

2.searchitems 检索信息

display 显示信息

name 名字

isdefault 默认显示

3.buttons Toolbar信息

name 名字

bclass css

onpress 点击事件

4.onToggleCol 列变更事件

5.onChangeSort 排序变更的事件

6.onSuccess 表示成功的事件

7.onSubmit 提交的事件

8. preProcess 数据处理的事件

相关推荐