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