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                                                               数据处理的事件

 

 

                                                            

                                                           

                                                            

                                                          

                                                          

                                                         

                                                            

                                                                    

                                          

                                                  

                                                

                                                     

 

 

                                                                     

                                                              

                                                           

                                                             

                                                             

                                                                

                                                                   

                                                                     

                                                              

                                                            

                                                                 

                                                                  

                                                                     

                                                                 

                                                            

                                                              

                                                              

                                                                 

 

评论

1 楼 pairan1 2013-01-28  

没图没真相。