FlexiGrid是一个基于jQuery的网格组件，用于展示和操作数据，具有丰富的特性和自定义功能。这个使用手册将详细介绍如何使用FlexiGrid以及其主要属性。
一、FlexiGrid概述
FlexiGrid是一个轻量级的JavaScript插件，类似于Ext Grid，它允许用户通过Ajax动态加载数据，并可从HTML表格直接转化。FlexiGrid支持以下核心功能：
1. **调整列宽**：用户可以自由调整列的宽度。
2. **合并列标题**：在某些情况下，可以合并列标题以创建更复杂的头部布局。
3. **自定义查找**：用户可以自定义搜索条件，对数据进行筛选。
4. **隐藏列**：不需显示的列可以被隐藏，以优化界面空间。
5. **隔行变色**：行间颜色交替，提高可读性。
6. **行扩展事件**：点击行时触发扩展事件，可以显示更多详细信息。
7. **动态注册外部参数**：可以动态添加或修改Grid的参数，以适应不同的需求。
8. **分页**：支持多页展示大量数据，方便用户浏览。
9. **排序**：用户可以按列对数据进行升序或降序排序。
10. **显示/隐藏表格**：根据需要，可以轻松地显示或隐藏整个表格。
二、环境准备
要使用FlexiGrid，首先需要从其官方网站（http://www.flexigrid.info/）下载最新版本的库文件。解压后，你会得到一个包含CSS样式表、JavaScript文件和图片资源的文件结构。CSS文件用于设置表格的外观，JS文件则是FlexiGrid的核心脚本。
三、设置FlexiGrid
1. 在IDE如MyEclipse中创建一个新的Web项目，命名为flexiGridDemo。
2. 将下载的FlexiGrid文件夹中的所有内容复制到Web项目的WebRoot目录下。
3. 修改index.jsp文件：
a. 引入FlexiGrid的CSS样式表和jQuery库：
```html
<link href="css/flexigrid.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexigrid.js" type="text/javascript"></script>
```
b. 创建FlexiGrid容器：
```html
<div id="ptable" style="margin: 10px">
<table id="flexTable" style="display: none"></table>
</div>
```
c. 编写JavaScript代码初始化FlexiGrid：
```javascript
$(document).ready(function(){
var grid=$("#flexTable").flexigrid({
width: 760,
height: 280,
url: 'flexGridServlet.do',
dataType: 'json',
colModel : [
{display: '编号', name : 'id', width : 50, sortable : true, align: 'center', hide: false, toggle : false},
{display: '工作名称', name : 'job_name', width : 250, sortable : false, align: 'center'},
{display: '工作地址', name : 'work_address', width : 100, sortable : true, align: 'center'},
{display: '工资', name : 'salary', width : 60, sortable : true, align: 'right', process: formatMoney},
{display: '日期', name : 'date', width : 120, sortable : true, align: 'center'},
{display: '语言', name : 'language', width : 80, sortable : true, align: 'center'}
],
buttons : [
// ...按钮定义
]
});
});
```
四、配置及使用
在初始化FlexiGrid时，可以通过`colModel`定义列的属性，如宽度、是否可排序、对齐方式等。`buttons`数组则用于定义工具栏上的按钮及其行为。例如，`onpress`属性指定了按钮被点击时执行的函数，如`toolbarItem`和`toolbarIt`。
五、高级用法
除了基本配置外，FlexiGrid还支持其他高级特性，例如：
1. **自定义列处理**：在`colModel`中，可以定义`process`属性，指定一个函数来处理特定列的数据，如`formatMoney`可能是将数字格式化为货币值。
2. **Ajax数据源**：通过设置`url`和`dataType`，可以从服务器获取JSON或其他格式的数据。
3. **分页参数**：可以通过`pgbuttons`和`pginput`设置分页条按钮数量和输入框，以及`rp`定义每页显示的记录数。
4. **事件监听**：可以监听`onBeforeLoad`、`onLoadSuccess`等事件，实现数据加载前后的自定义操作。
FlexiGrid提供了一套完整的解决方案，用于在网页上展示和管理表格数据。通过灵活的配置和丰富的API，开发者可以根据实际需求定制出满足各种场景的表格组件。
心如水1112015-04-16挺全面的，很好
