Согласованные заголовки сетки с Flexigrid?

Ответ 1

Я тоже работаю над этим сегодня. То, что я придумал, включает в себя добавление обработчика onSuccess и выяснение, какой максимальный размер каждого столбца находится между заголовком и телом, а затем установка ширины обоих максимальных значений для этого столбца.

grid.flexigrid({

  ...other setup...

  onSuccess: function() {
       format();
    });
  }
});

function format() {
    var gridContainer = this.Grid.closest('.flexigrid');
    var headers = gridContainer.find('div.hDiv table tr:first th:not(:hidden)');
    var drags = gridContainer.find('div.cDrag div');
    var offset = 0;
    var firstDataRow = this.Grid.find('tr:first td:not(:hidden)');
    var columnWidths = new Array( firstDataRow.length );
    this.Grid.find( 'tr' ).each( function() {
        $(this).find('td:not(:hidden)').each( function(i) {
            var colWidth = $(this).outerWidth();
            if (!columnWidths[i] || columnWidths[i] < colWidth) {
                columnWidths[i] = colWidth;
            }
        });
    });
    for (var i = 0; i < columnWidths.length; ++i) {
        var bodyWidth = columnWidths[i];

        var header = headers.eq(i);
        var headerWidth = header.outerWidth();

        var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;

        firstDataRow.eq(i).css('width',realWidth);
        header.css('width',realWidth);            
        drags.eq(i).css('left',  offset + realWidth );
        offset += realWidth;
    }
}

Ответ 2

У меня тоже была эта проблема. Вот мое исправление, и оно отлично работает. В flexigrid.js по строке 678 измените эту строку.

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth)[0].style.width});

к этому

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width() + "px"});

И вы все настроены.

Ответ 3

Мое решение намного проще, чем другие.

Прежде чем вызвать функцию flexigrid, добавьте следующее:

$("#yourtable th").each(function() {
  $(this).attr("width", $(this).width());
});

Это приведет к тому, что ширина заголовков столбцов будет такой же широкой, как текст в них (в отличие от ручной установки каждой ширины заголовка либо с помощью css, либо в разметке) и сделать столбцы тела таблицы одинаковыми.

Ответ 4

Я получил это, чтобы работать (по крайней мере частично). Проблема, с которой я столкнулся в своей предыдущей итерации (которая также была связана с реализацией tvanfosson), заключалась в том, что после изменения размеров заголовков бары перетаскивания не будут выравниваться с новыми ширинами столбцов.

Моя текущая реализация приведена ниже, которая работает в Firefox 3.5 и Chrome. К сожалению, в IE (все версии) есть какое-то исключение, которое довольно сбивает с толку. Я буду отлаживать дальше в понедельник:

$(".flexigrid").each(function() {
    var grid = $(this);
    var headers = grid.find(".hDiv thead th");
    var row = grid.find(".bDiv tbody tr:first");
    var drags = grid.find("div.cDrag div");
    if (row.length >= 1) {
        var cells = row.find("td");
        var offsetAccumulator = 0;
        headers.each(function(i) {
            var headerWidth = $(this).width();
            var bodyWidth = cells.eq(i).width();
            var realWidth = bodyWidth > headerWidth ? bodyWidth : headerWidth;

            $(this).width(realWidth);
            cells.eq(i).width(realWidth);

            var drag = drags.eq(i);
            var dragPos = drag.position();
            var offset = (realWidth - headerWidth);
            var newPos = dragPos.left + offset + offsetAccumulator;
            offsetAccumulator += offset;
            drag.css("left", newPos);
        });
    }
});

Ответ 5

Спасибо. Основываясь на позиции линии 678, моя была исправлена ​​следующим образом:

$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"});

По какой-то причине шрифт заголовка больше шрифта детали... надеюсь, что это поможет.

Ответ 6

Из вашего собственного ответа я добавил настройку min-width, чтобы столбцы не сжимались по-другому, если ширина flexigrid была слишком узкой или flexigrid изменена, проверена только в chrome:

    $(this).width(realWidth);
    cells.eq(i).width(realWidth);
    // these two lines added
    $(this).css('min-width', realWidth);
    cells.eq(i).css('min-width',realWidth);

Просто выполните это изменение размера столбца, так как это изменяет ширину div внутри th и td, но это может быть исправлено с несколькими дополнительными строками в flexigrid в функции "dragEnd":

. . .
// LINE 211
$('th:visible div:eq(' + n + ')', this.hDiv).css('width', nw);
// ADD THIS AFTER LINE 211
$('th:visible div:eq(' + n + ')', this.hDiv).parent().css('min-width', nw);
$('th:visible div:eq(' + n + ')', this.hDiv).parent().css('width', nw);
. . .
// LINE 214
$('td:visible div:eq(' + n + ')', this).css('width', nw);
// ADD THIS AFTER LINE 214
$('td:visible div:eq(' + n + ')', this).parent().css('width', nw);
$('td:visible div:eq(' + n + ')', this).parent().css('min-width', nw);

Ответ 7

Аналогичная проблема для меня. У вас есть страница с 3 вкладками, каждая с гибким. Только одна из вкладок имела проблему, когда ячейка заголовка была чем-то короче, чем ячейки данных под ней. Который также сорвал выравнивание всех ячеек заголовка после этого.

.. то, что я выяснил, проверив визуализированные элементы с помощью функции Chrome CTRL + SHIFT + J и проверив внутри элемента <div class="hDiv"... в конечном итоге найти поле <th abbr="MyColumnName"... было то, что width: <nnn>px части даже не было!

Вернулся и осмотрел, где я определял colModel и заметил только один столбец... вместо width: <MyWidthValueHere>, вместо этого я случайно набрал width: <MyWidthValueHere>, (первые буквы пробелов и все строчные буквы). Это была такая тонкая разница, что мои глаза не улавливали ее, когда сначала изучали и сравнивали/контрастировали вкладки, которые работали против этого, у которого была проблема.

Ответ 8

Я столкнулся с тем же, выяснив, что ширина моих divs, содержащих заголовки столбцов и ячейки таблицы, имела ширину = 0. Поэтому мне пришлось немного подождать, пока не будет создана целая html-таблица, тогда я должен был запустить метод "формат". Следующая вещь в том, что у меня есть таблица HTML, встроенная в невидимый div в начале. Поэтому я должен был опустить селектор not(:hidden) в своем коде.

Здесь мы идем:

    $.fn.flexAddData = function(data) { // function to add data to grid
       ...
    };
    // my own method to justify the column headers with the body
    $.fn.flexFormat = function() {
        return this.each(function() {
            var gridContainer = $('.flexigrid');
            var headers = gridContainer.find('.hDiv table tr:first th');
            var firstDataRow = gridContainer.find('.bDiv table tr:first td');
            var offSet = 10;
            // for each element in headers
            // compare width with firstDataRow elemts
            // the greater one sets the width of the lower one
            $.each(headers, function(i) {
                var thWidth = $(this).find('div').outerWidth();
                var tdWidth = $(firstDataRow[i]).find('div').outerWidth();

                thWidth > tdWidth ? $(firstDataRow[i]).find('div').width(thWidth - offSet) : $(this).find('div').width(tdWidth - offSet);

            });
        });
    }; // end format

Вызов метода следующим образом:

    setTimeout(function() {
            $('.flexigrid').flexFormat();
        }
        , 10
    );

Надеюсь, что у вас будет другое решение проблемы;-) С уважением, Кристоф

Ответ 9

Обнаружено это в другом месте:

Выяснил это - для тех, у кого есть аналогичная проблема: мне было присвоено до <div id="mygrid">, когда я назначил его <table id="mygrid">все отлично поработало!

http://markmail.org/message/kibcuxu3kme2d2e7

Ответ 10

Я знаю, что это будет странно для некоторых, но у меня была такая же проблема, и как только я изменил свой макет (целая страница, а не сама сетка), все было в порядке.

У меня была компоновка жидкости с тремя колоннами. Я переместил сетку на самую верхнюю часть страницы, сразу после тега тела, и она отлично выстроилась! Вау...

Ответ 11

Это работало для меня:

    onSuccess : function(){
         $('#flex1 > tbody').wrap('<table cellpadding="0" cellspacing="0" />');
    },

Добавьте это в опции построения flexgrid. flex1 - ваш идентификатор div flex flex.

Моше.

Ответ 12

Этот код отлично работает в моем проекте. Это похоже на другие ответы.

$("#my_table").flexigrid({
    ...
    onSuccess: function(){
        columnWidth();
        $(window).resize(function(){
            columnWidth();
        });
    }
});

function columnWidth(){
    var num_col = 0;
    //Work with the columns width of the first row of body
    $("#row1 td").each(function(td){
        //row column width greater than header column width 
        if($(this).width() > $("th[axis='col"+num_col+"']").width()){
            $("th[axis='col"+num_col+"']").width($(this).width());
            $("th[axis='col"+num_col+"']").css({"min-width":$(this).width()});
        }
        //header column width greater than row column width
        else if($("th[axis='col"+num_col+"']").width() > $(this).width()){
            $("td[abbr='"+$(this).prop('abbr')+"']").width($("th[axis='col"+num_col+"']").width());
            $("td[abbr='"+$(this).prop('abbr')+"']").css({"min-width":$("th[axis='col"+num_col+"']").width()});
        }
        ++num_col;
    });
}

Надеюсь, это решило ваши проблемы.