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

转载地址：http://blog.csdn.net/guirudaoge/article/details/7044181

 

 

一、静态太格式化表格

flexigrid的静态格式化表格是通过调用 flexigrid();方法实现的

首先在body标签中编写表格及数据,然后通过调用flexigrid()可以把普通表格格式化为flexigrid表，当然还可以添加标题以及按钮。同过 $('.trSelected', grid)可以取得选择的行，它返回的是一个已经选择所有行的数组。

 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4.   <title> 静态flexigrid </title> 
  5.   <linkrel="stylesheet"type="text/css"href="./css/flexigrid.css"> 
  6.   <scripttype="text/javascript"src="./js/jquery-1.6.2.min.js"></script> 
  7.   <scripttype="text/javascript"src="./js/flexigrid.js"></script> 
  8.   <script> 
  9.   $(document).ready(function(){ 
  10.     $('.flexme1').flexigrid({ 
  11.         buttons : [ 
  12.             {name: '添加', bclass: 'add',onpress : test}, 
  13.             {name: '删除', bclass: 'delete',onpress : test}, 
  14.             {separator: true} 
  15.         ], 
  16.  
  17.         title: '静态flexigrid', 
  18.         showTableToggleBtn: true, 
  19.         width: 750, 
  20.         height: 300 
  21.     }); 
  22.   }); 
  23.   function test(com, grid)  
  24.   { 
  25.     if (com == '删除')  
  26.     { 
  27.         confirm('Delete ' + $('.trSelected', grid).length + ' items?') 
  28.     }  
  29.     else if (com == '添加')  
  30.     { 
  31.         $("#addMsg").show(2000); 
  32.         alert('Add New Item'); 
  33.     } 
  34.    } 
  35.      
  36.   </script> 
  37. </head> 
  38.  
  39. <body> 
  40.     <tableclass="flexme1"> 
  41.         <thead> 
  42.             <tr> 
  43.                 <thwidth="200">Col 1</th> 
  44.                 <thwidth="150">Col 2</th> 
  45.                 <thwidth="150">Col 3 is a long header name</th> 
  46.                 <thwidth="200">Col 4</th> 
  47.             </tr> 
  48.         </thead> 
  49.         <tbody> 
  50.             <tr> 
  51.                 <td>This is data 1 with overflowing content</td> 
  52.                 <td>This is data 2</td> 
  53.                 <td>This is data 3</td> 
  54.                 <td>This is data 4</td> 
  55.             </tr> 
  56.             <tr> 
  57.                 <td>This is data 1</td> 
  58.                 <td>This is data 2</td> 
  59.                 <td>This is data 3</td> 
  60.                 <td>This is data 4</td> 
  61.             </tr> 
  62.             <tr> 
  63.                 <td>This is data 1</td> 
  64.                 <td>This is data 2</td> 
  65.                 <td>This is data 3</td> 
  66.                 <td>This is data 4</td> 
  67.             </tr> 
  68.             <tr> 
  69.                 <td>This is data 1</td> 
  70.                 <td>This is data 2</td> 
  71.                 <td>This is data 3</td> 
  72.                 <td>This is data 4</td> 
  73.             </tr> 
  74.             <tr> 
  75.                 <td>This is data 1</td> 
  76.                 <td>This is data 2</td> 
  77.                 <td>This is data 3</td> 
  78.                 <td>This is data 4</td> 
  79.             </tr> 
  80.             <tr> 
  81.                 <td>This is data 1</td> 
  82.                 <td>This is data 2</td> 
  83.                 <td>This is data 3</td> 
  84.                 <td>This is data 4</td> 
  85.             </tr> 
  86.             <tr> 
  87.                 <td>This is data 1</td> 
  88.                 <td>This is data 2</td> 
  89.                 <td>This is data 3</td> 
  90.                 <td>This is data 4</td> 
  91.             </tr> 
  92.             <tr> 
  93.                 <td>This is data 1</td> 
  94.                 <td>This is data 2</td> 
  95.                 <td>This is data 3</td> 
  96.                 <td>This is data 4</td> 
  97.             </tr> 
  98.             <tr> 
  99.                 <td>This is data 1</td> 
  100.                 <td>This is data 2</td> 
  101.                 <td>This is data 3</td> 
  102.                 <td>This is data 4</td> 
  103.             </tr> 
  104.             <tr> 
  105.                 <td>This is data 1</td> 
  106.                 <td>This is data 2</td> 
  107.                 <td>This is data 3</td> 
  108.                 <td>This is data 4</td> 
  109.             </tr> 
  110.             <tr> 
  111.                 <td>This is data 1</td> 
  112.                 <td>This is data 2</td> 
  113.                 <td>This is data 3</td> 
  114.                 <td>This is data 4</td> 
  115.             </tr> 
  116.             <tr> 
  117.                 <td>This is data 1</td> 
  118.                 <td>This is data 2</td> 
  119.                 <td>This is data 3</td> 
  120.                 <td>This is data 4</td> 
  121.             </tr> 
  122.         </tbody> 
  123.     </table> 
  124. </body> 
  125. </html> 
posted @ 2012-12-01 11:37  summer0311  阅读(705)  评论(0)  编辑  收藏  举报