• 转载：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.         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> 
  • 相关阅读:
    SpringMVC获取参数的几种方式
    java实现邮箱发送邮件功能
    java实现屏幕截屏功能
    java生成验证码结合springMVC
    lodash实践之依据规则处理对象
    js深入之实现call、apply和bind
    js内存深入学习（二）
    js内存深入学习（一）
    web缓存策略之HTTP缓存大全
    Service Worker MDN英文笔记
  • 原文地址：https://www.cnblogs.com/summer_adai/p/2797149.html
Copyright © 2020-2023  润新知