I managed to do this by creating a custom input type (I called it optgroup).
It works under the assumption that json for data is of 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); }); }); }); } }
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' } );