Tabledit jquery插件选择字段不起作用

f0ofjuux  于 2023-04-05  发布在  jQuery
关注(0)|答案(1)|浏览(103)

我尝试了jquery的Tabledit插件。它工作正常。但是如果我想将编辑字段作为选择字段,它就不起作用了。编辑字段也显示为文本输入字段,而不是选择字段。我做错了什么。

$('#mytable').Tabledit({
  columns: {
    identifier: [0, "id"],
    editable: [
      [1, 'car'],
      [2, 'color', '{"1": "red", "2": "green"}']
    ]
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit@1.0.0/jquery.tabledit.min.js"></script>


<table id="mytable">
  <thead>
    <tr>
      <th>id</th>
      <th>Car</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ferrari</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lotus</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>
bfrts1fy

bfrts1fy1#

我假设你使用的代码运行得很好。由于这个问题在过去的几年中已经被访问过很多次,我想我可能会修改一下,以保存其他开发人员的时间,以防有人试图通过AJAX从数据库中获取数据,并将其直接放置在JQuery Table Edit插件的选择字段中。

$(document).ready(async function(){
  var data_ ='';

  await fetch("get_sub.php").then((response) => {
          if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                            // check for any errors.
              // In case of an error, throw.
              throw new Error("Something went wrong!");
          }

          return response.json(); // Parse the JSON data.
      }).then((data) => {
           // This is where you handle what to do with the response.
           data_ = JSON.stringify(data);
           data_ = "{"+data_.replace(/[{}\[\]]+/g, '')+"}";
      }).catch((error) => {
           // This is where you handle errors.
           console.log(error);
      });

    $('#data_table').Tabledit({
            deleteButton: true,
            editButton: true,
            restoreButton: true,
            columns: {
              identifier: [0, 'id'],
              editable: [[1, 'car'], [2, 'color', data_]]
            },
            hideIdentifier: true,
            url: 'live_edit.php',
            onSuccess: function(data, textStatus, jqXHR) {
                alert('Updated!');
            },
            onFail: function(jqXHR, textStatus, errorThrown) {
              console.log('Error: ('+textStatus+') '+ errorThrown);
              console.log(jqXHR);
                alert('Error: ('+textStatus+') '+ errorThrown+' => '+jqXHR);
            },
            onAjax: function(action, serialize) {
                // open your xhr here 
                console.log("on Ajax");
                console.log("action : ", action);
                console.log("data : ", serialize);
                return serialize;
            }
          });

希望这个有用。

相关问题