且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在 KendoUI 网格列标题上添加 Hovertext

更新时间:2023-02-20 17:13:33

如果 tooltip 的内容是静态的,那么你可以使用 columns.headerTemplate 然后添加一个 工具提示 到标题.

If the contents of the tooltip is static, then you could use the columns.headerTemplate to then add a tooltip to the header.

示例 jsFiddle.

代码:

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
    },
        "Freight", {
        field: "OrderDate",
        title: "Order Date",
        width: 120,
        format: "{0:MM/dd/yyyy}",
        headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
    }]
});

$("#grid").kendoTooltip({
    filter: ".k-header span"
});