javascriptjqueryjeditable

jQuery jEditables - Select with optgroup


I am using jEditable and am wondering if if it is possible to have a select (type=select) with optgroups?


Solution

  • I have managed to do this by creating a custom input type (I called it optgroup).

    It works on the assumption the json for data is in the form;

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

    This is the code;

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

    To use;

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