使用JQuery更改Flexigrid中的列顏色

我正在使用FlexiGrid並希望根據變量值更改列顏色。使用JQuery更改Flexigrid中的列顏色

請你能告訴我如何實現它？有沒有可以在colModel中使用的屬性？

我嘗試這樣做，但它不工作，它抱怨說，它不能支持changeColumn

$('#Flexigrid1').changeColumn('FirstName'); 
var result = false; 

     (function($) { 

      function changeColumn(columnName) { 
       if (!result) { 
        $('table tr').each(function() { 
         $(this).find('td').eq(column).css('background-color', 'red'); 
        }); 
       } 
      } 
     })(jQuery);

來源

2013-08-29 Kanchana

你需要與你的功能首先是擴展了jQuery庫。例如：

jQuery.fn.extend({ 
    changeColumn: function(columnName) {

但是，您的代碼還存在其他一些問題。例如，您似乎沒有在該名稱空間內指定變量result，而您的選擇器$('table tr')正在查看整個DOM中的所有錶行。

在您最後一次嘗試我不建議這樣做，而是教你關於jQuery的擴展我已經寫了下面的示例代碼一點：

// Create the changeColumnColor function 
jQuery.fn.extend({ 

    changeColumnColor: function (color) { 
     $(this).css('background-color', color); 
    } 
}); 


$(document).ready(function() { 

    // Make the table a flexigrid 
    $('#testTable').flexigrid(); 

    // Call your custom function 
    $('#testTable td.firstName').changeColumnColor('red'); 
});

的jsfiddle：http://jsfiddle.net/markwylde/Jk6ew/

我會但是，仍然建議您考慮擴展實際的flexigrid插件本身，使用任何現有的功能，或者使用更簡單的單線解決方案，例如：

$('#testTable td.firstName').css('background-color', 'red');

或者，如果你不能給你的表類，不知道該列的內容：

$('#testTable td:first-child').changeColumnColor('red'); 

$('#testTable td:nth-child(3)').changeColumnColor('red');

另一種辦法是改變你的CSS如果顏色是靜態的。

除了您的評論以下您可以做以下，這將與flexigrid目前的標準/命名約定保持一致。稍微

(function($) { 
    $.fn.flexChangeColumnColor = function (tableHeader) { 
     // Get the column index we're changing 
     idx = ($(this).parents(".flexigrid:eq(0)").find("th").filter(function() { 
       return $(this).text() === tableHeader; 
      }).index()); 

     // Make the changes 
     $('td:nth-child(' + (idx+1) + ')', this).css('background-color', 'red'); 
    } 
})(jQuery); 


$(document).ready(function() { 

    $('#testTable').flexigrid(); 

    $('#testTable').flexChangeColumnColor('Test Col 3'); 

});

HTML的變化來證明，所以請參閱更新：的jsfiddle：http://jsfiddle.net/markwylde/Jk6ew/1/

來源

2013-08-29 19:27:35 Mark

感謝您的輸入。不過，我只想擴展Flexigrid功能。有什麼辦法可以做到嗎？ – Kanchana

更新我的帖子回答你的問題。您也可以通過https://code.google.com/p/flexigrid/source/browse/trunk/js/flexigrid.js – Mark

查看flexigrid源代碼以幫助您獲取示例。您知道我剛纔在此行中添加了這行代碼我的JavaScript文件： if（result）{（「＃Flexigrid1」）。find（「tr td：nth-child（1）」）。css（'background-color'，'red'）; } 它按照我的預期工作。感謝您的幫助。我曾期待它能夠在一行中完成，因爲我已經知道列 – Kanchana

使用JQuery更改Flexigrid中的列顏色

回答

相關問題