x-editable：自定义x-editable以获得更多字段，但只有一个可编辑

Question

在这些日子里，我对x-editables感到疯狂......我无法理解如何自定义x-editable以获得复杂的字段数组。

我需要创建一个x-editable自定义，具有以下行为：一个清单（所以是一个值数组），但每个检查项都有一个输入文本字段。

我需要这样的东西（模拟油漆店）

这个x-editable在提交时必须产生一个输出（只是一个修饰的例子）

如何使用此行为/功能创建x-editable？

实际上是一个对象集合，其中对象有两个字段：id，fruit of fruit。

提前感谢所有人。

Answer 1

发表评论后，请检查此解决方案（简称小提琴）：

$('#save').on('click', function(){
    var fruits = [];
    $('.editable').each(function(i, v){
        /* store it as you like */
        var name = $(v).data('name');
        var value = $(v).editable('getValue'); //x-editable stores value under 'name' index, like {"banana": 10}
        var fruit = {"fruit_id": name, "num": value[name]}
        fruits.push(fruit);
    }).promise().done(function(){
        // promise() will wait .each() loop to finish before going ahead
        $.ajax({
            url: "/post",
            data: {fruits: fruits},
            success: frunction(data){
                /*....*/
            }
        });
    });
});

Fiddle