JQuery的Flexigrid的API使用

来源：互联网发布：机电一体化网络教育编辑：程序博客网时间：2024/05/18 02:36

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

1.官网

http://flexigrid.info/

2.优势

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

3.实践

先书写HTML

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>  

然后添加变为奇迹代码

Js代码  
$('.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）resizabletable是否可以改变大小（default：true）title tabke的标题showTableToggleBtn是指定table显示和不显示button的（default：true）minColToggle 最小列数（default：1）showToggleBtn 列的表示和非表示的button（default：true）singleSelect行是否可以多选（default：false） Ajax设定urlAjax的URLmethod Ajax访问方式（default：post）dataType 数据的类型（default：xml）errormsg访问失败时候的error messageusepager是否使用翻页工具栏nowrap单元格数据量过大时，是否折叠pagepage表示数total总行数sortname排序的名字sortorder什么顺序（asc，desc）query 检索的Keyqtype检索的列名rp 一个页表示的行数useRp是否有页表示行数变更的工具rpOptions页的行数信息（[10,15,20,25,40]）pagestat页面信息状态procmsg读取页信息时候的信息no msg没检索到信息时候的信息autoload自动加载hideOnSubmit隐藏提交buttonblockOpacity透明度指定其他 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 数据处理的事件