I am using jEditable and am wondering if if it is possible to have a select (type=select) with optgroups?
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'
}
);