使用JQuery在Flexigrid中更改列顏色

Question

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

Answer 1

首先，您需要使用函數擴展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/