Question

我在第一列使用带有进度条的Angularjs ui网格，我的网格选项如下所示：

  ctrl.gridOptions = {};

ctrl.gridOptions.columnDefs = [{
        field: 'completeStatus',
        cellTemplate: '<span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar>',
        width: 100
    },

    {
        field: 'invoiceNum'
    }
];

HTML：

<div id="regGrid" ui-grid="ctrl.gridOptions" class="reg-grid"></div>

哪个工作正常。现在我想在悬停网格的第一个单元格时显示bootstrap popover，我的意思是带有字段'completeStatus'的单元格。任何人都可以帮我配置它吗？

Answer 1

将弹出窗口属性添加到您的单元格模板，并在组件html中放置一个弹出窗口模板。像这样：

组件HTML：

这将位于关闭根</div>之前的HTML底部。

    <script type="text/ng-template" id="cellPopover.html">
        <div>Your popover Template</div>
    </script>

组件控制器 ：将popover属性添加到单元格模板。

ctrl.gridOptions.columnDefs = [{
        field: 'completeStatus',
        cellTemplate: '<div popover attributes><span>{{row.entity.completeStatus}} % </span> <uib-progressbar value="row.entity.completeStatus"> </uib-progressbar></div>',
        width: 100
    }

在我撰写popover attributes的地方，您将放置实际属性，例如：
1. uib-popover-template="'cellPopover.html'"
2. popover-trigger="mouseenter"
3. popover-placement="bottom"

需要弹出Angularjs ui网格的自定义模板单元格

1 个答案: