JQuery FlexiGrid 插件全面配置与使用指南

需积分: 3 56 浏览量更新于2024-09-16 1 收藏 194KB DOC 举报

"这篇文档详细介绍了如何使用JQuery插件FlexiGrid进行完全配置和实际应用。FlexiGrid是一款强大的数据网格插件，提供灵活的数据展示和操作功能。" 在Web开发中，JQuery插件FlexiGrid是一个非常实用的工具，它允许开发者创建具有分页、排序、搜索和编辑功能的动态表格。以下将详细介绍FlexiGrid的配置和使用步骤：首先，要使用FlexiGrid，你需要从官方网站（http://www.flexigrid.info/）下载插件包。解压缩后，你会看到一个名为`flexigrid`的文件夹，其中包含所有必要的CSS样式表和JavaScript文件。在开始项目之前，确保将`flexigrid`文件夹中的所有文件复制到Web项目的`WebRoot`目录下。这样，浏览器在加载页面时能够正确找到所需的资源。接下来，创建一个新的JSP页面。在`<body>`标签内，需要一个用于显示FlexiGrid的HTML表格，例如： ```html <table id="flex1" style="display:none"></table> ``` 这里`id="flex1"`是必须的，它将被JavaScript代码用来绑定FlexiGrid插件。设置`display:none`是为了在初始化插件之前隐藏表格。然后，引入FlexiGrid所需的JavaScript和CSS文件。通常，这会包含在页面的`<head>`部分，如下所示： ```html <link rel="stylesheet" type="text/css" href="path/to/flexigrid.css" /> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/flexigrid.js"></script> ``` 确保路径正确无误，指向下载的FlexiGrid文件。初始化FlexiGrid的JavaScript代码通常放在页面底部，或者在`$(document).ready()`函数中，以确保在DOM加载完成后再执行。以下是一个基本的初始化示例： ```javascript $("#flex1").flexigrid({ url: '../ReleaseInfoServlet?hidden=manage', dataType: 'json', colModel: [ { display: '信息编号', name: 'RINO', width: 50, sortable: true, align: 'center', hide: false }, { display: '信息标题', name: 'RITITLE', width: 250, sortable: true, align: 'center' }, { display: '信息类别', name: 'IC.ICNAME', width: 100, sortable: true, align: 'center' }, // ... 其他列模型配置 ], // 其他配置选项... }); ``` 这里的`url`参数指定了获取数据的服务器端接口，`dataType`定义了数据类型，通常是JSON。`colModel`数组定义了表格的列信息，包括列名、宽度、是否可排序、对齐方式等。通过调整`flexigrid`的配置参数，可以实现各种自定义功能，如分页大小、搜索条件、编辑模式等。例如，你可以添加`pager`参数来启用分页，或设置`usepager`为`true`。此外，`onSuccess`和`onError`回调函数可用于处理服务器响应。 JQuery插件FlexiGrid为开发者提供了强大且灵活的表格管理功能，通过简单的配置即可轻松实现数据的展示和操作。虽然这篇介绍较为基础，但对于初学者来说，已经足够开始探索FlexiGrid的更多可能性。

JQuery 插件

FlexiGrid 之完全配置与使用

关键字

自己再做这个的时候也是找了很多资料但网上搜索了很多资料没有介绍的很

全的

鄙人就在此献丑一下来全面的介绍一下  插件的配置和实用

本人很菜各位大拿看了这么菜的文章就不要拍砖了一笑而过好吗谢谢合

作

首先去下载 

下载完成后解压开有 !"# 和  两个文件夹

主要使用  里面的文件

 文件夹下文件如下



准备工作完成后

真正工作开始了

在 $%& 下新建 '(%

把  包下所有的文件拷贝到 '()下

新建*& 页面

( 体中

加入

& 代码

+ ,-(./0+0.&/0&-01,-(1..

做完  控件的显示容器没有则不会显示控件

页面引入控件代码

-2-&% 代码

+ ,-(./0+0.&/0&-01,-(1..

3 ............,./00./00.-4/00.2-

/00.1..

5 ............,&%1..

下载后可阅读完整内容，剩余9页未读，立即下载

古市轩

粉丝: 52
资源: 13

JQuery FlexiGrid 插件全面配置与使用指南

JQuery_插件FlexiGrid_之完全配置与使用.doc

jquery表格插件Flexigrid

jquery 表格插件 Flexigrid

jquery grid插件 Flexigrid + servlet

jquery插件之flexigrid篇

jquery插件之flexigrid学习实例

jquery插件之flexigrid学习实例-jar包

jQuery插件flexigrid使用总结--进一步优化

jquery插件FlexiGrid的使用（已更新）

Jquery flexigrid使用

最新资源