Joomla/Mootools捕获可排序对象的顺序

Question

我正在尝试对数据库条目列表进行排序，然后使用Joomla中的新订单更新数据库。

到目前为止，我已经得到了mootools的Sortables列表，每个<li>都有两个隐藏的<input>来跟踪条目的id和顺序。此时，顺序变量不会改变，只是反映原始顺序。

我希望捕获提交事件并将订单变量更改为现在应该的值，然后继续发送请求，但是我不知道如何做到这一点……

我有：

<li style="float:left">
    <input type="hidden" name="o<?php echo $row->order; ?>" value="<?php echo $i; ?>" />
    <input type="hidden" name="i<?php echo $row->order; ?>" value="<?php echo $row->lotid; ?>" />
    Lot <?php echo $row->lot_name; ?><br />
    <?php echo $row->address; ?>
</li>

和：

window.addEvent('domready', function(){
    new Sortables('#order-grid', {opacity: 0.7});

    form = document.id('adminForm');
    list = document.id('order-grid');

    form.addEvent('submit', function(e) {
        var sortOrder = [];

        list.getElements('li').each(function(li) {
            sortOrder.push(li.retrieve... //Stuck!
        });
    });
});

感谢您的帮助。

Answer 1

文档页面是您的朋友。http://mootools.net/docs/more/Drag/Sortables

首先，我会说保存一个引用。

var sortables = new Sortables(options)

然后，您可以使用sortables.serialize()方法来检索新订单。默认情况下，序列化将返回元素is但它接受的参数是一个函数-因此您可以随心所欲地返回。

例如：要获得新排序顺序的数组，只需执行以下操作

var newOrder = sortables.serialize(function(el, index) {
    return el.get('data-id'); // or el.retrieve('id'); if you have one. 
});

最后，不需要在提交事件上执行此操作-您只需执行以下操作：

var orderField = document.id("i_something_order");
new Sortables('#order-grid', {
    onComplete: function() {
        orderField.set('value', this.serialize(function(el) {
            el.retrieve('id');
        }).join(','));
    }
});

请注意，retrieve意味着您之前已经使用过store。如果您想要的是DOM属性，只需执行el.get('data-id')或任何建议的操作