在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

您可以使用自定义ToolTip处理程序将show组件绑定到网格视图，该处理程序将获取单元格数据（或行或整个网格）并显示您的指令方式。这样就满足您的情况了吗？

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

[在网格后面添加它-是的，在网格外面。给定您的代码段，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);
};

至此，您可以进一步自定义show函数，以根据需要构建工具提示。

Miscellaneous > Tooltips > GridPanel Cell Tooltip的Ext.NET示例（WebForms）中展示了具有每单元工具提示的网格。

希望这会有所帮助！