如何將click事件添加到可排序的行/列標題？

Question

我想實現一些功能，如Excel單擊行/列標題來選擇整個行/列，我想我應該追加一個單擊事件到所有行/列標題，所以我嘗試在core.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