ASP.net 中使用Flexigrid详细教程之一，基本使用

关于在asp.net中使用Flexigrid的文章，codeproject上有两篇，但是对数据源方面用了XML，或者是使用了MVC架构，对于我们经常使用的三层架构检索数据的没有描述。而网上一些修改的版本也大多用的模拟数据。所以本人决定自己来写一个系列的几篇文章，来详细介绍一下flexigrid的使用。

首先给自己建立的www.vfish.info 作一个广告，喂鱼办公软件技术支持站。支持我，就来看看我的网站，你懂的。

下载：新版flexigrid及jquery 1.4.1(VS2010自带)，这里不说了。

1、简单使用（不涉及flexigrid格式化数据）

入门级：如果你已经使用Gridview或者Repeator拼接来显示数据，只需要几句代码就可以使用flexigrid的效果：

<script type="text/javascript">

        $("document").ready(function () {

            $('#gv').flexigrid(）

}）;

高手级：在 $('#gv').flexigrid(）的括号中加入列的信息，如下：

 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' }

                                         ],

sortname: "iso",

                    sortorder: "asc",

                    title: "我的测试效果",

                    width: 700,

                    height: 300,

                    usepager: false, showTableToggleBtn: false, rp: 10

 

以上内容加到（）中即可，colModel中的是列名。

需要注意的是，最好你对gridview或者你生成的表列宽进行固定宽度设置，这样就可以使用flexigrid中的大部分功能了，如下图：

 

下一节，复杂使用（需要格式化数据），本打算这节写完的，但是要下班了，明天继续吧。

有空来我的喂鱼网来看看吧www.vfish.info