使用方法：
- 引入相关文件：在页面中引入 jQuery 库和 Flexigrid 插件的 JavaScript 和 CSS 文件。
- 准备 HTML 结构：在 HTML 文件中创建一个
<table>元素，作为 Flexigrid 的容器。 - 初始化 Flexigrid：使用 JavaScript 代码初始化 Flexigrid，定义表格的列和其他相关配置项。
示例代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Flexigrid Example</title>
<link rel=”stylesheet” href=”path/to/flexigrid.css”>
<script src=”path/to/jquery.js”></script>
<script src=”path/to/flexigrid.js”></script>
</head>
<body>
<table id=”flexigrid”></table>
<script>
$(document).ready(function(){
$(“#flexigrid”).flexigrid({
url: ‘your_data_url’, // 数据源的 URL
dataType: ‘json’, // 数据类型
colModel : [ // 列模型
{display: ‘ID’, name : ‘id’, width : 80, sortable : true, align: ‘center’},
{display: ‘Name’, name : ‘name’, width : 150, sortable : true, align: ‘left’},
// 其他列的定义
],
searchitems : [ // 搜索项
{display: ‘ID’, name : ‘id’},
{display: ‘Name’, name : ‘name’, isdefault: true},
// 其他搜索项的定义
],
sortname: “id”, // 默认排序列
sortorder: “asc”, // 默认排序顺序
usepager: true, // 是否使用分页器
title: ‘Data List’, // 表格标题
useRp: true, // 是否显示每页显示条数选择框
rp: 10, // 默认每页显示的条数
showTableToggleBtn: true // 是否显示表格折叠按钮
});
});
</script>
</body>
</html>
方法
| 参数 | 描述 |
|---|---|
| title | 表格标题 |
| url | 从服务器加载数据的 URL |
| method | 从服务器加载数据时使用的 HTTP 方法，如 GET 或 POST |
| dataType | 从服务器加载数据时期望的数据类型，如 json、xml 等 |
| colModel | 描述表格列的数组，包括列名、数据字段、是否排序等信息 |
| sortname | 默认排序的列名 |
| sortorder | 默认排序顺序，可以是 ‘asc’ 或 ‘desc’ |
| usepager | 是否启用分页功能 |
| rp | 每页显示的行数 |
| showTableToggleBtn | 是否显示表格切换按钮 |
| autoload | 是否在初始化时自动加载数据 |
| resize | 是否允许用户调整表格大小 |
| resizeWidth | 是否允许用户调整列宽度 |
| singleSelect | 是否只允许选择单行 |
| nowrap | 是否禁止自动换行 |
| height | 表格的高度 |
| width | 表格的宽度 |
| stripped | 是否使用斑马线样式 |
| showToggleBtn | 是否显示表格切换按钮 |
| onChangeSort | 排序改变时的回调函数 |
| onSuccess | 数据加载成功时的回调函数 |
| onError | 数据加载失败时的回调函数 |
flexDeleteRow(rowIndex: Integer)
flexSort
flexSearch
flexResize
flexAddRow
flexUpdateRow