15

所以我有 2 个 html 页面。1 用作容器，1 用作内容。当我使用表格加载内容页面时，我可以使用拖放操作。

但是当我转到我的容器页面并将内容页面加载到带有 ajax 的 div 中时，拖放停止工作。内容页面内的所有其他 javascript 功能仍然有效。如何将 jquery dnd 插件绑定到加载有 ajax 的表？

我正在使用拖放作为教程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拖放插件。

编辑

发现：

不知何故，我在容器页面中的表被重命名为pSqlaTable，而不是我在控制器页面中给它的 id。

<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 的初始化不正确。我不能拖着桌子上的卓尔人。我的语法错了吗？

编辑

难道是我无法将 jquery 绑定到表，因为我使用 ZPT（或 javascript）在另一页上动态生成表？

4

6 回答 6

18

插件的问题。

您正在混合大量外部库和代码。这会导致版本之间可能不匹配，并且代码中会出现大量黑框。

作为开发者，这应该会让你感到非常不安。在你的代码库中有你不完全理解的代码会很快变得非常令人沮丧。

替代方案。

通常，这类插件为我们提供功能，因为 JavaScript 开发人员可以在没有它们的情况下轻松完成。这个开发过程，在足够简单的场景中，让我们创建我们理解的代码并且更容易维护。我们不仅从这个过程中学习，而且我们还创建了更小的特定代码。一般来说，社区驱动的解决方案非常好，但重要的是要记住它们不是灵丹妙药。通常，您会被一个不那么活跃的项目卡住，该项目对您的特定情况有一个错误，您必须挖掘一个庞大的、不熟悉的代码库。

你的代码

那么这个拖放插件有什么作用呢？

好吧，我将其分解如下：

  • 监听表行上的事件mousedown
  • 当此类事件触发时，开始移动表格行以匹配鼠标位置
  • 当mouseup发生时，检测到，并最终确定位置。

让我们看看如何做类似的事情。假设表格的 HTML 类似于：

<table>
    <tbody>
    <tr>
        <td> Hello 1</td>
    </tr><tr>
        <td> Hello 2</td>
    </tr>
    </tbody>
</table>

这是一个应用了一些基本样式的表格

接下来，我们将监听选择事件。我们将向表格行添加一个事件以供选择，并在鼠标向上时向文档添加一个事件。jQuery 为此类事件提供了事件侦听器。由于我们希望这些事件即使在 AJAX 之后仍然存在，我们将使用.onwhich 让我们使用委托事件。.on意味着即使我们稍后将内容添加到表格中，也没有关系。

var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
   $("#textDiv").text(this.textContent); 
    selected = this;
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.textContent); 
    selected = null;
});

这是此类代码的工作小提琴。

现在，我们要实际更改拖放操作，即将当前位置更新为反映鼠标位置的位置。我们可以监听mousemove事件，并检测我们当前所在的元素。就像是

$(document).on("mousemove",function(e){
    $("#textDiv").text($(e.target).html());
});

你可以在这里看到一个工作小提琴

这很好，但我们想要真正改变元素的位置。因此，我们需要更改表结构以允许这样做。我们可以删除元素，并将其附加到正确的位置。我们将检查我们是否有一个选定的元素，如果有，我们可以在 mousemove 事件中将其与当前元素进行比较。对于初学者，我们可以检测是否应该使用以下内容进行拖动：

$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            $("#mousePos").text("DRAGGING");    
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

（小提琴）

现在，我们将添加实际选择，当目标不是我们的元素并且我们在表格中时，我们将替换元素。我们的完整代码应该是这样的：

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
    e.preventDefault();//stop the text selection;
   $("#textDiv").text(this.textContent); 
    selected = $(this);
    selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.text()); 
    selected.find("td").css("background-color","");
    selected = null;
});
$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            var el = $(e.target).closest("tr");//the tr element we're on
            el.before(selected);// replace the elements
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table

（小提琴）

现在，到目前为止，我们只有几行代码，这很好，因为我们确切地知道发生了什么，并且不需要使用很多我们不完全理解的外部代码行。

