Datatable Bearbeitung mit Webix

Question

Ich versuche, die Datatable-Bearbeitung einzuschalten, aber ich weiß nicht, warum es nicht funktioniert. überprüfen

var datatable = webix.ui({ 
    id: "mytable", 
    container: "myDATA", 
view:"datatable", 
autoheight:true, 
select: 'row', 
multiselect: true, 
autoConfig:true, 
editable: true, 
editaction: 'dblclick', 
columns:[ 
    { id:"rank", header: translate["en"].rank,    width:50}, 
    { id:"title", header: translate["en"].title, width:200}, 
    { id:"year", header: translate["en"].year,  width:80}, 
    { id:"votes", header: translate["en"].votes,   width:100} 
], 
on: { 
    onBeforeLoad: function() { 
    this.showOverlay('Loading...'); 
    }, 
    onAfterLoad: function() { 
    if(!this.count()) { 
     this.showOverlay('No data found...'); 
    } else { 
     this.hideOverlay(); 
    }   
    }, 
    onItemClick: function(id,element,node) { 
    var row = this.getItem(id); 
    console.log(row); 
    } 
} 

});

meine jsfiddle: http://jsfiddle.net/gdjaero9/40/ irgendwelche lösungen?

Vielen Dank für Ihre Antworten.

Answer 1

Sie müssen auch the editor für jede Spalte setzen:

columns:[ 
     { id:"rank", header: translate["en"].rank, width:50}, 
     { id:"title", header: translate["en"].title, editor:'text', width:200}, 
     { id:"year", header: translate["en"].year, editor:'text', width:80}, 
     { id:"votes", header: translate["en"].votes, editor:'text', width:100} 
    ], 

Aktualisiert Geige: http://jsfiddle.net/gdjaero9/44/

Answer 2

Obwohl Sie bereits editable: true definiert haben, aber alle Zellen wirken nach wie vor als DIVs. Weil Sie die Eingabekomponenten Ihren Zellen nicht zugewiesen haben. Um beim Auswählen der Zelle das div in das Textfeld zu konvertieren, müssen Sie den Editor für diese Spalte bereitstellen.

Es gibt verschiedene Editoren: Text (wandelt den div Textfeld), wählen Sie (wandelt das div zu Combo-Box), drowdown (wandelt die div-Box Dropdown) usw.

Um den Editor in der hinzufügen Spalte, Eigenschaft hinzufügen: editor:'editor_type'