javascript - jQuery jEditables - 使用 optgroup 选择

Question

我正在使用 jEditable并且想知道是否可以使用optgroups 进行select (type=select)？

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'
    }
);