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

Question

这些天我对 x-editables 非常着迷...我不明白如何自定义 x-editables 以获得复杂的字段数组。

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

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

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

如何使用此 behaviour/functionality 创建 x-editable？

实际上是对象的集合，其中对象有两个字段：id，水果数量。

在此先感谢大家。

Answer 1

以下评论，查看此解决方案（参考fiddle）：

$('#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

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

x-editable: customize an x-editable for having more field, but only one editable

arrays

submit

twitter-bootstrap

x-editable