I have a problem with TableEdit
This is in the documentation I read:
// Example #2
columns: {
// Column used to identify table row.
// [column_index, input_name]
identifier: [0, 'id'],
// Columns to transform in editable cells.
// [[column_index, input_name], [column_index, input_name, select_options]]
editable: [[1, 'car'], [2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}']]
}
In the editable key, the second array contains a json-like string that renders as a dropdown list when I press the edit button.
My question is, how do I make that json-like string dynamically?
I have an ajax request that returns a list of departments. I want to pass those departments into that editable column.
In my opinion you can try call ajax request to get a list of department. After that create tabledit. You can try like this:
Javascript:
After ajax request done. You can use JSON.stringify() to onvert a JavaScript object into a string.
function initTableEdit() {
$.post('select-data.php')
.done(function (res) {
let data = [[1, 'First Name'], [2, 'Last Name'], [3, 'Username', JSON.stringify(res)]]
creatTableEdit(data)
})
}
function creatTableEdit(data) {
$('#example2').Tabledit({
editButton: true,
removeButton: false,
columns: {
identifier: [0, 'id'],
editable: data
}
});
}
PHP: select-data.php
<?php
header('Content-Type: application/json');
echo json_encode([
1 => '@mdo', 2 => '@fat', 3 => '@twitter',
]);
die();