Question

我在Datatables使用X-editable并在表格中使用了一些引导按钮。基本上，如果用户更新可编辑的状态＆＃39;列到＆＃39;已解决＆＃39;我想要“验证”中的按钮。列变为绿色。如果状态切换回任何其他状态，它应该变回红色。

这是我的代码，任何帮助表示赞赏。我不确定是否应该在x-editable save事件或datatables click事件上执行此操作。

我有一个小提琴设置：http://jsfiddle.net/n74zo0ms/2/

HTML：

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover" id="dataTables">
    <thead>
      <tr>
        <th>Occured <i class="fa fa-sort"></i></th>
        <th>Status <i class="fa fa-sort"></i></th>
        <th>Validated <i class="fa fa-sort"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="center">12/08/2015 22:36</td>
        <td><span id="status" class="status" data-type="select"></span></td>
        <td><a href="#" class="btn-sm btn-danger" style="margin-left: 5px;"><i class="fa fa-exclamation-triangle"></i> Not Validated</a></td>
      </tr>
    </tbody>
  </table>
</div>

JQuery的：

//Switch button to green if status = resolved
$('#dataTables').on('click', '.btn-danger', function(e) {
  if ($('#status').text() == 'Resolved') {
    var cell = $(this).closest('td');

    $.get($(this).attr('href'), function() {
      // Update "Resolved" column
      $('#dataTables').DataTable().cell(cell).data(
        '<a href="#" class="btn-sm btn-success" style="margin-left: 5px"><i class="fa fa-thumbs-o-up"></i> Resolved</a>'
      );
    });

    e.preventDefault();
  }
});

Answer 1

我对您的代码进行了一些更新，以根据状态实现按钮更改。我从html中删除了按钮，并在保存按钮的td中添加了一类.validate。我删除了$（＆＃39;＃dataTables＆＃39;）。（＆＃39;点击＆＃39;）方法。我在$（＆＃39; #status＆＃39;）。editable（{}）中添加了额外的代码。

HTML更改

<tbody>
  <tr>
    <td align="center">12/08/2015 22:36</td>
    <td><span id="status" class="status" data-type="select"></span></td>
    <td class="validated"></td>
  </tr>
</tbody>

JavaScript更改

//initialize the editable column
$('#status').editable({
  url: '/post',
  pk: 1,
  source: [{
    value: 'New',
    text: 'New'
  }, {
    value: 'In Progress',
    text: 'In Progress'
  }, {
    value: 'Resolved',
    text: 'Resolved'
  }],
  title: 'Example Select',
  validate: function(value) {
    var cell = $(this).parent().parent().find(".validated");
    cell.empty();
    if(value == 'Resolved') {
      cell.append('<a href="#" class="btn-sm btn-success" style="margin-left: 5px"><i class="fa fa-thumbs-o-up"></i> Resolved</a>');
    } else {
      cell.append('<a href="#" class="btn-sm btn-danger" style="margin-left: 5px;"><i class="fa fa-exclamation-triangle"></i> Not Validated</a>');
    };
  }
});

您可以在此处查看工作示例： http://jsfiddle.net/n74zo0ms/7/

根据表格中的另一列更改按钮颜色

1 个答案: