列表中浮动显示操作按钮的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));
});
}
