Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2017, 12:39
Интересующийся
Отправить личное сообщение для alexsum Посмотреть профиль Найти все сообщения от alexsum
 
Регистрация: 24.09.2010
Сообщений: 17

событие завершения отрисовки таблицы
Есть таблица, в которую динамически добавляются строки, соответственно может меняться ширина колонок.
Есть вторая таблица, которая представляет собой полную копию заголовка первой. (в т.ч. размеры)
Как отследить изменение ширины колонок первой для применения размеров во второй.
Интересует само событие, все остальное реализовано.
Если запускать функцию выравнивания размеров в функции обновления первой таблицы (добавление/изменение/удаление строк) то она отрабатывает по старым размерам.
Ответить с цитированием
  #2 (permalink)  
Старый 28.03.2017, 13:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

alexsum,
вот что димнамически строки добавляет в первую то пусть и вторую таблицу корректирует.
Ответить с цитированием
  #3 (permalink)  
Старый 28.03.2017, 13:42
Интересующийся
Отправить личное сообщение для alexsum Посмотреть профиль Найти все сообщения от alexsum
 
Регистрация: 24.09.2010
Сообщений: 17

рони,
так и есть, но, похоже, пока таблица не выведется (отрисуется), ширина столбцов не меняется. При "вот что димнамически строки добавляет в первую то пусть и вторую таблицу корректирует" размеры берутся еще старые
Ответить с цитированием
  #4 (permalink)  
Старый 28.03.2017, 13:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от alexsum
Интересует само событие
http://frontender.info/mutation-observers-tutorial/

Последний раз редактировалось laimas, 28.03.2017 в 14:20.
Ответить с цитированием
  #5 (permalink)  
Старый 28.03.2017, 14:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

alexsum,
function addData() {
   //здесь изменили 1 таблицу
  window.setTimeout(function () {
   //здесь получили размер первой и изменили вторую
},0)

}
Ответить с цитированием
  #6 (permalink)  
Старый 28.03.2017, 21:36
Интересующийся
Отправить личное сообщение для alexsum Посмотреть профиль Найти все сообщения от alexsum
 
Регистрация: 24.09.2010
Сообщений: 17

рони,
с таймером не получится потому как может быть и 1000 записей и медленное железо, т.е. записи обработались, сработал выравниватель, а уже потом пошел вывод и реальное изменение ширины
Ответить с цитированием
  #7 (permalink)  
Старый 28.03.2017, 21:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

alexsum,
вам виднее
Ответить с цитированием
  #8 (permalink)  
Старый 29.03.2017, 10:05
Интересующийся
Отправить личное сообщение для alexsum Посмотреть профиль Найти все сообщения от alexsum
 
Регистрация: 24.09.2010
Сообщений: 17

laimas,
то-же, что и с таймаутом
Ответить с цитированием
  #9 (permalink)  
Старый 29.03.2017, 13:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от alexsum
то-же, что и с таймаутом
Значит не смогли применить должным образом.
Ответить с цитированием
  #10 (permalink)  
Старый 03.04.2017, 10:33
Интересующийся
Отправить личное сообщение для alexsum Посмотреть профиль Найти все сообщения от alexsum
 
Регистрация: 24.09.2010
Сообщений: 17

// setFixedTableHeader(name) создает клон заголовка таблицы
// resetFixedTableHeader(name) обновляет клон заголовка после обновления основной таблицы
// clearFixedTableHeader(name) удаляет клон заголовка таблицы

