基于字段值更改页面加载时的按钮颜色

我正在使用X-editable的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'); 
     }; 

    } 
    }); 
}

来源

2016-03-01 solar411

把你上面的其他功能的代码，您的$（document）。就绪（函数（）{

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

之后

来源

2016-03-01 21:05:55 Blindsyde

谢谢!!这里是我更新的JSFiddle：http://jsfiddle.net/n74zo0ms/21/ – solar411

不客气，很高兴我能帮到你 – Blindsyde

如果我有一些奇怪的事情发生添加第三行。第一个工作，但第三行不检查，看看这个JSFiddle：http://jsfiddle.net/n74zo0ms/23/ – solar411

基于字段值更改页面加载时的按钮颜色

回答

相关问题