如何在不进入AJAX的情况下重新排序一行html输入字段

StackOverflow https://stackoverflow.com/questions/1414594

  •  06-07-2019
  •  | 
  •  

题

我正在生成一组html输入文本字段，我希望我的最终用户能够重新排序。我不想使用AJAX，但可以使用Javascript。

我可以在每行的一侧放置一些箭头按钮，按下这些按钮可以上下移动字段。

我对AJAX的问题在于它的功能太重（50-60kb）。我看了一些雅虎代码（YUI），但同样，对于一个特定的功能来说似乎有些过分。我找到了这个 - http://www.danvk.org/wp/dragtable/ - 这似乎是最轻的代码，但只允许列重新排序。

我将继续研究最后一个选项，但我对其他想法/方法持开放态度（即允许用户重新排序行方式字段）。

PS：我认为这个讨论并不重要，但我正在使用PHP生成这些html文本字段。

有帮助吗？

解决方案

添加约瑟夫的回答......

根据 W3C DOM Level 2 Core说明书：

  

<强>的insertBefore

     

在现有子节点refChild之前插入节点newChild。 [...]   如果newChild已经在树中，则首先将其删除。

因此，在调用 insertChild（）之前，无需调用 removeChild（）。

此外，IE6 DOM支持非常糟糕，因此您可能需要为其编写特定代码。或者您可能不想浪费时间支持此浏览器，并且要求用户升级。或者，如果你真的需要支持IE6，那么使用JavaScript库（比如jQuery）可能是一个简单的解决方案。

编辑：这是最终的JavaScript解决方案，基于Josef的回答：

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

其他提示

你可以写一个类似于这个的javascript函数

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

并在您的行中使用它：

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

我同意你的意见，你真的不需要为这样一个非常简单的任务引用Javascript框架。

你好像很困惑; AJAX是一个通用术语，指的是使用Javascript通过子请求从服务器加载额外内容而不实际加载新页面。有许多不同的Javascript库可以处理AJAX请求。

当你说“AJAX”时，也许你正在考虑像JQuery这样比较流行的图书馆之一？

至于你的问题 - 要记住的一件事是，通过适当的服务器配置，客户端浏览器将在第一次请求后通常缓存Javascript库;因此，一致的总体加载时间不受这些库的大小的影响 - 仅限于第一页加载。你甚至可以避免使用 Google托管的JQuery 副本，很可能已被大多数访问者缓存到您的网站。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top