JQuery FlexiGrid全配置与实战教程：从入门到高级

需积分: 13 194 浏览量更新于2024-09-11 收藏 194KB DOC 举报

本文将详细介绍jQuery FlexiGrid插件的完全配置与使用方法，该插件是一款强大的表格组件，适用于网页开发中实现动态、可定制的网格布局。作者在分享自己的学习经历时提到，尽管网络上能找到一些资料，但缺乏全面的教程，因此他决定整理一份详尽的指南。首先，要使用FlexiGrid，你需要从官方网站 <http://www.flexigrid.info/> 下载最新版本的插件，并解压包含`__MACOSX`和`flexigrid`两个主要文件夹的压缩包。重点在于`flexigrid`文件夹内的内容，其中包含了插件的JavaScript和CSS文件。在实际项目中，作者建议在MyEclipse创建一个新的Web项目，然后将`flexigrid`目录下的所有文件复制到WebRoot目录下，以确保它们能被Web服务器访问。接着，在HTML页面中，创建一个用于显示FlexiGrid的容器，例如： ```html <body> <table id="flex1" style="display:none;"></table> </body> ``` 这个隐藏的`<table>`元素是FlexiGrid的基础，只有当它存在时，插件才会显示相应的网格。页面上还需要引入必要的脚本，包括FlexiGrid的JavaScript库和数据处理的设置。这里引用的脚本如下： ```javascript <script> $("#flex1").flexigrid({ url: '../ReleaseInfoServlet?hidden=manage', // 数据请求URL dataType: 'json', // 数据类型，此处为JSON colModel: [ { display: '信息编号', name: 'RINO', width: 50, sortable: true, align: 'center', hide: false }, // 其他列定义... ] }); </script> ``` `colModel`数组定义了每个列的展示内容（`display`）、数据字段（`name`）、宽度、排序功能、对齐方式以及是否隐藏等属性。你需要根据实际数据结构和需求来调整这些配置。此外，还提到在表单中添加了一个隐藏输入框，用于传递额外的参数，如`<input type="hidden" id="hidden" name="hidden" value="null" />`。最后，作者提醒读者，虽然他在文章中表现谦虚，但希望大家在阅读过程中能够理解和应用这些配置，并表示希望其他开发者不要因为文章水平不高而轻易否定，只需一笑而过即可。通过这篇文章，读者可以了解到如何在实际项目中正确集成和配置jQuery 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页未读，立即下载

keven

粉丝: 29
资源: 58

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使用

最新资源