根据字段值更改页面加载时的按钮颜色

Change button color on page load based on field value

本文关键字：加载 按钮 颜色 字段      更新时间：2023-09-26

我正在使用具有X可编辑的数据表，并且在表中有一些引导按钮。基本上，如果用户将可编辑的"状态"列更新为"已解决"，我希望上一行中的"未验证"按钮变为黄色。如果状态切换回任何其他状态，则应恢复为红色。

我正在使用Datatables分组功能添加"未验证"按钮并且颜色更改正在工作，但是，如何在页面加载时检查状态字段的值并设置正确的颜色？

我有一个JSFiddle设置：http://jsfiddle.net/n74zo0ms/19/

JQuery：

//initialize the datatable
$(document).ready(function() {
  var table = $('#dataTables').DataTable({
    "columnDefs": [{
      "visible": false,
      "targets": 0
    }],
    "info": false,
    "searching": false,
    "drawCallback": function(settings) {
      setupXedit();
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();
      var last = null;
      api.column(0, {
        page: 'current'
      }).data().each(function(group, i) {
        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><th colspan="2"></i><i class="fa fa-arrow-circle-o-right"></i>   Cluster: ' + group + '</th><th colspan="1"><a href="" data-toggle="modal" data-target="" class="btn-sm btn-danger btn-switch" style="display:block;width:99%;text-align:center;"><i class="fa fa-exclamation-triangle fa-switch"></i> Not Validated</a></th></tr>'
          );
          last = group;
        }
      });
    }
  });
});
function setupXedit() {
  //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().prev().find(".btn-switch");
      var cell2 = $(this).parent().parent().prev().find(".fa-switch");
      if (value == 'Resolved') {
        cell.removeClass('btn-danger');
        cell2.removeClass('fa-exclamation-triangle');
        cell.addClass('btn-warning');
        cell2.addClass('fa-thumbs-o-down');
      } else {
        cell.removeClass('btn-warning');
        cell2.removeClass('fa-thumbs-o-down');
        cell.addClass('btn-danger');
        cell2.addClass('fa-exclamation-triangle');
      };
    }
  });
}

把这段代码放在其他函数的上方，紧跟在 $（document）.ready（function（） {

$(".status").each(function(){
    if($(this).text() === "Resolved"){
        ...do stuff....
        ..set color
        ..set text
    }
});
相关文章：