Optgroups inside field select option..
Optgroups inside field select option..
i'm trying to create a select multiple field with optgroups:
i create the html field with create function, and it shows fine but when i try to save the selected options but doesn't do nothing, the same thing when i click on editor inline, doesn't show the setted values.
here is my code..
```
// Todo field type plug-in code
(function ($, DataTable) {
if ( ! DataTable.ext.editorFields ) {
DataTable.ext.editorFields = {};
}
var Editor = DataTable.Editor;
var _fieldTypes = DataTable.ext.editorFields;
_fieldTypes.select = {
create: function ( conf ) {
var that = this;
// Create the elements to use for the input
//Utilizamos el método jquery .when() para esperar que finalice ajax1() y tenga la variable html seteada
conf._input = $('<select>'+
'<optgroup label="Options 1">'+
'<option>Option 1.1</option>'+
'<option>Option 1.2</option>'+
'</optgroup>'+
'<optgroup label="Options 2">'+
'<option>Option 2.1</option>'+
'<option>Option 2.2</option>'+
'</optgroup>'+
'select>');
return conf._input;
}
};
})(jQuery, jQuery.fn.dataTable);
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "./resources/modules/dataTables/php/mm_exp_userProfiles.php",
table: "#tableditor",
fields: [
{ label: "Name:", name: "name" },
{ label: "Pages:", name: "pages", type: "select", separator: ',', multiple: true }
]
} );
// Activate an inline edit on click of a table cell
$('#tableditor').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
console.log(this);
} );
$('#tableditor').DataTable( {
dom: "Bfrtlp",
ajax: "./resources/modules/dataTables/php/mm_exp_userProfiles.php",
columns: [
{ data: "name" },
{ data: "pages" }
],
select: {
style: 'multiple',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
$('#approve').on( 'click', function () {
editor
.edit( false )
.val( 'approved', 1 )
.submit();
} );
} );
```
Answers
Hi,
I've afraid that this currently isn't possible with Editor. Editor uses a property attached to the option elements called
_editor_val
which is used to store the value. It does this in order to allow type safe selection (e.g.0
v'0'
andtrue
v'true'
).You could try adding that property to each DOM node (e.g.
option._editor_val = ...
- not just an attribute) I think it would work, but that's a bit of an "if"!Regards,
Allan