function setFixedTableHeader(name){
	var newthead="";
	if(! $("#"+name+"_topdiv").length){
		$("#"+name).wrap("<div style=\"overflow: auto; height:100%; width:100%;\" id=\""+name+"_topdiv\" ></div>");
	}
	if($("#"+name+"_thd").length){
		$("#"+name+"_thd").remove();
	}
	var zindex=$("#"+name).css("z-index");
	if(isNaN(zindex)){
		zindex=1;
	}else{
		zindex++;
	}
	$("#"+name).before("<table style=\"background-color:white;z-index:"+zindex+";position:fixed;width:"+$("#"+name).width()+"px\" id='"+name+"_thd'><thead></thead></table>");
	if(! $("#"+name+"_topdiv1").length){
		$("#"+name).wrap("<div style=\"overflow: auto; height:100%; width:100%;overflow-y: scroll;\" id=\""+name+"_topdiv1\" ></div>");
	}
	$('#'+name+' thead th').each(function(){
		var stlh=$(this).attr("style");
		if(typeof stlh !== "undefined"){
			stlo=' stlh="'+stlh+'" ';
		}else{
			stlo="";
			stlh="";
		}
		var cls=$(this).attr("class");
		if(typeof cls === "undefined"){
			cls="";
		}
		var ids=$(this).attr("id");
		if(typeof ids !== "undefined"){
			ids=' id="'+ids+'" ';
		}else{ids="";}
		var names=$(this).attr("name");
		if(typeof names !== "undefined"){
			names=' name="'+names+'" ';
		}else{names="";}
		
		newthead=$("<th "+ids+names+" style=\"/*border:1px solid white;*/"+stlh+";width:"+ $(this).width()+"px;height:"+$(this).height()+"px;\" "+stlo+">"+$(this).text()+"</th>");
		newthead=$("<th "+ids+names+" style=\"/*border:1px solid grey;*/"+stlh+";width:"+ $(this).width()+"px;/*height:"+$(this).height()+"px;*/\" "+stlo+">"+$(this).text()+"</th>");
		$('#'+name+'_thd thead').append(newthead);
		if(cls.length>0){
			newthead.addClass(cls);
		}
	});
	$("#"+name+"_thd").css("top",$("#"+name).css("top"));
	$("#"+name).css({
		position: "relative"
	});

	var $viewport = $(window); 

	$viewport.scroll(function(){
		FTHsetOffset(name);
	});	
	
	$( window ).resize(function() {
		clearTimeout(FTHdoit);
		FTHdoit=setTimeout(resetFixedTableHeader(name),150);
	});	

	FTHsetOffset(name);		
	
	if(!$("#resetfixsedtablediv").length){
		$("body").prepend("<div style='display:none' id='resetfixsedtablediv'></div>");
		addObserverIfDesiredNodeAvailable();
	}
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;


var composeObserver = new MutationObserver(function(mutations) { 
	mutations.forEach(function(mutation) {	
	});
	refreshTimer();
});
		
function refreshTimer(){
	$("#resetfixsedtablediv div").each(function(){
		resetFTH($(this).attr('refresh'));
		console.log('rfth '+$(this).attr('refresh'));
		$(this).remove();
	});			
}
		
function addObserverIfDesiredNodeAvailable() {
	var composeBox = document.querySelector('#resetfixsedtablediv');
	if(!composeBox) {
		window.setTimeout(addObserverIfDesiredNodeAvailable,500);
		return;
	}
	var config = {
			attributes: false, 
			childList: true, 
			characterData: false 
		};
	composeObserver.observe(composeBox,config);
}		


var FTHdoit;

function FTHsetOffset(name){
	if($("#"+name+"_thd").length){
		var left=$("#"+name+"_thd").parent().offset().left;
		var top=$("#"+name+"_thd").parent().offset().top;//+ $("#"+name).position().top - $("#"+name+"_thd").height();;
		var st=$('html,body').scrollTop();
		if(st==0){
			st=$('body').scrollTop();
		}
		var ctop=-st + top;
		ctop=$("#"+name+"_topdiv").offset().top-st;
		if(ctop<0){ctop=0;}
		if(top + $("#"+name+"_thd").parent().height()-$("#"+name+"_thd").height()<(st)){ctop=-top;}

		$("#"+name+"_thd").css({
			left: -$(this).scrollLeft() + left,
			top: ctop
		});
	}
}
function clearFixedTableHeader(name){
	$("#"+name+"_thd thead th").each(function(index,value){
		$("#"+name+" thead th:eq("+index+")").text($(value).text());
	});
	$("#"+name+"_thd").remove();
}


function resetFixedTableHeader(name){
	var doit=true;
	$("#resetfixsedtablediv div").each(function(){
		if($(this).attr('refresh')==name) doid=false;
	});	
	if(doit)
		$("#resetfixsedtablediv").append("<div refresh='"+name+"'></div>");
}


function resetFTH(name){
	$("#"+name+"_thd").hide();
	$("#"+name+"_thd").width($("#"+name).width());
	$("#"+name+" thead th").each(function(index,value){
		$("#"+name+"_thd thead th:eq("+index+")").html($(value).html());
		$("#"+name+"_thd thead th:eq("+index+")").width($(value).width());
		$("#"+name+"_thd thead th:eq("+index+")").height($(value).height());
	});			
	FTHsetOffset(name);	
	$("#"+name+"_thd").show();
}

где-то так. так и не работает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отменить событие для ячейки таблицы kot_k_k jQuery 4 19.02.2016 13:46
подключ. стиля через innerHTML - событие завершения aRpi Events/DOM/Window 5 02.09.2015 17:11
Событие scroll. Не цепляется строка таблицы karssen Javascript под браузер 7 15.07.2015 14:29
Динамичская подгрузка скриптов - событие завершения загрузки? Kot137 Общие вопросы Javascript 2 24.11.2014 01:26
Запрет отрисовки браузером таблицы kidar2 Events/DOM/Window 9 25.05.2010 06:34