15

だから私は2つのhtmlページを持っています。1 つはコンテナーとして機能し、1 つはコンテンツとして機能します。テーブルを含むコンテンツ ページをロードすると、ドラッグ アンド ドロップを使用できます。

しかし、コンテナー ページに移動し、コンテンツ ページを ajax を使用して div に読み込むと、ドラッグ アンド ドロップが機能しなくなります。コンテンツ ページ内の他のすべての JavaScript 機能は引き続き機能します。ajaxでロードされたテーブルにjquery dndプラグインをバインドするにはどうすればよいですか?

これをチュートリアルとしてドラッグアンドドロップを使用していますhttp://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

私のコードは次のようになります。

$(window).load(function()
{   if(temp == 0)
    { 
        DP("eerste keer")
        load_table(); 
        temp = 1;
    }
} );

function load_table()
{    
    DP('load_table');
    $.ajax({
            //async: false,
            type: "POST",
            url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
            success: function (data) {
                    $("#diagnoses_zelf").html(''); //<== clears current content of div
                    $("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
                },
            error: function(){
                alert('error');
              } 
        }).done(function() {
        update_table(); 
        initialize_table();    // <== calls jquery plug in
        });

    return false;   
}


function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
    alert(tableid);
    $(tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        var tette = $(row).index;
        alert(tette);
        },
        dragHandle: ".dragHandle"
    });     
}

ここに画像の説明を入力

これはどのように可能であり、どうすればよいですか? 誰でもこれで私を助けてくれませんか。

非常に短い: ajax を使用してコンテナー ページにロードしたテーブルの ID にアクセスし、jquery ドラッグ アンド ドロップ プラグインを使用します。

編集

調査結果:

どういうわけか、コンテナー ページのテーブルの名前が、コントローラー ページで指定した ID ではなくpSqlaTableに変更されました。

<table id="tableDiagnose" class="table table-hover">

これが、コードがテーブル annymore を見つけられなかった理由です。Fábio Batista のおかげで、このコードで修正されました。

$('#diagnoses_zelf table').tableDnD( ... );

、しかし、どうすれば今dndプラグインを使用できますか?

これでテーブルが見つかりましたが、まだ dnd プラグインをそれにバインドできません。jquery プラグインを ajax でロードされたテーブルにバインドできますか?

編集

//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id');
    alert(tableid);
    $('#' + tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        alert('issemer?');
        },
        dragHandle: ".dragHandle"
    });    
}

これは私がまだ立ち往生しているコードです。tableid は正しいですが、jquery の初期化は正しくありません。ドラウをテーブルにドラッグすることはできません。私の構文は間違っていますか？

編集

ZPT（またはjavascript）を使用して他のページのテーブルを動的に生成するため、jqueryをテーブルにバインドできないのでしょうか？

4

6 に答える 6

1

ID が変更されている場合は、ID を使用しないでください。

<table class="tableDiagnose table table-hover">

プラグイン

function initialize_table() 
{
    $('.tableDiagnose.table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);
        },
        dragHandle: ".dragHandle"
    });   
    DP('nee');  
}

編集: ajax は非同期です:

function load_table()
{    
    DP('load_table');
    $.ajax({
            //async: false,
            type: "POST",
            url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
            success: function (data) {
                    $("#diagnoses_zelf").html(''); //<== clears current content of div
                    $("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
                    update_table(); 
                    initialize_table();    // <== calls jquery plug in
                },
            error: function(){
                alert('error');
              } 
        });
        //removed .done as you already have a success option in ajax


    return false;   
}

編集: バグが見つかりました........テーブル ID を取得して $(tableid) で選択しましたが、#

function initialize_table() 
{
    /*
    var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
    alert(tableid);
    // but you really should limit the use of variables when you don't need them*/
    //$('#'+tableid).tableDnD({            
    //like this directly
    $('#diagnoses_zelf table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        var tette = $(row).index;
        //alert(tette);
        },
        dragHandle: ".dragHandle"
    });     
}

デモはこちら

編集

于 2013-05-29T08:47:59.120 に答える