使用 webix 编辑数据表

Question

我尝试设置数据表编辑，但我不知道为什么它不起作用。检查

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);
  }
}

});

我的 jsfiddle：http://jsfiddle.net/gdjaero9/40/ 任何解决方案？

感谢您的回答。

Answer 1

您还需要为每一列设置 the editor :

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}
    ],

已更新 fiddle：http://jsfiddle.net/gdjaero9/44/

Answer 2

虽然你已经定义了editable: true，但所有的单元格仍然充当DIV。因为您还没有将输入组件分配给您的单元格。要将 div 转换为 select 单元格上的文本框，您必须为该列提供编辑器。

有多种编辑器：text（将div转换为文本框），select（将div转换为组合框），drowdown（将div 到下拉框）等等

要在列中添加编辑器，添加属性： editor:'editor_type'

使用 webix 编辑数据表

Datatable editing with webix

webix