如何将HTML表行拖放到另一个位置(在Jsp中）并将新位置(值）也保存在数据库(MySql）中

How to Dragging and dropping HTML table row to another position(In Jsp) and save the new position (values) also in database(MySql)?

本文关键字：位置 新位置 MySql 数据库 存在 保存 HTML 拖放 另一个 Jsp      更新时间：2023-09-26

大家好：我遇到了这样的问题。场景如下：例如，如果我有一个包含几列的数据库表 A。服务器将数据库传递给 Web 客户端后，它将呈现为 HTML 表。现在，这是对客户端的一些要求。用户将能够从HTML表中添加/删除几行，此外，他们还可以更改行顺序。如果我们可以在一些jquery插件的帮助下完成客户端(例如：http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/(。现在，我的问题是，如何将此信息传递回服务器？因为有新行和删除行，原来表行顺序(像插件tableDnD.serialize函数不够(是不够的。怎么做？如果有人对此有想法，请告诉我。我从 5 天开始就陷入其中。提前谢谢你。

在下拉行上，这个 JavaScript 函数正在调用。

    this.onDrop = function(table, droppedRow) {
   // alert("ondrop1");
   var rows = this.table.tBodies[0].rows;
   var debugStr = "rows now: ";
   for (var i=0; i<rows.length; i++) {
       debugStr += rows[i].id+" ";
   //  alert(debugStr);
   }

//document.getElementById('debug'(.innerHTML = 'dropped
'+debugStr; }

现在我必须将行的新位置发送到服务器端。怎么做？

嗨，

我认为最好使用 jquery ui 来拖放目的，它们非常方便，您可以从此链接获取详细信息

我现在无法实现它，但我认为尝试使用他们网站上的代码可能会给您一些想法

<script type="text/javascript">
  var table = document.getElementById('table-1');
  var tableDnD = new TableDnD();
  tableDnD.init(table);
</script>

尝试在侧面使用一些警报此功能可能会更有帮助

tableDnD.onDrop = function(table, row) {
    var rows = this.table.tBodies[0].rows;
    var debugStr = "rows now: ";
    for (var i=0; i<rows.length; i++) {
        debugStr += rows[i].id+" ";
    }
    document.getElementById('debug').innerHTML = 'row['+row.id+'] dropped<br>'+debugStr;
}

如果您从此 writa 中获取所需的数据，则函数中的 ajax 操作并从此函数调用它或在按钮单击事件上调用它以保存数据

这是W3学校的Ajax教程的链接，有一个参考，

假设你的函数是 ajaxcall(( 那么

function ajaxcall(readedValue)  { 
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()  {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)  { 
            var returnreslut=xmlhttp.responseText;
            if(returnreslut==true){
                alert("Sucess");           
            } else  {
                alert("failed");
            }
        }
    }
    xmlhttp.open("POST","insertQueryPage.jsp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("value="+readedValue);
}
相关文章：