Итак, я пытаюсь использовать плагин flexigrid. Похоже, что он будет отлично работать в стороне от того, что похоже, что вам нужно вручную установить ширину столбца. В противном случае заголовки столбцов не совпадают с столбцами тела.
Существует ли какой-либо способ автоматического сопоставления этих значений, но при этом разрешается определять ширину столбцов по длине содержимого в столбцах (как и обычное поведение таблицы).
Я тоже работаю над этим сегодня. То, что я придумал, включает в себя добавление обработчика 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;
}
}
У меня тоже была эта проблема. Вот мое исправление, и оно отлично работает. В 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"});
И вы все настроены.
Мое решение намного проще, чем другие.
Прежде чем вызвать функцию flexigrid, добавьте следующее:
$("#yourtable th").each(function() {
$(this).attr("width", $(this).width());
});
Это приведет к тому, что ширина заголовков столбцов будет такой же широкой, как текст в них (в отличие от ручной установки каждой ширины заголовка либо с помощью css, либо в разметке) и сделать столбцы тела таблицы одинаковыми.
Я получил это, чтобы работать (по крайней мере частично). Проблема, с которой я столкнулся в своей предыдущей итерации (которая также была связана с реализацией 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);
});
}
});
Спасибо. Основываясь на позиции линии 678, моя была исправлена следующим образом:
$(tdDiv).css({textAlign:pth.align,width: $('div:first',pth).width()-10 + "px"});
По какой-то причине шрифт заголовка больше шрифта детали... надеюсь, что это поможет.
Из вашего собственного ответа я добавил настройку 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);
Аналогичная проблема для меня. У вас есть страница с 3 вкладками, каждая с гибким. Только одна из вкладок имела проблему, когда ячейка заголовка была чем-то короче, чем ячейки данных под ней. Который также сорвал выравнивание всех ячеек заголовка после этого.
.. то, что я выяснил, проверив визуализированные элементы с помощью функции Chrome CTRL + SHIFT + J и проверив внутри элемента <div class="hDiv"... в конечном итоге найти поле <th abbr="MyColumnName"... было то, что width: <nnn>px части даже не было!
Вернулся и осмотрел, где я определял colModel и заметил только один столбец... вместо width: <MyWidthValueHere>, вместо этого я случайно набрал width: <MyWidthValueHere>, (первые буквы пробелов и все строчные буквы). Это была такая тонкая разница, что мои глаза не улавливали ее, когда сначала изучали и сравнивали/контрастировали вкладки, которые работали против этого, у которого была проблема.
Я столкнулся с тем же, выяснив, что ширина моих 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
);
Надеюсь, что у вас будет другое решение проблемы;-) С уважением, Кристоф
Обнаружено это в другом месте:
Выяснил это - для тех, у кого есть аналогичная проблема: мне было присвоено до
<div id="mygrid">, когда я назначил его<table id="mygrid">все отлично поработало!
Я знаю, что это будет странно для некоторых, но у меня была такая же проблема, и как только я изменил свой макет (целая страница, а не сама сетка), все было в порядке.
У меня была компоновка жидкости с тремя колоннами. Я переместил сетку на самую верхнюю часть страницы, сразу после тега тела, и она отлично выстроилась! Вау...
Это работало для меня:
onSuccess : function(){
$('#flex1 > tbody').wrap('<table cellpadding="0" cellspacing="0" />');
},
Добавьте это в опции построения flexgrid. flex1 - ваш идентификатор div flex flex.
Моше.
Этот код отлично работает в моем проекте. Это похоже на другие ответы.
$("#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;
});
}
Надеюсь, это решило ваши проблемы.