0

YUI（2）Datatableとドラッグアンドドロップのコンボに問題があります。アイテムのテーブルがあります。そのうちの1つは、YUIのTextboxCellEditorで編集可能（および保存可能）にしたアイテムの説明です。また、行をドラッグ可能にしました（別のコンテナーにドロップできるようにしました）。

しかし、私は2つの項目で立ち往生しています：-2番目の列をクリックすることによってのみDnDを取得できます（最初の列は機能しません）-初期化後の2回目の試行でのみ機能させることができます。

これが私の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();
    });
};

説明をクリックするとテキストエディタが表示され、名前をクリックするとリンクが開きます。私が言ったように、2番目の列（説明）でmouseDownを実行すると、最初の試行では何も得られません。次に、2回目のクリックを押したままにすると、今回は機能します（DDProxyを取得し、ターゲットにドラッグアンドドロップできます。すべてがそこで機能します）。

もう1つの問題は、名前の列をクリックして押したままにすると、DDProxyが取得されないことです（onRowSelectイベントと正しい行が取得されます）。

私はここで何が間違っているのですか？

更新：Satyamsの回答を使用して最初の問題を解決しました-リンク付きのセルのフォーマッターを削除します。onRowSelect関数に欠落しているdd.handleMouseDown（ev.event）を追加したため、2番目の問題（2回目のクリックのみ）が解決されました。

4

1 に答える 1

1

DDを書いたDavGlassは、彼のページに次の例を示しています。http: //new.davglass.com/files/yui/datatable4/ 私の例で使用しました：http：//www.satyam.com.ar/yui /2.6.0/invoice.htmlで、問題なく動作しますが、そこにあるよりも多少複雑です。申し訳ありませんが、問題についてより正確にお手伝いすることはできません。D＆Dは私の重要なポイントではありませんが、例がお役に立てば幸いです。

問題の理由の1つは、セル内のリンクである可能性があります。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 に答える