如何手动打开/显示Alloy Datatable的CellEditor?

时间:2014-10-13 14:26:00

标签: liferay liferay-6 alloy-ui liferay-aui

我正在编写代码,以便我可以手动更改列编辑器。我能够在双击事件上设置编辑器事件(' dblClick')。 当我点击单元格时,下一次单击会观察效果。 缺什么 ? 要么 如何手动打开/显示编辑器?

我的代码就像.......

table.delegate('dblclick', function(e) {
    var target = e.currentTarget; 
    var model = table.getRecord(target.get('id'));
    var type = model.get('type');
    var column = this.get('columns.value'); 
    column.editor = editors[type];
    this.showCellEditor(target); 
},'tr', table);  

this.showCellEditor(目标); - >这个方法是YUI(雅虎的UI)。在Alloy UI中,任何方法都与此类似吗?

1 个答案:

答案 0 :(得分:0)

为什么不在同一列中对相似的数据进行分组,以便可以使用相同的编辑器,而不是动态选择编辑器?

var columns = [{
    editor: new Y.TextAreaCellEditor(),
    key: 'name'
}, {
    editor: new Y.DateCellEditor({
        dateFormat: '%m/%d/%Y'
    }),
    key: 'birthday'
}];

如果您对这样的数据进行分组,那么您可以将dataTable的editEvent更改为dblclick,如下所示:

var dataTable = new Y.DataTable({
    // ...
    editEvent: 'dblclick'
}).render('#dataTable');

这是一个有效的例子:



YUI().use('aui-datatable', function(Y) {

  var columns = [{
    editor: new Y.TextAreaCellEditor(),
    key: 'name'
  }, {
    editor: new Y.DateCellEditor({
      dateFormat: '%m/%d/%Y'
    }),
    key: 'birthday'
  }];

  var data = [{
    birthday: '9/9/1999',
    name: 'Jonathan Smithy'
  }, {
    birthday: '10/10/1990',
    name: 'Bob Duncan'
  }];

  var dataTable = new Y.DataTable({
    columnset: columns,
    recordset: data,
    editEvent: 'dblclick'
  }).render('#dataTable');

});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>


<div id="dataTable"></div>
&#13;
&#13;
&#13;

如果您必须动态选择并显示编辑器,我建议您查看A.DataTable.CellEditorSupport getEditor()方法。我无法让getEditor(data[1], column[0]).show()工作,但我认为如果你能让它工作,你可以做{{1}}之类的事情。