但它会 AJAX 吗？

让我们用 AJAX 将数据加载到表中，看看吧！我们将使用setTimeout允许我们模拟异步请求的 AJAX 响应来模拟。我们将使用

setTimeout(function(){
    $("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);

这意味着，#MySpecialTable在一秒钟后更新 HTML。让我们看看它是否有效？

那么它为什么起作用呢？好吧，我们使用了委托事件，这意味着我们不关心我们正在加载的元素现在是否在屏幕上。自从我们自己构建代码并知道我们的最终目标是什么以来，我们就有了这样做的洞察力。剩下要做的就是稍微清理一下代码。

我们将在下面包装我们的代码，以防止 $ 在非冲突模式下成为问题（即 $ 已在页面中获取：

(function($){

})(jQuery);

接下来，我们将为我们的表格事件添加一个绑定：

$.GertVDragTable = function(elementSelector){ // rest of code.

最终，我们的代码可能看起来像这样。

使用它，将是一个简单的$.GertVDragTable("#MySpecialTable");选择，我们可以把它放在$.fn并允许每个函数调用它。这是一个品味问题。

请不要复制意大利面 :) 如果您在每个阶段都停下来思考为什么要采取下一步措施，我将不胜感激。

于 2013-05-31T18:36:43.563 回答
2

您不需要将 ID 用作选择器，您可以使用任何可以找到您的表的表达式。

如果结果调用中只有一个表$.ajax，您可以使用不会更改的容器 ID 搜索“容器内的表”：

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

如果有多个表，请使用不同类型的选择器，而不是 ID。CSS类工作正常：

$('table.table-diagnose').tableDnD( ... );

一个data-属性也是如此：

$("table[data-diagnose]").tableDnD( ... );
于 2013-05-28T21:12:57.680 回答
1

尝试将 a 添加title到您的表中，如下所示：

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

然后使用 jQuery属性选择器来查找此表，而不是通过id.

$('table[title="table-content"]').tableDnD({ 
// the rest of your code
于 2013-05-28T21:23:08.423 回答
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 回答
0

您是在容器页面还是在内容页面中包含脚本文件？我猜你可能想在使用 getScript 调用 dnd 插件时尝试加载它：

...
$.getScript('pathTotableDnDlib').done(function(){
    $(tableid).tableDnD({    
    onDrop: function(table, row) {
    alert(table + "     "  +  row);

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

更多关于 getscript：这里

于 2013-05-29T09:11:51.683 回答
0

@BenjaminGruenbaum 非常感谢本教程，我修改了一些代码以阻止表格标题上的拖放并提高跟踪鼠标方向的拖动流动性。

var old_y = 0;
(function ($) {
    $.GertVDragTable = function (tableName) {
        var selected;
        $(document).on("mousedown", tableName+" tr",function (e) {
            e.preventDefault(); //stop the text selection;
            if (($(this).find('th').length)== 0){   //prevent dragging on tr containing th
            selected = $(this);
            selected.find("td").css("background-color", "black");
            selected.find("td").css("color", "white");
            }
        });

        $(document).on("mouseup", function () {
            selected.find("td").css("background-color", "");
            selected.find("td").css("color", "");
            selected = null;
        });
        $(document).on("mousemove", function (e) {
            if (selected != null ) { // got an element selected
                if ($(tableName).has(e.target).length > 0) { //in the table
                    var el = $(e.target).closest("tr"); //the tr element we're on
                    if (el.find('th').length==0){ //prevent dropping on headers row

                    if (e.pageY > old_y){       //**
                    el.after(selected);}else{   //**-->more fluid dragging based on mouse direction
                        el.before(selected);    //**
                    }

                }
                }
                old_y = e.pageY;
            }
        });

        $(tableName).on('selectstart', false); //Don't let the user select the table
    }
})(jQuery);

这是小提琴http://jsfiddle.net/59rdq/

我希望它对某人有用。

于 2013-10-24T17:24:19.723 回答