2013-08-21 12 views
14

Ich würde gerne in der Lage sein, den Text der Spaltenüberschriften in einem Handsontable zu bearbeiten, aber ich kann nicht herausfinden, ob es möglich ist, sie bearbeitbar zu machen. Ich nehme an, ich könnte die Header nur eine weitere Zeile machen, aber das möchte ich möglichst vermeiden.Wie bearbeite ich den Kopftext eines Handsontable?

Zur Klarstellung: Ich bin eigentlich nach einem Weg suchen, damit der Benutzer der Header-Werte bearbeiten (wie sie eine normale Tabellenzelle

+2

Warum Sie sie normale Zellen zu vermeiden versuchen, mit? Sie sollten CSS verwenden können, um sie wie gewünscht zu formatieren, damit sie sich von den anderen Zellen unterscheiden. – alxndr

+0

@alxndr, ja, es sieht so aus, als ob es so wäre. Allerdings wäre es schön, wenn die Bearbeitung von Header-Inhalten unterstützt wird. – ksigmund

Antwort

3

Im Backbone Probe (http://handsontable.com/demo/backbone.html), würden sie vielleicht etwas zeigen Sie Suche:

var $container = $("#example1"); 
$container.handsontable({ 
    data: cars, 
    dataSchema: makeCar, 
    contextMenu: true, 
    columns: [ 
    attr("make"), 
    attr("model"), 
    attr("year") 
    ], 
    colHeaders: ["Make", "Model", "Year"] 
    //minSpareRows: 1 //see notes on the left for `minSpareRows` 
}); 
+4

Danke für die Antwort. Ich bin tatsächlich auf der Suche nach einer Möglichkeit, den Benutzer die Header-Werte zu bearbeiten (wie sie eine normale Tabellenzelle würden). – ksigmund

17

Dies ist wahrscheinlich zu spät für OP, aber jemand anderes für die gleiche Antwort suchen Sie die Spaltenüberschriften ändern können (wie auch andere Einstellungen), nachdem die Tabelle bereits mit dem folgenden gemacht wurde:

var hot = $container.data('handsontable'); 
hot.updateSettings({ 
    colHeaders: ['A','B','C'] 
}); 

Soweit ich sagen kann, Sie alle Einstellungen übergeben können, die im Konstruktor zur Verfügung steht.

+1

Ich glaube, das bietet nur die Fähigkeit zu tun, was ich war auf der Suche programmatisch zu tun, im Gegensatz zu lassen die Zelle selbst direkt bearbeitet werden. – ksigmund

+1

@srxf Es ist nicht, weil es OP Frage nicht beantwortet. Er suchte nach einer Möglichkeit, den * Benutzer * den Kopf der Tabelle wie eine Zelle bearbeiten zu lassen. Nicht im Code. Dies ist eine gute Antwort, aber immer noch eine Antwort auf eine andere Frage. – fab

+0

@fab, danke, tut mir leid, meine dumme Kommentar gelöscht :) – srf

0

Eine Möglichkeit, dies zu tun, ist afterGetColHeader zu verwenden.

Kopieren klebte von here

afterGetColHeader: function (col, TH) { 
     // nothing for first column 
     if (col == -1) { 
      return; 
     } 
     var instance = this; 
     // create input element 
     var input = document.createElement('input'); 
      input.type = 'text'; 
      input.value = TH.firstChild.textContent; 

     TH.appendChild(input); 

     Handsontable.Dom.addEvent(input, 'change', function (e){ 
      var headers = instance.getColHeader(); 
       headers[col] = input.value; 
      instance.updateSettings({ 
       colHeaders: headers 
      }); 
     }); 

     TH.style.position = 'relative'; 
     TH.firstChild.style.display = 'none'; 
    } 
Verwandte Themen