Question

嘿伙计们，我需要你帮助一个小项目。我避免使用AJAX，因为我没有时间正确学习它，但我认为我需要一个AJAX功能。我的问题是我想调用写入我的数据库的PHP函数。我想在按钮点击时将列表项的文本及其位置写入我的数据库。我正在使用JqueryUI使我的列表项可拖动。守则如下：

<ul id="sortable">
         <li class="ui-state-default">item1</li>
         <li class="ui-state-default">item2</li>
         <li class="ui-state-default">item4</li>
         <li class="ui-state-default">item3</li>
         <li class="ui-state-default">item5</li>
</ul>

结果应该是这样的：

Position Text
1        item1
2        item2
3        item4
4        item3
5        item5

也许我可以通过自动增加解决这个问题，以跳过我的职位写作？

Answer 1

你需要AJAX才能做到这一点。幸运的是，sortable有一个decept API，允许您获取更新的位置并相当容易地将它们发布到服务器。

通过Sortable提供的API，您应该在可排序对象上定义更新方法，请参阅http://api.jqueryui.com/sortable/#event-update
为了让自己更容易，在前端渲染时，在列表数据-id和数据顺序中提供元素。

这是一个简短的例子，假设models是list元素的数组，models数组中的每个对象都有一个相应的数据库行id和一个当前的订单位置。

<ul id="sortable">
<?php foreach ($models as $item: ?>
    <li data-id="<?php echo $item->id; ?>"><?php echo $item->name; ?></li>
<?php endforeach; ?>
</ul>

然后在创建可排序对象时，您将定义应该使用的更新方法。

$("#sortable").sortable({
  update: function (event, ui) {
    var newOrder = $("#sortable").sortable("toArray", {"attribute: "data-id"});
    $.post('route/for/updating/order', {
       'order': newOrder
    });
  }
});

当进行更改时，POST请求将通过post参数发送到路由route/for/updating/order，＆＃39; order＆＃39;和newOrder对象。默认情况下，toArray方法会使用＆＃39; id＆＃39;属性，但我们告诉它使用数据库行值来更容易地进行服务器端处理。

您可以在此处查看有关toArray API功能的更多信息http://api.jqueryui.com/sortable/#method-toArray

在按钮上调用PHP函数，考虑列表项的顺序

1 个答案: