如何将click事件附加到handsontable row / column header？

Question

我正在尝试实现某些功能，例如excel，单击行/列标题以选择整个行/列，我想我应该将click事件附加到所有行/列标题，所以我尝试在核心中添加以下代码。 js，但它从来没有被触发过：

    this.click = function() {
        alert("Clicked!");
    };

那么我应该从哪里开始呢？

感谢您的帮助。

Answer 1

由我自己根据Handsontable 0.9.9实现：

From 5e2e8f51374741432d34624eb86edce6a802bf80 Mon Sep 17 00:00:00 2001
From: Xinfeng Li <xinfli@gmail.com>
Date: Wed, 17 Jul 2013 12:04:21 +0800
Subject: [PATCH 1/1] Implement select entire row/column when click on
 row/column header.

---
 src/3rdparty/walkontable/src/event.js    |  5 ++++
 src/3rdparty/walkontable/src/settings.js |  3 +-
 src/pluginHooks.js                       |  3 ++
 src/tableView.js                         | 50 ++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/3rdparty/walkontable/src/event.js b/src/3rdparty/walkontable/src/event.js
index e150fef..a4cbb09 100644
--- a/src/3rdparty/walkontable/src/event.js
+++ b/src/3rdparty/walkontable/src/event.js
@@ -17,6 +17,11 @@ function WalkontableEvent(instance) {
         that.instance.getSetting('onCellMouseDown', event, cell.coords, cell.TD);
       }
     }
+    else if (cell.TD && cell.TD.nodeName === 'TH') {
+      if (that.instance.hasSetting('onHeaderMouseDown')) {
+        that.instance.getSetting('onHeaderMouseDown', event, cell.coords, cell.TD);
+      }
+    }
     else if (that.wtDom.hasClass(event.target, 'corner')) {
       that.instance.getSetting('onCellCornerMouseDown', event, event.target);
     }
diff --git a/src/3rdparty/walkontable/src/settings.js b/src/3rdparty/walkontable/src/settings.js
index 35eb736..b16e4cf 100644
--- a/src/3rdparty/walkontable/src/settings.js
+++ b/src/3rdparty/walkontable/src/settings.js
@@ -41,8 +41,9 @@ function WalkontableSettings(instance, settings) {

     //callbacks
     onCellMouseDown: null,
+    onHeaderMouseDown: null,
     onCellMouseOver: null,
-//    onCellMouseOut: null,
+    //onCellMouseOut: null,
     onCellDblClick: null,
     onCellCornerMouseDown: null,
     onCellCornerDblClick: null,
diff --git a/src/pluginHooks.js b/src/pluginHooks.js
index afcc7e2..ececdd1 100644
--- a/src/pluginHooks.js
+++ b/src/pluginHooks.js
@@ -37,6 +37,9 @@ Handsontable.PluginHookClass = (function () {
       afterSelectionEndByProp : [],
       afterCopyLimit : [],

+      // Customer plugin after row/column header clicked.
+      afterHeaderClick : [],
+      
       // Modifiers
       modifyCol : []
     }
diff --git a/src/tableView.js b/src/tableView.js
index 39512c0..ded6b74 100644
--- a/src/tableView.js
+++ b/src/tableView.js
@@ -242,6 +242,56 @@ Handsontable.TableView = function (instance) {
         that.settings.afterOnCellMouseDown.call(instance, event, coords, TD);
       }
     },
+    onHeaderMouseDown: function (event, coords, TD) {
+      var row = coords[0];
+      var col = coords[1];
+      var rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd;
+
+      //console.log("Clicked on header[row = " + row + ", col = " + col + "], TD.innerHTML.length: " + TD.innerHTML.length);
+      if ((row == 0) && (col == -1) && (TD.innerHTML.length == 0)) {
+        // Click on left upper corner
+        // Since the row and col is same when click on left upper corner and row heder of first row,
+        // The length of current TD.innerHTML must be checked.
+        rangeRowStart = 0;
+        rangeColStart = 0;
+        rangeRowEnd = instance.countRows() - 1;
+        rangeColEnd = instance.countCols() - 1;
+      }
+      else if (row == 0) {
+        if (col >= 0) {
+          // Click on column header
+          rangeRowStart = 0;
+          rangeColStart = col;
+          rangeRowEnd = instance.countRows() - 1;
+          rangeColEnd = col;
+        } else {
+          // Click on row header of first row
+          rangeRowStart = row;
+          rangeColStart = 0;
+          rangeRowEnd = row;
+          rangeColEnd = instance.countCols() - 1;
+        }
+      }
+      else if (col == -1) {
+        // Click on row header
+        rangeRowStart = row;
+        rangeColStart = 0;
+        rangeRowEnd = row;
+        rangeColEnd = instance.countCols() - 1;
+      }
+
+      if ((rangeRowStart != undefined) && (rangeColStart != undefined) && (rangeRowEnd != undefined) && (rangeColEnd != undefined)) {
+        //console.log("Select from [" + rangeRowStart + ", " + rangeColStart + "] to [" + rangeRowEnd + ", " + rangeColEnd + "]");
+        instance.selectCell(rangeRowStart, rangeColStart, rangeRowEnd, rangeColEnd);
+      }
+
+      if (!that.settings.fragmentSelection) {
+        event.preventDefault(); //disable text selection in Chrome
+        clearTextSelection();
+      }
+
+      instance.PluginHooks.run('afterHeaderClick', event, coords, TD);
+    },
     /*onCellMouseOut: function (/*event, coords, TD* /) {
      if (isMouseDown && that.settings.fragmentSelection === 'single') {
      clearTextSelection(); //otherwise text selection blinks during multiple cells selection
-- 
1.8.1.msysgit.1