`

jquery的表格插件,选择显示列

    博客分类:
  • tool
阅读更多
git clone可以获取源码,选择显示列。
https://github.com/lingceng/jquery.column.picker



$("table#monthTable").pickout({
      picked:[0, 1, 2] 
 }); 




demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Columns Pick</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../jquery.column.picker.js"></script>
    <script type="text/javascript"> 
       jQuery(function($) {
                      
          $("button#winter").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[9, 10, 11] 
              });              
          });

          $("button#spring").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[0, 1, 2] 
              });              
          });

          $("button#favorite").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[5, 6, 7] 
              });              
          });
       });
    </script>
  </head>

  <body>
    <h1>pick columns</h1>
    <div>
            <button id="winter">winter</button>
            <button id="spring">spring</button>
            <button id="favorite">favorite</button>
    </div>
    <div>
    <table id="monthTable">
	    <thead>
              <tr>
               <th>January</th>
               <th>February</th>
               <th>March</th>
               <th>April</th>
               <th>May</th>
               <th>June</th>
               <th>July</th>
               <th>August</th>
               <th>Septempber</th>
               <th>October</th>
               <th>November</th>
               <th>December</th>
              </tr>
  	  </thead>
      
      <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
	    </tbody>
      </div>
    </table>
  </body>
</html>
分享到:
评论

相关推荐

    强大的jQuery表格插件

    - **DataTables**:DataTables是最受欢迎的jQuery表格插件之一,支持排序、过滤、分页、列选择等多种功能,并且有多种语言和主题可供选择。 - **Handsontable**:Handsontable是一个强大的交互式表格,适合数据编辑...

    Datatables jquery表格插件

    Datatables是一款基于jQuery的开源表格插件,广泛应用于网页数据展示和管理。它以其丰富的功能、高度的灵活性和良好的社区支持而备受青睐。这个插件的主要目标是将静态或者动态生成的HTML表格转变为具有强大交互性的...

    原创jQuery表格插件

    【原创jQuery表格插件】是一种基于JavaScript库jQuery开发的组件,旨在增强网页中的表格功能,使其具有更丰富的交互性和灵活性。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax...

    jQuery表格头和列固定插件

    **jQuery表格头和列固定插件——RWD Table** 在网页设计中,处理大型数据表格时,保持表头和特定列在用户滚动时可见是非常重要的功能。这有助于提高用户体验,尤其是当表格包含大量数据,需要用户上下左右滚动时。`...

    jQuery表格插件仿Excel表格排序修改效果

    在本主题“jQuery表格插件仿Excel表格排序修改效果”中,我们将深入探讨如何利用jQuery实现类似Excel的表格排序功能,并对其进行优化和定制。 首先,我们需要了解jQuery表格插件的基础。常见的jQuery表格插件有...

    jQuery表格可拖动调整列宽度大小

    总结起来,jQuery表格可拖动调整列宽度大小是一项涉及DOM操作、事件处理、样式修改和可能的动画效果的技术。通过理解和应用这些知识点,开发者可以创建出更用户友好的网页应用,提升用户的交互体验。在实际项目中,...

    37款开源jQuery表格插件

    ### 37款开源jQuery表格插件概览 在网页应用开发中,表格常常被用于展示数据,使得信息更加清晰直观。随着Web前端技术的发展,尤其是JavaScript库的日益完善,开发者们有了更多选择来实现这一功能。其中,jQuery...

    DataTables - jQuery表格插件

    DataTables是一款基于jQuery库的强大的表格插件,它极大地增强了HTML表格的功能,提供了丰富的排序、搜索、分页、列操作等交互性功能。这个插件的设计目标是为开发者提供一个高度可定制、易于使用的工具,使得网页上...

    jquery表格树插件

    **jQuery表格树插件详解** 在网页开发中,表格数据的展示经常需要处理大量结构化的信息,而将这些数据组织成树形结构可以更清晰地展现层级关系,提高用户的浏览体验。`jQuery表格树插件`就是为此目的设计的工具,它...

    jquery插件colResizable实现表格列可拖拽伸缩表格大小

    本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能,从而使用户可以根据需要调整表格的列宽,提高用户界面的可定制性和交互性。 colResizable是一个轻量级的jQuery插件,它为HTML表格...

    jquery插件--表格分页

    3. bootstrap-table:基于Bootstrap框架的表格插件,具有分页、排序、过滤、固定列、导出数据等功能,适合与Bootstrap设计风格的项目搭配使用。 4. Paginate.js:一个轻量级的分页插件,易于集成,提供了基本的分页...

    jquery表格插件jqgrid

    **jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件,它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展,专为处理大量数据和实现复杂的表格...

    jQuery grid view plugin - jQuery表格插件

    jQuery Grid View插件是一种强大的工具,它允许开发者在网页上创建功能丰富的表格,提供数据的显示、排序、分页和过滤等功能。这个插件基于流行的JavaScript库jQuery,它简化了前端开发过程,使得即便是初学者也能...

    jQuery表格插件(ayGrid)

    ayGrid是一个基于jQuery的表格插件,可实现在表格上在线修改、增加、删除、保存数据!其中,单元格的编辑可以实现CheckBox、ComboBox、Input的输入方式。表格数据传输基于JSON。

    可展开列的jQuery表格插件

    jQuery作为一款广泛使用的JavaScript库,提供了许多插件来简化开发过程,其中之一便是"可展开列的jQuery表格插件"。这款插件允许我们在网页上创建交互式表格,用户可以点击列头以查看或隐藏详细信息,从而提高用户...

    jqGrid插件--JQuery表格插件

    jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...

    jquery表格插件带分页动态数据表格代码

    本项目涉及的是使用jQuery实现的一个带有分页功能的动态数据表格插件,该插件的设计灵感来源于Excel,允许用户进行类似Excel的操作,如数据编辑和排序。 首先,`index.html`是项目的主页面文件,它包含了HTML结构,...

    jquery表格插件Flexigrid

    综上所述,Flexigrid是一个强大且灵活的jQuery表格插件,它提供了丰富的功能和高度的可定制性,适合用于构建数据密集型的Web应用。掌握上述知识点,将有助于你有效地使用和优化Flexigrid,创建出符合用户需求的高效...

    jQuery表格插件无刷新表格控制分页显示数据

    本教程将详细讲解如何利用jQuery实现一个无刷新表格插件,以便于在网页中控制分页显示数据,提高用户体验。 首先,理解"无刷新"的概念至关重要。传统的网页操作,如点击分页按钮,通常会触发页面整体刷新,这可能...

Global site tag (gtag.js) - Google Analytics