Question

我遇到了YUI（2）数据表和拖放组合的问题。我有一个项目表，其中一个是项目描述，我用YUI的TextboxCellEditor编辑（可保存）。我也使行可拖动（所以我可以将它们放到另一个容器中）。

但我坚持两件事： - 我只能通过点击第二列获得DnD（第一列不起作用） - 我只能在初始化后的第二次尝试中使用它。

这是我的JS（简化）中的snipet：

nameFormatter = function (elCell, oRecord, oColumn, oData) {
    var link = '/share/page/site/' + Alfresco.constants.SITE + '/document-details?nodeRef=' + oRecord.getData('nodeRef');
    elCell.innerHTML = '<span><a href="' + link + '" class="drags">' + oData + '</a></span>';
};
descFormatter = function(elCell, oRecord, oColumn, oData) {
    elCell.innerHTML = '<pre class="desc">' + oData + '</pre>';
};
columnDefs = [
    {key: "name", label: "Name", sortable: true, formatter: nameFormatter, resizable: true}
    , {key: "description", label: "Description", sortable: true, formatter: descFormatter, editor: new YAHOO.widget.TextboxCellEditor(), resizable: true}
];
this.mediaTable = new YAHOO.widget.DataTable(this.id + "-media-table", columnDefs, this.dataSource, {
    MSG_EMPTY: "No files"
});
// now we want to make cells editable (description)
var highlightEditableCell = function(oArgs) {
    var elCell = oArgs.target;
    if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
        this.highlightCell(elCell);
    }
};
this.mediaTable.subscribe("cellMouseoverEvent", highlightEditableCell);
this.mediaTable.subscribe("cellMouseoutEvent", this.mediaTable.onEventUnhighlightCell);
this.mediaTable.subscribe("cellClickEvent", this.mediaTable.onEventShowCellEditor);
this.mediaTable.subscribe("editorSaveEvent", this.saveDesc);
this.mediaTable.subscribe('cellMousedownEvent', this.onRowSelect);

saveDesc函数是简单的Ajax调用，用于保存项目的描述。这是onRowSelect函数：

onRowSelect = function(ev) {
    console.log(" == method onRowSelect");
    var tar = Event.getTarget(ev)
      , dd
    ;
    dd = new YAHOO.util.DDProxy(this.getTrEl(tar));
    dd.on('dragDropEvent', function(e) {
        YAHOO.Bubbling.fire('myCustomEvent', { target: e.info, src: tar});
        dd.unreg();
    });
};

如果我只是点击desc，我会得到文本编辑器，如果我点击名称，我会打开链接。就像我说的，当我在第二列（描述）上的mouseDown时，在第一次尝试中我什么也得不到。然后我点击并按住第二次，这次它可以工作（我得到一个DDProxy，我可以拖放到目标，一切都在那里工作）。

另一个问题是当我点击并按住名称列时，我没有得到DDProxy（我得到了我的onRowSelect事件和正确的行）。

我在这里做错了什么？

更新：通过使用Satyams答案解决了第一个问题 - 使用链接删除了我的单元格的格式化程序。第二个问题（仅在第二次点击时）已解决，因为我在 onRowSelect 函数中添加了缺少的 dd.handleMouseDown（ev.event）。

Answer 1

编写DD的Dav Glass在他的页面中有这个例子：http://new.davglass.com/files/yui/datatable4/我在我的例子中使用了它：http://www.satyam.com.ar/yui/2.6.0/invoice.html并且它工作得很好，尽管它比你那里有更多的参与。对不起，我不能更准确地帮助你处理你的问题，D＆amp; D不是我的字符串，但我希望这些例子可能有所帮助。

您的问题的一个原因可能是单元格中的链接。无论你是否有DD，这都不是一个好主意。一般来说，处理此问题的推荐方法是监听cellClickEvent，如果单击的单元格列是“导航”的，则根据单击的记录中的信息构建URL，然后导航或做任何你想做的事。这允许DataTable渲染得更快，因为它不需要格式化程序，并且在奇怪的事件中有人点击单元格，然后你才开始进行计算。页面上DOM元素的大小和数量也会下降。

同样，对于具有预格式化标签的其他单元格，您可以轻松避免它。 DataTable中每列中的单元格获取由“yui-dt-col-”前缀和列的“key”值组成的CSS类名（例如：yui-dt-col-description）。因此，您可以简单地为该CSS类名添加样式声明，并为自己节省格式化程序。同样，为了突出显示可编辑单元格，如何为.yui-dt-editable：hover选择器定义一些样式？我自己从来没有这样做，但我想它应该有用。

YUI Datatable与Cell Editor一起拖放

1 个答案: