JQuery TablEdit add editable column dropdown option from database-CodePudding

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.

CodePudding user response：

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