Question

我有两个简单的HTML列表。第一个包含一堆条目，第二个条目最初是空的。常见的列表结构如下：

<ul id="project-offer-list" class="connectedSortable">
    <li class="ui-state-default">
        <div>
            <!-- formatting -->
        </div>
    </li>
    <li class="ui-state-default">
        <div>
            <!-- formatting -->
        </div>

用户可以通过将第一个列表中的某些条目拖到第二个列表中来选择它们。通过这样做，他可以通过对第二个列表中的元素进行排序来给出偏好。

拖放机制由JQuery实现：

<script>
    $(function() {
        $("#project-offer-list, #project-selection-list").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>

我想将所选元素（第二个列表中的元素）及其顺序发送到使用PHP的远程服务器。每当用户点击＆＃34;保存＆＃34;按钮，应该发送当前选择。

我怎样才能做到这一点？我需要为每个列表元素分配一个id，并以某种方式读取第二个列表及其顺序。至关重要的是，可以考虑对JQuery所做的HTML代码进行可能的更改。

由于

Answer 1

您需要将第二个列表的数据转换为json对象，为每个元素分配id，使用您在数据库中使用的相同ID，因为它更容易更新并对现有数据执行选项，< / p>

    var items = [];
    $('ul#list_id').find("li").each(function() {
    var $this = $(this);
    var item = { id: $(this).attr('data-id'), title: $(this).text() };
    items.push(item);
  });

您将获得类似的内容，并使用ajax将其发送到您的远程服务器

[
 {"id":"1","title":"School-management"}, 
 {"id":"2","title":"library-management"}, 
 {"id":"3","title":"billing_software"}
]

使用PHP将动态HTML列表发送到服务器

1 个答案: