jQuery jEditables - 使用optgroup选择

Question

我使用jEditable,我想知道,如果,如果有可能有一个选择(类型=选择)与optgroups？

Answer 1

我设法通过创建自定义输入类型（我称之为optgroup）来做到这一点。

它的工作原理是假设数据的 json 格式为：

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}];

这是代码；

optgroup: {
   element : function(settings, original) {
        var select = $('<select class="opt" />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        if (String == data.constructor) {      
            eval ('var json = ' + data);
        } else {
            var json = data;
        }

        var addto = $('select', this);
        $.each(json, function(i, optgroups) {
            $.each(optgroups, function(groupName, options) {
                var $optgroup = $("<optgroup>", {label: groupName});
                $optgroup.appendTo(addto);
                $.each(options, function(j, option) {
                    var $option = $("<option>", {text: option.name, value: option.id});
                    $option.appendTo($optgroup);
                });
            });
        });
    }
}

使用；

$('.editable').find('td').editable(
    function(v, s) {
        // do whatevere you need to...
    }, 
    {
        "data"   : [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}],
        "indicator": 'Saving ...',
        "tooltip": 'Double Click to edit',
        "type": 'optgroup',
        "submit": 'Save changes',
        "event": 'dblclick'
    }
);