列表中浮动显示操作按钮的javascript脚本

2017-3-1 13:31

表格采用的是固定单元格效果,即表头固定,右方滚动条滚动时,表头不动。左边也有一定列数固定,即下面的滚动条滚动时候,左边的固定列不动,和excel效果相同。这样的情况下,最右边的按钮列容易被遮挡,为了简化操作和让编辑功能醒目,增加了浮动显示按钮的功能。功能描述如下:

在鼠标滑过/停放每一行的时候右侧都浮动显示相应操作按钮,点击这些操作按钮就相当于点击了右侧的按钮列中的按钮。当滚动条滚动到显示了按钮列的时候,浮动效果消失。

 

 

脚本在这里

function fixedHeaderTablePopupRightButtons()
{
    //.fht-fixed-body>.fht-tbody   div
    //Grid fht-table fht-table-init >tbody>tr   非固定的
    //fht-table Grid >tbody>tr 固定的
    var ensurePopupRightButtons = function (idx, tr) {
 
        if (!tr)
            tr = $('.fht-table.Grid.fht-table-init>tbody>tr')[idx];
        var $this = $(tr);
        var btns = $this.find('td:last-child>a');
        if (!btns.length)
            return;
 
        var ctn = $('#fht-popup-buttons' + idx);
        if (!ctn.length)
        {
            var ctn = $('<div/>').attr('id', 'fht-popup-buttons' + idx).addClass('fht-popup-buttons');
            ctn.css('top', $this.position().top + $this.offsetParent().scrollTop())/*.css('height', $this.height() - 10).css('background-color', '#f00')*/;
            btns.each(function () {
                var self = $(this);
                $('<a/>').text(self.text()).click(function () {
                    self[0].click();
                }).appendTo(ctn);
            });
            //ctn.mouseenter(function () { showPopupRightButtons(idx, tr); });
            ctn.mouseenter(ctnmouseenter);
            //ctn.mouseleave(function () { hidePopupRightButtons(idx, tr); });
            ctn.mouseleave(ctnmouseleave);
            ctn.appendTo($this.closest('.fht-tbody'));
        }
        ctn.css('right', 10 - $this.offsetParent().scrollLeft());
 
    };
 
    var showCounter = [];
    var canShowPopup = true;
 
    $('.fht-fixed-body>.fht-tbody').scroll(function () {
        if (this.scrollWidth - this.offsetWidth - $(this).scrollLeft() < 68)
            canShowPopup = false;
        else
            canShowPopup = true;
    });
 
    var showPopupRightButtons = function (idx, tr) {
        showCounter[idx] = (showCounter[idx] || 0) + 1;
        if (!canShowPopup)
            return;
        ensurePopupRightButtons(idx, tr);
    };
 
    var hidePopupRightButtons = function (idx, tr) {
        showCounter[idx] = showCounter[idx] - 1;
        if (!canShowPopup)
            return;
        setTimeout(function () {
            if (!showCounter[idx])
            {
                var ctn = $('#fht-popup-buttons' + idx);
                ctn.hide(200, function () {
                    if (showCounter[idx])
                        ctn.show(100);
                    else
                        ctn.remove();
                });
            }
        }, 100);
    };
 
    var ctnmouseenter = function () {
        var idx = parseInt(this.id.substring('fht-popup-buttons'.length));
        showPopupRightButtons(idx);
    };
    var ctnmouseleave = function () {
        var idx = parseInt(this.id.substring('fht-popup-buttons'.length));
        hidePopupRightButtons(idx);
    };
 
    $('.fht-table.Grid>tbody>tr').mouseenter(function () {
        if (this.parentNode.parentNode.className.indexOf('fht-table-init') > -1)
            showPopupRightButtons($.inArray(this, this.parentNode.rows), this);
        else
            showPopupRightButtons($.inArray(this, this.parentNode.rows));
    });
    $('.fht-table.Grid>tbody>tr').mouseleave(function () {
        if (this.parentNode.parentNode.className.indexOf('fht-table-init') > -1)
            hidePopupRightButtons($.inArray(this, this.parentNode.rows), this);
        else
            hidePopupRightButtons($.inArray(this, this.parentNode.rows));
    });
 
}

 

点击:loading..
收藏到:中国收客网
评论