ui-grid工具在行上显示div on-mousehover

Question

我刚刚在GMAIL中看到了这一新内容，在行鼠标悬停时几乎没有按钮出现。这是相同的图片。

我正在将angularjs和ui-grid插件用于网格目的。有没有一种方法可以在我的项目中实现相同的功能。请（如果可能）引导我，并向我显示实现该目标的方向。

Answer 1

您需要实现包含ng-mouseenter和ng-mouseleave的处理程序的自定义行模板，如下所示：

<div data-row="row" ng-mouseenter="isOver = true" ng-mouseleave="isOver = false">

    <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
         class="ui-grid-cell"
         ui-grid-cell
         ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'">
    </div>

    <div id="myButtons" ng-show="isOver">
        <!-- your buttons here -->
    </div>

</div

然后将myButtons div的内容显示在悬停上，只需设置其样式即可。