如何快速入门jQuery Flexigrid 表格插件

 我来答
匿名用户
2015-12-07
展开全部
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插件下载使用,在实际应用中会根据具体业务要求做调整,读者可自行深入研究
纯洁的小树
2015-12-07 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:466万
展开全部
看官网的文档,然后就是自己动手使用!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
uieuidh
2015-12-06
知道答主
回答量:6
采纳率:0%
帮助的人:8.1万
展开全部
五菱宏ZX光s20013款h1.5显示as屏
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式