jQuery flexigrid使用说明 (一、静态格式化表格)

最新推荐文章于 2020-05-13 22:01:54 发布

iteye_19583

最新推荐文章于 2020-05-13 22:01:54 发布

阅读量216

点赞数

文章标签： javascript ViewUI

一、静态太格式化表格

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>
  <link rel="stylesheet" type="text/css" href="./css/flexigrid.css">
  <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
  <script type="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>
 	<table class="flexme1">
		<thead>
			<tr>
				<th width="200">Col 1</th>
				<th width="150">Col 2</th>
				<th width="150">Col 3 is a long header name</th>
				<th width="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>

iteye_19583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery flexigrid使用说明 (一、静态格式化表格)

一、静态太格式化表格flexigrid的静态格式化表格是通过调用flexigrid();方法实现的首先在body标签中编写表格及数据,然后通过调用flexigrid()可以把普通表格格式化为flexigrid表，当然还可以添加标题以及按钮。同过 $('.trSelected', grid)可以取得选择的行，它返回的是一个已经选择所有行的数组。&lt;!DOCTYPE HTML PUBL...
复制链接

扫一扫