如何快速入门jQuery Flexigrid 表格插件
推荐于2016-03-15 · 知道合伙人数码行家
可以叫我表哥
知道合伙人数码行家
采纳数：25897
获赞数：1464978
2010年毕业于北京化工大学北方学院计算机科学与技术专业毕业，学士学位，工程电子技术行业4年从业经验。
向TA提问 私信TA
关注
![]()
展开全部
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
本文重点介绍如何入门使用
工具/原料
Flexigrid 插件包
eclipse/Myeclipse/Visual Studio
方法/步骤
1
百度搜索jQuery Flexigrid 表格插件官网，进入之后如图
点击官网DownLoad进入Flexigrid 的GitHub主页，下载插件包
解压刚刚下载插件包，查看目录：
README.md 里面介绍了当前版本的一些特性和证书等信息
Css目录存放该插件需要的样式表，
Js目录存放插件的js文件
Demo即为作者提供的一些使用例子
使用：
(1)在插件包中自带了，几个例子，读者可以借鉴下:里面介绍了不同数据格式 （如：JSON，XML）如何绑定到flexgrid表格中，具体参考源代码学习
(2)如何根据自定义需求向表格中插入数据及控件
下面给出一个简单例子：需求如下图
步骤：a、利用eclipse/Myeclipse或Visual Studio(具体用什么工具根据喜好，也可以只用文本编辑器)创建一个web工程
b、工程中添加jquery插件，Flexigrid 插件
c、新建TestFlexigrid.html页面进行编辑,html代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Flexigrid</title>
<link rel="stylesheet" type="text/css" href="js/flexigrid/css/flexigrid.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/flexigrid/js/flexigrid.js"></script>
</head>
<body onload="init();">
<table id="tb_account1">
</table>
</body>
</html>
js部分代码：
<script>
function init() {
$('#tb_account1').flexigrid({
'url': false
, 'width': 500
, 'dataType': 'json'
, 'colModel': [
{ 'display': 'Name', 'name': 'Name', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Age', 'name': 'Age', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Option', 'name': 'Option', 'width': 300, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
]
, 'resizable': false
, 'striped': true
, 'singleSelect': true
, 'showToggleBtn': false
, 'minheight': 30
, 'height': 150
, 'preProcess': function (data) {
return data;
}
, 'doDbClick': function () {
}
});
var tbData1 = { 'total': 1, 'rows': [] };
for (var i = 0; i < 4; i++) {
tbData1['rows'].push({ 'cell': ["name", "10", "<button>Add</button> <button>Modify</button>"] });
}
$('#tb_account1').flexAddData(tbData1);
}
</script>
最终界面显示效果如下；
以上仅简单介绍Flexigrid插件下载使用，在实际应用中会根据具体业务要求做调整，读者可自行深入研究
本文重点介绍如何入门使用
工具/原料
Flexigrid 插件包
eclipse/Myeclipse/Visual Studio
方法/步骤
1
百度搜索jQuery Flexigrid 表格插件官网，进入之后如图
点击官网DownLoad进入Flexigrid 的GitHub主页，下载插件包
解压刚刚下载插件包，查看目录：
README.md 里面介绍了当前版本的一些特性和证书等信息
Css目录存放该插件需要的样式表，
Js目录存放插件的js文件
Demo即为作者提供的一些使用例子
使用：
(1)在插件包中自带了，几个例子，读者可以借鉴下:里面介绍了不同数据格式 （如：JSON，XML）如何绑定到flexgrid表格中，具体参考源代码学习
(2)如何根据自定义需求向表格中插入数据及控件
下面给出一个简单例子：需求如下图
步骤：a、利用eclipse/Myeclipse或Visual Studio(具体用什么工具根据喜好，也可以只用文本编辑器)创建一个web工程
b、工程中添加jquery插件，Flexigrid 插件
c、新建TestFlexigrid.html页面进行编辑,html代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Flexigrid</title>
<link rel="stylesheet" type="text/css" href="js/flexigrid/css/flexigrid.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/flexigrid/js/flexigrid.js"></script>
</head>
<body onload="init();">
<table id="tb_account1">
</table>
</body>
</html>
js部分代码：
<script>
function init() {
$('#tb_account1').flexigrid({
'url': false
, 'width': 500
, 'dataType': 'json'
, 'colModel': [
{ 'display': 'Name', 'name': 'Name', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Age', 'name': 'Age', 'width': 100, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
, { 'display': 'Option', 'name': 'Option', 'width': 300, 'sortable': false, 'align': 'left', 'dataAlign': 'left' }
]
, 'resizable': false
, 'striped': true
, 'singleSelect': true
, 'showToggleBtn': false
, 'minheight': 30
, 'height': 150
, 'preProcess': function (data) {
return data;
}
, 'doDbClick': function () {
}
});
var tbData1 = { 'total': 1, 'rows': [] };
for (var i = 0; i < 4; i++) {
tbData1['rows'].push({ 'cell': ["name", "10", "<button>Add</button> <button>Modify</button>"] });
}
$('#tb_account1').flexAddData(tbData1);
}
</script>
最终界面显示效果如下；
以上仅简单介绍Flexigrid插件下载使用，在实际应用中会根据具体业务要求做调整，读者可自行深入研究
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
