在 ASP.NET MVC 中为 GridView 创建动态工具提示

Question

我的 EXT.NET MVC 项目中有一个 GridPanel 组件，我想创建一个动态工具提示，当鼠标悬停在每个单元格上时将显示文本/数据。由于.ToolTips() 组件与此不兼容，我正在使用 JavaScript 尝试呈现动态工具提示。我当前的代码创建 HTML 元素，然后向它们添加工具提示：

var el = Ext.getBody().createChild({
    html: '<div data-num="1" class="item">Foo</div>' +
        '<div data-num="2" class="item">Bar</div>' +
        '<div data-num="3" class="item">Baz</div>' +
        '<div class="notip">No tip here</div>'
});
new Ext.tip.ToolTip({
    target: el,
    delegate: '.item',
    listeners: {
        beforeshow: function (tip) {
            var current = tip.currentTarget.dom;
            tip.setHtml('Item #' + current.getAttribute('data-num'));
        }
    }
});

这是我想要附加到的 GridPanel 的代码：

Html.X().GridPanel()
.Title("Request Priorities")
.ID("reqPrioritiesGrid")
.ColumnWidth(1)
.MarginSpec("0 0 0 0")
.Flex(1)
.ToolTips(t => t.Add(Html.X().ToolTip().Html("hello").ID("storeTip").Target("App.storeReqPriorities")))
.Border(true)
.Store(
    Html.X().Store()
        .ID("storeReqPriorities")
        .AutoLoad(true)
        .DataSource(Model.RequestPriorities)
        .Model(
            Html.X().Model()
                .Fields(f =>
                {
                    f.Add(Html.X().ModelField().Name("RequestPriorityKey").Type(ModelFieldType.Int));
                    f.Add(Html.X().ModelField().Name("RequestPriorityName").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("RequestPriorityDescription").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("SortOrder").Type(ModelFieldType.Int));
                    f.Add(Html.X().ModelField().Name("ResponseTarget").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("ResponseFormat").Type(ModelFieldType.String));
                    f.Add(Html.X().ModelField().Name("ResponseSLA").Type(ModelFieldType.String));
                })
        )
        .ServerProxy(
            Html.X().AjaxProxy()
                .Url(Url.Action("ManageLists_GetRequestPriorities", "Admin", new { area = "Cadence" }))
        )
)
        .Listeners(l =>
        {
            l.Select.Handler = "handleReqPopulate(record.data);" + "toggleEditRequest();" + "resetAddNew();";
        })
        .ColumnModel(
            Html.X().Column().Flex(1).Text("Request Priority Name").DataIndex("RequestPriorityName"),
            Html.X().Column().Flex(3).Text("Request Priority Desciption").DataIndex("RequestPriorityDescription"),
            Html.X().Column().Flex(1).Text("Sort Order").DataIndex("SortOrder"),
            Html.X().Column().Flex(1).Text("Response Target").DataIndex("ResponseTarget"),
            Html.X().Column().Flex(1).Text("Response Format").DataIndex("ResponseFormat"),
            Html.X().Column().Flex(1).Text("Response SLA").DataIndex("ResponseSLA")
)

是否有类似于上面 JavaScript 中使用的 .createChild() 的方法，可以将工具提示附加到在 MVC 中动态创建的元素？

Answer 1

您可以使用自定义show 处理程序将ToolTip 组件绑定到网格视图，该处理程序将获取单元格数据（或行或整个网格）并显示您指示的方式。这对您的场景来说还不够吗？

在这种情况下，您不会创建子工具提示，而是使用相同的工具提示来显示特定数据，具体取决于您将鼠标悬停在的位置。

在网格之后添加这个——是的，在它之外。给定您的代码 sn-ps，ToolTip 组件声明应如下所示：

@(Html.X().ToolTip()
    .Target("={App.reqPrioritiesGrid.getView().el}")
    .Delegate(".x-grid-cell")
    .TrackMouse(true)
    .Listeners(l => l.Show.Handler="onShow(this, App.reqPrioritiesGrid)")
)

然后让处理程序填充工具提示的内容，如下所示：

var onShow = function (toolTip, grid) {
    var view = grid.getView(),
        store = grid.getStore(),
        record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
        column = view.getHeaderByCell(toolTip.triggerElement),
        data = record.get(column.dataIndex);

    toolTip.update(data);
};

从这一点开始，您可以进一步自定义显示功能，以按照您需要的方式构建工具提示。

在Miscellaneous > Tooltips > GridPanel Cell Tooltip 的 Ext.NET 示例 (WebForms) 中展示了带有每个单元格工具提示的网格。

希望这会有所帮助！