Question

我有一个很长的页面，手风琴容器内有很多患者数据。页面顶部有一个带有一周7天的旋转木马。如果单击左箭头或右箭头，将显示上一周或下一周，反过来，将在手风琴中显示以下适用数据。

我需要做的是当用户点击左箭头或右箭头时，保持当前手风琴部分的页面位置，但仍然允许更新数据。数据当前更新，但容器位置可能会更改。该特定容器可能没有一周的数据，但下周可能有数据。

我想点击箭头，仍然显示上一个容器标题。

实施例。我在血液学容器上，然后点击右箭头。我希望血液学容器仍在视野中，即使里面没有内容。

以下是我的页面与旋转木马和容器的屏幕截图。

我知道在处理指向不同页面的链接时如何使用锚标记执行此操作，但这有点不同。

该项目使用Angular异步获取容器的新数据。你可以在下面看到它。感谢

以下是我的轮播代码：

    <div id="myCarousel" class="carousel slide russ" data-ride="carousel" data-interval="false">
        <div class="carousel-inner" role="listbox"></div>
        <a class="left carousel-control" href=".russ" role="button" data-slide="prev">
            <span class="fa fa-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href=".russ" role="button" data-slide="next" onclick="stopVerticalScrolling()">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </a>
    </div>

我的第一个问题是：

<script>
    function stopVerticalScrolling() {
        var scroll = $(window).scrollTop();
        $("html").scrollTop(scroll);

        //javascript: alert($(window).scrollTop());
    }
</script>

AngularJS代码：

function get_sticky_popup_data(timeline, patientMRN, patientSiteid, start, end) {
    $http
    .get('/API/data/patientdetails/Titlebar/get_admission_data/' + patientSiteid + '?MRN=' + patientMRN)
    .success(function(data) {
        $scope.carouseldata = data;
        build_sticky_table(timeline, $scope.carouseldata, start, end);
        var carouselItemTop = $('.displayTableContainer').position();
        $('.displayTableContainer').attr('data-offset-top', carouselItemTop.top);
    }).error(function(e) {
        console.log('error in Ajax call get_admission_data: ' + e.message);
    });
}

function build_sticky_table(timeline, items, start, end) {

    var startDate = new Date(start.toString());
    var endDate = new Date(end.toString());
    var dtRotate = new Date(startDate);
    var firstWeeksDataObject = new Array(7);

    var datediff = ((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;

    var weeks = (datediff % 7 === 0 ? parseInt((datediff / 7)) + 1 : parseInt((datediff / 7))); // you need this many tables

    $('.item').remove();

    items.push({
        'admit': timeline.admission_range_start,
        'datetime': timeline.event_start_date,
        'diagnosis': '',
        'discharge': timeline.admission_range_end,
        'location': timeline.location,
        'room_bed': timeline.roombed
    });

    var isActive = false;
    var starting_month_from_query_string = $('#workflow_header_month').val();
    var starting_year_from_query_string = $('#workflow_header_year').val();
    var match_weekly_data_from_query_string_month_and_year = false;
    var previous_match_found = false;
    var current_event_start_date = timeline.event_start_date;

    if (starting_month_from_query_string !== "0" && starting_year_from_query_string !== "0") {
        match_weekly_data_from_query_string_month_and_year = true;
    }


    for (var i = 0; i <= weeks; i++) {

        var name = 'stickytbl' + i.toString();
        $('.carousel-inner').append(buildtable(name, i)); //inserts a new table
        var hcells = $('#' + name + ' > thead > tr > td');
        var brows = $('#' + name + ' > tbody> tr');
        $.each(hcells, function (index, item) {
            if (index > 0) {
                var cell = $(brows[0]).children('td');
                var cell2 = $(brows[1]).children('td');
                var cell3 = $(brows[2]).children('td');

                //set the column data
                var currentColumnHeaderDate = dtRotate.getMonth() + 1 + '/' + dtRotate.getDate() + '/' + dtRotate.getFullYear();
                var currentColumnHeaderDateWithTime = new Date(currentColumnHeaderDate.toString() + ' 23:59:59');
                firstWeeksDataObject[index] = currentColumnHeaderDate;

                $(item).text((dtRotate.getMonth()) + 1 + '/' + dtRotate.getDate() + '/' + dtRotate.getFullYear());
                //set the row data
                if (dtRotate <= currentColumnHeaderDateWithTime) {
                    var arrayReturn = getDaysData(items, start, end, dtRotate, currentColumnHeaderDate);
                    //set table row data
                    $(cell[index]).html(arrayReturn[0]);
                    $(cell2[index]).html(arrayReturn[1]);
                    $(cell3[index]).html(arrayReturn[2]);
                }
                //increment the date
                dtRotate.setDate(dtRotate.getDate() + 1);
            }
        });
}

单击水平旋转木马按钮时保持垂直滚动位置

0 个答案: