0

我对 YUI (2) 数据表和拖放组合有疑问。我有一个项目表，其中一个是项目描述，我使用 YUI 的 TextboxCellEditor 使其可编辑（和可保存）。我还使行可拖动（因此我可以将它们拖放到另一个容器中）。

但是我遇到了两个问题： - 我只能通过单击第二列来获得 DnD（第一列不起作用） - 我只能在初始化后的第二次尝试中让它工作。

这是我的 JS 中的一个片段（简化）：

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，我会得到文本编辑器，如果我点击 name，我会打开链接。就像我说的，当我在第二列（描述）上鼠标按下时，第一次尝试我什么也没得到。然后我第二次单击并按住，这一次它起作用了（我得到了一个 DDProxy，我可以将它拖放到目标上，一切都在那里）。

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

我在这里做错了什么？

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

4

1 回答 1

1

写 DD 的 Dav Glass 在他的页面中有这个例子：http: //new.davglass.com/files/yui/datatable4/ 我在我的例子中使用了它：http: //www.satyam.com.ar/yui /2.6.0/invoice.html，它工作得很好，虽然它比你有更多的参与。很抱歉，我无法更准确地帮助您解决问题，D&D 不是我的要点，但我希望这些示例可能会有所帮助。

您的问题的一个原因可能是单元格中的链接。这不是一个好主意，不管你有没有 DD。通常，处理此问题的推荐方法是侦听 cellClickEvent，如果单击的单元格的列是“导航”的列，则根据单击的记录中的信息构建 URL，然后导航或用它做任何你想做的事。这允许 DataTable 更快地呈现，因为它不需要格式化程序，并且在奇怪的情况下有人确实单击了单元格，然后您才费心进行计算。页面上 DOM 元素的大小和数量也会减少。

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

于 2012-12-10T16:05:05.173 回答