Показать сообщение отдельно
  #36 (permalink)  
Старый 05.04.2016, 22:13
Аспирант
Отправить личное сообщение для karden Посмотреть профиль Найти все сообщения от karden
 
Регистрация: 16.01.2016
Сообщений: 57

Опять заткнулся...

Надо сделать автоматический скроллинг таблицы с описанием дат на календаре.

В сети нашел такое решение: http://jsfiddle.net/tzjrq1vt/2/ , которое и было взято за основу.

Вот, что получилось...

$(document).on("mouseenter",'[data-handler="selectDay"]',function(){

// Всякое...

if (ReservID > 0) {

    var w = $('#ReservListDiv' + AppartID);
    var table = $('#ReservList' + AppartID);
    var row = table.find('tr')
        .eq( +$('#ReservListItem'+ReservID).index());

    if (row.length) {
console.log('w.height()='+w.height(), 'row.position().top='+row.position().top);


//        $('#ReservList' + AppartID).animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
        $('#ReservList' + AppartID).animate({'top': row.position().top+'px'}, 1000 );
    }


});

// Таблица - шапка из шаблона:

<div id="ReservListDiv<TMPL_VAR NAME="ID">" style="height:150px; overflow:auto; margin-top:20px;">
     <table width="100%" id="ReservList<TMPL_VAR NAME="ID">" class="DataList ReservesList">
	  <thead>
       <tr>
        <th width="200"><span style="position:absolute; top:-20px; z-index:2; height:20px; ">Период</span></th>
        <th><span style="position:absolute; top:-20px; z-index:2; height:20px; ">Описание</span></th>
        <th><span style="position:absolute; top:-20px; z-index:2; height:20px; ">Статус</span></th>
       </tr>
       </thead>
     </table>
	</div>

// Добавляются строки так:

var dt = DayStatus["RESERV"][ReservID]["DateReservedBegin"].split('.');
		var DtTS = (new Date(dt[2],dt[1]-1,dt[0])).getTime();

		var tr = $("<tr>", {
			id: "ReservListItem" + ReservID,
			"class": "xReservListItem",
			'sortValue': DtTS
		}).appendTo($("#ReservList" + AppartID));

		var td = $("<td>", {
			
			text: DayStatus["RESERV"][ReservID]["DateReservedBegin"] + " - " +
				DayStatus["RESERV"][ReservID]["DateReservedEnd"] + " (" +
				DayStatus["RESERV"][ReservID]["ReservedDays"] + ")"
		}).appendTo(tr);

		var td = $("<td>", {
			html: DayStatus['RESERV'][ReservID]['UserFullName']+'<br>'+
				DayStatus['RESERV'][ReservID]['Phone']
		}).appendTo(tr);

		var td = $("<td>", {
			text: "text3"
		}).appendTo(tr);


в лог пишется все красиво (все нужные переменные похожи на правду)

shell?m=36:1095 w.height()=150 row.position().top=108
shell?m=36:1095 w.height()=150 row.position().top=126
shell?m=36:1095 w.height()=150 row.position().top=144
2shell?m=36:1095 w.height()=150 row.position().top=212
shell?m=36:1095 w.height()=150 row.position().top=178
3shell?m=36:1095 w.height()=150 row.position().top=246
shell?m=36:1095 w.height()=150 row.position().top=178
6shell?m=36:1095 w.height()=150 row.position().top=212
2shell?m=36:1095 w.height()=150 row.position().top=178
shell?m=36:1095 w.height()=150 row.position().top=212

Собственно, проблема, на сколько я понимаю, либо в вызове animate, либо в параметрах DIV или таблицы. Совсем не могу понять куда двигаться дальше...

Спасибо.
Ответить с цитированием