问行动态选择

EN

var athings = '';
$(function() {
  $.ajax({
    url: "mythings.json"
  }).done(function(data) {
    athings = data;
    dotable();
  }).fail(function() {
    console.log("failed do default");
    athings = '{"1": "Apples", "2": "Beef", "3": "Candy"}';
    dotable();
  });

  function dotable() {
    $('#example6').Tabledit({
      url: 'example.php',
      columns: {
        identifier: [0, 'id'],
        editable: [
          [1, 'name'],
          [2, 'avatar', athings]
        ]
      }
    });
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://getbootstrapadmin.com/remark/global/vendor/jquery-tabledit/jquery.tabledit.min.js?v4.0.2"></script>

<div class="table-responsive">
  <table class="table table-striped table-bordered" id="example6">
    <thead>
      <tr>
        <th>#</th>
        <th>Username</th>
        <th>Avatar</th>
        <th class="tabledit-toolbar-column"></th>
      </tr>
    </thead>
    <tbody>
      <tr id="1" class="danger">
        <td><span class="tabledit-span tabledit-identifier">1</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="1" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span" style="display: inline;">markcellbites</span><input class="tabledit-input form-control input-sm" type="text" name="username" value="markcell" style="display: none;" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span" style="display: inline;">Captain America</span>

        </td>
        <td style="white-space: nowrap; width: 1%;" class="tabledit-view-mode">
          <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
            <div class="btn-group btn-group-sm" style="float: none;"><button type="button" class="tabledit-edit-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-pencil"></span></button><button type="button" class="tabledit-delete-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-trash"></span></button></div>
            <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="float: none; display: none;">Save</button>
            <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
            <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
          </div>
        </td>
      </tr>
      <tr id="2" class="danger">
        <td><span class="tabledit-span tabledit-identifier">2</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="2" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">dotz</span><input class="tabledit-input form-control input-sm" type="text" name="username" value="dotz" style="display: none;" disabled=""></td>

        <td class="tabledit-view-mode"><span class="tabledit-span">Captain America</span>

        </td>
        <td style="white-space: nowrap; width: 1%;" class="tabledit-view-mode">
          <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
            <div class="btn-group btn-group-sm" style="float: none;"><button type="button" class="tabledit-edit-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-pencil"></span></button><button type="button" class="tabledit-delete-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-trash"></span></button></div>
            <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
            <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
            <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
          </div>
        </td>
      </tr>
      <tr id="3" class="danger">
        <td><span class="tabledit-span tabledit-identifier">3</span><input class="tabledit-input tabledit-identifier" type="hidden" name="id" value="3" disabled=""></td>
        <td class="tabledit-view-mode"><span class="tabledit-span">zikospeed</span><input class="tabledit-input form-control input-sm" type="text" name="username" value="zikospeed" style="display: none;" disabled=""></td>

        <td class="tabledit-view-mode"><span class="tabledit-span">Black Widow</span>

        </td>
        <td style="white-space: nowrap; width: 1%;" class="tabledit-view-mode">
          <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
            <div class="btn-group btn-group-sm" style="float: none;"><button type="button" class="tabledit-edit-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-pencil"></span></button><button type="button" class="tabledit-delete-button btn btn-sm btn-default" style="float: none;"><span class="glyphicon glyphicon-trash"></span></button></div>
            <button type="button" class="tabledit-save-button btn btn-sm btn-success" style="display: none; float: none;">Save</button>
            <button type="button" class="tabledit-confirm-button btn btn-sm btn-danger" style="display: none; float: none;">Confirm</button>
            <button type="button" class="tabledit-restore-button btn btn-sm btn-warning" style="display: none; float: none;">Restore</button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>