可编辑的 Webix 数据 Table 列 Headers

Question

是否可以在 webix 数据 table 中创建 editable 列 headers？此代码将允许编辑 table 中的数据，但不允许编辑 headers 本身：

 webix.ui({
    view:"datatable",
    editable:true,
    columns:[
       { id:"title",   header:"Test", fillspace:true, editor:"text"}],
    data:[
        {title:"random"}
    ]
});

Answer 1

没有内置解决方案，但添加外部编辑器非常容易

http://webix.com/snippet/379ee39b

您可以在里面用文本编辑器创建一个单独的弹出窗口

webix.ui({ id:"editor", view:"popup", body:{
  view:"form",
  elements:[
    { view:"text", name:"header" },
    { view:"button", value:"Save", click:function(){
      var top = this.getTopParentView();
      top.config.callback( top.getBody().getValues().header);
      top.hide();
    }}
  ]
}});

稍后，在 header 点击事件中使用它

  onHeaderClick:function(id, ev){
    var grid = this;

    $$("editor").getBody().setValues({
        header: this.getColumnConfig(id.column).header[0].text
    });
    $$("editor").config.callback = function(value){
      grid.getColumnConfig(id.column).header[0].text = value;
      grid.refreshColumns();
    };
    $$("editor").show(ev);
    $$("editor").getBody().focus();
  }

可编辑的 Webix 数据 Table 列 Headers

Editable Webix Data Table Column Headers

html

javascript

webix