使用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/