Question

我正在尝试操纵动态生成的表。目前我正在使用包含内容可编辑td的表格。使用以下AJAX调用更新数据库...

$(document).ready(function(){
   $("td[contenteditable=true]").blur(function(){
   var msg = $(".alert");
   var newvalue = $(this).text();
   var field = $(this).attr("id");
   $.post("fn-scp-update.php",field+"="+newvalue,function(d){
       var data = JSON.parse(d);

   });
   });
});

使用以下脚本中的td元素来查找....

        echo '<td contenteditable="true" id="due_date:'.$row['id'].'">'.$date_display.'</td>';

数据在单独的PHP脚本中拆分，并且db更新了......

foreach($_POST as $key=>$value){
    $key = strip_tags(trim($key));
    $value = strip_tags(trim($value));
    $explode = explode(":",$key);
    $user_id = $explode[1];
    $field_name = $explode[0];
    if(isset($user_id)){
        if($field_name == 'due_date'){
          $date = new DateTime($value);
        $value = $date->format('Y-m-d');
        }
        elseif($field_name == 'pend_notes'){
          $value=$conn->real_escape_string($value);
        }
        $update = $conn->query("UPDATE su_master SET $field_name='{$value}' WHERE id='$user_id'"); 
        if($update){
            $response = "Details Updated";
            http_response_code(200); //Setting HTTP Code to 200 i.e OK
        }else{
            $response = "Not Modified";
            http_response_code(304); //Setting HTTP Code to 304 i.e Not Modified
        }
    }else{
        $response = "Not Acceptable";
    }
}
}

我会在某个时候开始制作db函数PDO。

在td中，id被选中，第一部分是列名，行引用的id，然后数据被更新。

这一切都很好，但是，我现在有一个请求让单元格的内容可以拖动。基本上，如果已经在可信任的单元格中编写了某些内容，则需要将其拖动到另一个可信任的单元格，并将数据写入数据库的方式与当前的相同。或者至少以相同的方式工作，不一定是当前代码的逐字副本。

鉴于我甚至不确定从哪里开始，这让Googling的答案难以置信。

我确实尝试在一个跨度中包装单元格的内容，它本身是可拖动的。哪个有效，但不是在细胞可编辑时。

我确定的问题是我使用模糊，这意味着直到我释放鼠标之后才会写入数据库条目，或者单击其他地方。如果其他地方在另一个单元格上，它就会搞砸掉。

3天，没有解决方案，请帮助:(

摘要......可编辑和可拖动的单元格。

我还应该提一下，这一切都包含在一个表中，因此仅限于一个表元素中。

Answer 1

好的，所以我最终找到了答案。

要抓取所有文本，我使用onclick选择内容中可编辑的所有文本。使用此方法，双击仍然允许编辑内容。

var r = null;
var origParent = null;
function DoLoad()
{   
    document.addEventListener("drag", DoDrag, false);
    document.addEventListener("drop", DoDrop, false);
}
function DoDrag(evt)
{
   if (r == null)
    {
        var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    r = range.cloneContents();
origParent = evt.rangeParent;
console.log('r is now set');
    }
}

function DoDrop(evt)
{
    if (r != null)
{
    console.log('inserting node.');
        var rng = document.createRange( );
        rng.setStart(evt.rangeParent, evt.rangeOffset);
        //console.log('inserting node.');
        rng.insertNode(r); 
         r = null;
    evt.stopPropagation();
    }
    else{
    console.log('r is null...');
    }

}

然后使用FireFox解决问题，使用以下方法作为解决方法......

<body onload="DoLoad()">

然后装在身上

[root@firstcentos scripts]# cat test1
00
00
01
01
00
00
02
02
03
aa
aa
aa
[root@firstcentos scripts]# cat test1 | uniq -c
      2 00
      2 01
      2 00
      2 02
      1 03
      3 aa
[root@firstcentos scripts]#

使用contenteditable时，修复了（至少在FF改变之前）无法在单元格之间拖放。

它并没有解决这个问题，虽然单元格已经被删除，但在重新点击然后单击关闭之前，它并不是真正存在的一部分，但是对我的模糊进行调整可能会修复这一点。

如果我什么时候解决这个问题，我们可能会在附近，我会告诉你。如果有人在这条线上有任何建议，那将非常有帮助。

使用自动保存拖放表格单元格

1 个答案: