0

有没有办法像这样在 jQuery flexigrid 中隐藏和显示列？

$('#FlexigridID').hideCol('ColumnName');
$('#FlexigridID').showCol('ColumnName');
4

4 回答 4

2

新代码测试：

$(function () {


    var visible = true;
    $('#yo').click(function () {
        alert('hello');

        visible = !visible;
        showColumn('#yourFlexigridNameHere', 'Lastname', visible);
    });

});


// you can put this in a separate javascript library
function showColumn(tbl, columnName, visible) {

    var grd = $(tbl).closest('.flexigrid');
    var colHeader = $('th[abbr=' + columnName + ']', grd);
    var colIndex = $(colHeader).attr('axis').replace(/col/, "");


    // queryVisible = $(colHeader).is(':visible');
    // alert(queryVisible);

    $(colHeader).toggle(visible);

    $('tbody tr', grd).each(
        function () {
            $('td:eq(' + colIndex + ')', this).toggle(visible);
        }
    );

}

HTML：

<input id='yo' type="button" />

您还可以在 flexigrid 的 colModel 设置中将 hide 设置为 false：

colModel: [
    {display: 'Row ID', name : 'Lastname', width : 100, 
     sortable : true, align: 'left', hide: false}

你也可以添加一个针对 flexigrid 的方法，你可以把它放在一个单独的 javascript 库中：

(function ($) {

    $.fn.showColumn = function (columnName, visible) {        

        if (visible == undefined) visible = true;

        var grd = this.closest('.flexigrid');        
        var colHeader = $('th[abbr=' + columnName + ']', grd);
        var colIndex = $(colHeader).attr('axis').replace(/col/, "");

        $(colHeader).toggle(visible);

        $('tbody tr', grd).each(
            function () {                
                $('td:eq(' + colIndex + ')', this).toggle(visible);
            }
        ); 
    };

    $.fn.hideColumn = function (columnName) {
        this.showColumn(columnName, false);
    }

})(jQuery);

您现在可以使用这些调用隐藏和显示：

$('#FlexigridID').hideColumn('ColumnName');
$('#FlexigridID').showColumn('ColumnName');


visible = !visible; // for toggling need
$('#FlexigridID').showColumn('ColumnName', visible);
于 2012-04-23T11:15:09.110 回答
0

尝试这个：

$('#FlexigridID').find("tr td").eq(columnIndex).hide();
$('#FlexigridID').find("tr td").eq(columnIndex).show();
于 2012-04-23T10:47:11.530 回答
0

尝试这样的事情

$('td:nth-child(2)').hide();

对于带有标题的表（th）

$('td:nth-child(2),th:nth-child(2)').hide();

阅读有关使用单行 jQuery 代码隐藏表格列的更多信息

于 2012-04-24T11:33:54.403 回答
0 
$("#yourFlexigridNameHere").flexToggleCol(columnIndex, false);
//columnIndex - starts from 0
于 2019-02-27T08:08:03.460 回答