在 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組件綁定到網格視圖，該處理程序將獲取單元格數據（或行或整個網格）並顯示您的指示方式。 這對你的場景來說還不夠嗎？

在這種情況下，您不會創建子工具提示，而是使用相同的工具提示根據鼠標懸停的位置顯示特定數據。

在網格之后添加它——是的，在它之外。 根據您的代碼片段， 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 函數以按照您需要的方式構建工具提示。

Ext.NET 示例 (WebForms) 中在Miscellaneous > Tooltips > GridPanel Cell Tooltip 中展示了帶有每個單元格工具提示的網格。

希望這可以幫助！