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