javascript - jQuery jEditables - optgroup で選択

Question

私はjEditableを使用していますが、 optgroupsで選択( 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'
    }
);