如何将 qtip 添加到 kendo 网格中省略的单词？

Question

下面是我构建 kendo 网格的方式：

CreateListGrid: function () {
            $("#PlanListGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read:{
                            url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
                            type: "POST",
                            data: {
                                searchVal: $('#category').val(),
                                status: $('#ListFilterType').val(),
                            },
                        },                       
                        dataType: "json",
                    },
                    pageSize: 10,

                    schema: {
                        data: "Data",
                        total: "Total",
                        model: {
                            fields: {
                                FirstName: { editable: false, nullable: true },
                                LastName: { editable: false, nullable: true },
                                Title: { editable: false },
                                Id: { editable: false }
                            }
                        },
                        errors: "Errors"
                    },
                },
                toolbar: kendo.template($("#template").html()),
                selectable: "row",
                //groupable: true,
                sortable: true,
                //scrollable:true,
                pageable: true,
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: 160,
                    template: "#= SearchItems_Highlight(FirstName)#"
                }, {
                    field: "LastName",
                    title: "Last Name",
                    width: 160,
                    template: "#= SearchItems_Highlight(LastName)#"
                },
                {
                    field: "Title",
                    title: "Plan Title",
                    width: 180,
                    template: "#= SearchItems_Highlight(Title)#"
                }, 
                {
                    field: "Id",
                    title: "Id",
                    width: 0
                },
                ]
            });
            var grid = $("#PlanListGrid").data("kendoGrid");

            grid.hideColumn("Id");
            $("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });

        }

如果我的 kendo 网格中的文本字段对于列宽而言太长，则它们会被省略。现在我在向 kendo 网格中的省略词添加 qtip 时遇到了问题。

编辑：

因为懒，网上找了一个类似的例子，使用kendo网格。我为 .k-grid td 添加了样式，这类似于我现在拥有的样式，如果文本太长则省略文本。我现在的问题是如何将 jquery qtip 添加到省略的文本中？我应该在代码中的哪个位置添加 qtip？

Here's the fiddle

Answer 1

您可以在创建网格后应用qtip。

function applyTooltip() {
    $(".k-grid-content tbody td").each(function (index, element) {
        var td = $(element);
        td.qtip({
            content: td.text(),
            //hide: { when: 'unfocus', delay: 100 },
            style: {
                border: {
                    width: 1,
                    radius: 10
                },
                padding: 2,
                textAlign: 'center',
                tip: true,
                name: 'cream'
            },
            position: {
                adjust: {
                    screen: true
                }
            }
        });
    });
}

已更新 fiddle：http://jsfiddle.net/Sbb5Z/1610/

您可以将 qTip 限制为数据超过特定字符数的列（省略号） fiddle: http://jsfiddle.net/Sbb5Z/1611/

如何将 qtip 添加到 kendo 网格中省略的单词？

How do I add qtip to kendo grid for ellipsed words?

javascript

jquery

kendo-ui

kendo-grid