转载：jQuery flexigrid使用说明 (一、静态格式化表格)
2012-12-01 11:37
429 查看
转载地址：http://blog.csdn.net/guirudaoge/article/details/7044181
一、静态太格式化表格
flexigrid的静态格式化表格是通过调用 flexigrid();方法实现的
首先在body标签中编写表格及数据,然后通过调用flexigrid()可以把普通表格格式化为flexigrid表，当然还可以添加标题以及按钮。同过 $('.trSelected', grid)可以取得选择的行，它返回的是一个已经选择所有行的数组。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 静态flexigrid </title>
<linkrel="stylesheet"type="text/css"href="./css/flexigrid.css">
<scripttype="text/javascript"src="./js/jquery-1.6.2.min.js"></script>
<scripttype="text/javascript"src="./js/flexigrid.js"></script>
<script>
$(document).ready(function(){
$('.flexme1').flexigrid({
buttons : [
{name: '添加', bclass: 'add',onpress : test},
{name: '删除', bclass: 'delete',onpress : test},
{separator: true}
],
title: '静态flexigrid',
showTableToggleBtn: true,
width: 750,
height: 300
});
});
function test(com, grid)
{
if (com == '删除')
{
confirm('Delete ' + $('.trSelected', grid).length + ' items?')
}
else if (com == '添加')
{
$("#addMsg").show(2000);
alert('Add New Item');
}
}
</script>
</head>
<body>
<tableclass="flexme1">
<thead>
<tr>
<thwidth="200">Col 1</th>
<thwidth="150">Col 2</th>
<thwidth="150">Col 3 is a long header name</th>
<thwidth="200">Col 4</th>
</tr>
</thead>
<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>
一、静态太格式化表格
flexigrid的静态格式化表格是通过调用 flexigrid();方法实现的
首先在body标签中编写表格及数据,然后通过调用flexigrid()可以把普通表格格式化为flexigrid表，当然还可以添加标题以及按钮。同过 $('.trSelected', grid)可以取得选择的行，它返回的是一个已经选择所有行的数组。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 静态flexigrid </title>
<linkrel="stylesheet"type="text/css"href="./css/flexigrid.css">
<scripttype="text/javascript"src="./js/jquery-1.6.2.min.js"></script>
<scripttype="text/javascript"src="./js/flexigrid.js"></script>
<script>
$(document).ready(function(){
$('.flexme1').flexigrid({
buttons : [
{name: '添加', bclass: 'add',onpress : test},
{name: '删除', bclass: 'delete',onpress : test},
{separator: true}
],
title: '静态flexigrid',
showTableToggleBtn: true,
width: 750,
height: 300
});
});
function test(com, grid)
{
if (com == '删除')
{
confirm('Delete ' + $('.trSelected', grid).length + ' items?')
}
else if (com == '添加')
{
$("#addMsg").show(2000);
alert('Add New Item');
}
}
</script>
</head>
<body>
<tableclass="flexme1">
<thead>
<tr>
<thwidth="200">Col 1</th>
<thwidth="150">Col 2</th>
<thwidth="150">Col 3 is a long header name</th>
<thwidth="200">Col 4</th>
</tr>
</thead>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- element框架中表格的筛选功能使用说明（转载）
- 基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明
- Delphi中Format的字符串格式化使用说明(转载 http://hi.baidu.com/test__123/blog/item/e3bba1599d717a2d2834f092.html)
- 基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
- 使用jQuery实现页面表格中相同内容的行或列合并[转载]
- Delphi中Format的字符串格式化使用说明(转载)
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一）Ajax异步表格
- 基于jQuery的GridView-FlexiGrid的使用和改造（1）--如何使用，完全参数说明
- Delphi 中Format的字符串格式化使用说明(转载http://hi.baidu.com/test__123/blog/item/e3bba1599d717a2d2834f092.html)
- Java笔记——继承 && 静态成员使用说明
- 静态文本超链接编程暨CStaticLink类使用说明
- jQuery验证控件jquery.validate.js使用说明+中文API
- jQuery插件pagination参数使用说明
- jQuery验证控件jquery.validate.js使用说明+中文API
- 使用Jquery的ajax方式实现对表格的删除和修改
- [转载]ASIHTTPRequest类库简介和使用说明
- JQuery UI Draggable插件详细使用说明
- jQuery验证控件jquery.validate.js使用说明+中文API
- JQuery Highcharts图表控件使用说明