Excel样式表格单元格选择jQuery插件

当前位置:主页 > jQuery库 > 表格 > Excel样式表格单元格选择jQuery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
Excel样式表格单元格选择jQuery插件
分享:

    插件介绍

    tablecellsselection是一款效果类似Excel或GoogleDocs样式的表格单元格选择jQuery插件。该插件可以在点击某个或多个单元格时,使被选择的单元格高亮显示。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-04
    阅读:
简要教程

tablecellsselection是一款效果类似Excel或GoogleDocs样式的表格单元格选择jQuery插件。该插件可以在点击某个或多个单元格时,使被选择的单元格高亮显示。下面的两张图说明了使用插件前后的效果。

使用插件之前选择表格单元格的效果:

使用插件之前选择表格单元格的效果图

使用插件之后选择表格单元格的效果:

使用插件之后选择表格单元格的效果图

使用方法

在页面中引入tablecellsselection.css和jquery、tablecellsselection.js文件。

<link rel="stylesheet" href="path/to/tablecellsselection.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/tablecellsselection.js"></script>          
                
HTML结构

表格可以是任何普通的HTML表格。

<table class="table table-bordered" id="tablecellsselection">
      <thead>
          <tr>
              <th rowspan="2">Table summary</th>
              <th colspan="3">Group 1</th>
              <th colspan="3">Group 2</th>
          </tr>
          <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
              <th>Column 6</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <th>Property 1</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 2</th>
              <td>$10</td>
              <td rowspan="3">$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 3</th>
              <td>$10</td>
              <td colspan="3">$30</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 4</th>
              <td>$10</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 5</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
          <tr>
              <th>Property 6</th>
              <td>$10</td>
              <td>$20</td>
              <td>$30</td>
              <td>$40</td>
              <td>$50</td>
              <td>$60</td>
          </tr>
      </tbody>
  </table>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过tableCellsSelection方法来初始化该表格单元格选择插件。

jQuery(document).ready(function($) {
    $('#tablecellsselection').tableCellsSelection();
});
                

API

TableCellsSelection表格单元格选择插件有以下一些可用的API。

  • init:初始化表格,为表格添加需要的class类和事件监听。
  • destroy:销毁插件,移除相应的class类和事件监听。
  • selectedCells:以jQuey对象的形式返回被选择的单元格。
  • removeDocumentHtmlChanges:恢复所有被插件修改的HTML DOM元素。

例如:

// 在指定的表格中应用插件
//下面的语句相当于  $('.tables-with.selection').tableCellsSelection('init');
$('.tables-with.selection').tableCellsSelection();
var testTable = $('#test');

// 在table#test中选择单元格
var $selectedCells = $('#test').tableCellsSelection('selectedCells');

// 在获取表格的HTML内容之前清除有插件修改的标签
testTable.tableCellsSelection('removeDocumentHtmlChanges');

// 获取表格的HTML内容
$testTableContent = testTable.html();

// 恢复插件修改的HTML内容

// 销毁插件
testTable.tableCellsSelection('destroy');                  
                

tablecellsselection表格单元格选择插件的github地址为:https://github.com/likemusic/tablecellsselection

网友评论