第一步
当然是到flexgrid的官方网站上下载它最新的包以及 demo了
目前的最新网站为：http://www.flexigrid.info/
在googlecode上的下载页面为：http://code.google.com/p/flexigrid/downloads/list
直接下载链接地址为：http://flexigrid.googlecode.com/files/flexigrid.zip
下载完的zip中有两个文件夹:__MACOSX和flexigrid
我们需要的就是flexigrid这个文件夹。
第二步，简单应用：
将flexigrid文件夹直接拷贝到我们新建的web project下的WebContent目录，由于Demo中动态加载的数据都是由PHP实现的，如果咱们想改写成java的，还需要自己修改一下。
直接在拷贝的flexigrid目录下建立我们学习测试的demo文件夹myflexgrid。
最简单的flexgird应用：
在myflexgrid下建立一个新的jsp页面，在其head标签内添加如下代码：
<link rel="stylesheet" href="../css/flexigrid/flexigrid.css"
type="text/css"></link>
<script type="text/javascript" src="../lib/jquery/jquery.js"></script>
<script type="text/javascript" src="../flexigrid.js"></script>
按照官方的例子，只需要在现成的table上(包含thead,和tbody)加上如下代码：
$().ready(function() {
$('.flex1').flexigrid( {
});
});
这样简单应用就完成了。
第三步：自己定义表头
将上述例子中的thead全部删除，修改js代码：
$().ready(function() {
$('.flex1').flexigrid( {
height : 'auto',
width : 'auto',
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
} ]
});});
这里主要是增加了colModel，这个就是定义表头的参数。看下实现的页面，我们就可以发现表头是由JS自动生成了。
以后我们需要调整表格的表现形式，就可以像以上的方法添加一些参数在flexigrid方法。
最后贴上页面例子的完整代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>flexgrid Test</title>
<link rel="stylesheet" href="../css/flexigrid/flexigrid.css"
type="text/css"></link>
<script type="text/javascript" src="../lib/jquery/jquery.js"></script>
<script type="text/javascript" src="../flexigrid.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.flex1').flexigrid( {
height : 'auto',
width : 'auto',
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
} ]
});
});
</script>
</head>
<body>
<table class="flex1">
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
【个人博客】 Java、技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络等_CSLearning
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
这是一个基于全卷积神经网络的语音识别系统_DFCNN-master
一个可以运行在 vercel 上的 go 语言框架，基于 g
基于一维卷积神经网络（1D-CNN）的多元时间序列分类_TSC-CNN
网鼎杯
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
OrinNX平台JetPack 5.1.4-R35.6.0版本相机相关补丁1
MD5EditTools，MD5修改工具.exe
原文链接：https://blog.csdn.net/zsd12379/article/details/141281454 包含功能： 业主管理：实现业主信息的录入、编辑、查询与删除，确保业主数据的准确性和完整性。 维修员管理：管理维修员的基本信息、工作状态和派工情况，优化维修资源配置。 楼宇信息管理：记录并维护楼宇的基本信息、设施详情及状态，支持快速查询与更新。 业主投诉管理：接收并处理业主的投诉信息，跟踪处理进度，提升业主满意度。 业主报修管理：提供便捷的报修渠道，记录报修详情，实现报修请求的有效管理。 报修处理管理：分配报修任务给维修员，跟踪报修进度，确保报修问题及时解决。 缴费信息管理：管理业主的缴费记录，包括物业费、维修基金等，支持费用查询与提醒。 建议反馈管理：收集业主的建议与反馈，促进物业服务的持续改进和优化。
<项目介绍> - 该项目是为了研究基于深度卷积神经网络的图像去噪算法，是利用DnCNN模型，但是为了比较该算法的效果，另外实现了四种传统的图像去噪算法（均值滤波、中值滤波、非局部均值滤波NLM和三维块匹配滤波BM3D）作为对照组 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
2023-04-06-项目笔记-第三百零三阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.301局变量的作用域_301- 2024-10-31
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
High_net_worth.dta