基於字段值更改頁面加載時的按鈕顏色

我正在使用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

基於字段值更改頁面加載時的按鈕顏色

回答

相關問題