Question

我看到有一些解决方案可以动态设置字体大小，使文本适合给定的大小范围。有什么办法在Kendo Grid中自动执行此操作？我的列似乎保持比例大小随着表的大小缩小（根据需要），但随着它变小，它要么包裹数据使行更高，要么将椭圆放在末尾。如果它足够缩小列的大小，则只有省略号，不知道数据究竟是什么。我敢肯定，如果字体变小，它会更有用。但是当网格更大时我需要更大的字体。

我想我可以有一个函数，根据整个表（或其父表）的宽度，我可以改变表中所有列（表格单元格）的字体大小。这可能是可以接受的。但不理想。我宁愿让一个包含更多文本的字段获得更小的字体，并且一个字段仍然适合，因为它非常短（在某些情况下只有一个字母），没有真正的理由缩小该列中的字体。

也许有人试过使用其中一个jQuery插件来做这个，我尝试了textfill插件，但还没有运气。

如果之前没有人这样做过，如果/当我找到解决方案时，我会自己在这里发布答案。

Answer 1

我过去所做的是为我的网格设置一个可以设置“响应”的网格。列。调整大小后，将隐藏设置的列，具体取决于网格的大小。这将在javascript中完成，列可以隐藏，如下所示：

$(window).on("resize", function () {
        //add your code here
    });

您可以使用kendo隐藏/显示列：

$("#grid_name").data("kendoGrid").showColumn("ColumnName");
$("#grid_name").data("kendoGrid").hideColumn("ColumnName");

您可以为每列设置最小/最大窗口大小，并相应地隐藏/显示。祝你好运。

Answer 2

手动处理此问题的最佳位置是dataBound事件。每次更新网格中的数据时都会调用此事件，因此您可以从中访问网格列，dataItem及其相应的html元素。有了这些信息，您就可以实现自己的逻辑并为每个元素设置CSS样式：

$("#YourGrid").kendoGrid({
    dataBound: function(){

        //You can use the TR element
        $.each($("#YourGrid").data("kendoGrid").dataSource.view(), function (index, viewDataItem) {

            var jqTr = $("#YourGrid").find("tbody>tr[data-uid='" + viewDataItem.uid + "']");

            if ($("#YourGrid").width() > 1000) {
                jqTr.css("font-size", "10px");
            } else {
                jqTr.css("font-size", "12px");
            }

        });

        //Or a specific TD element if you need to set a font-size per column (or for a specific cell)
        $.each($("#YourGrid").data("kendoGrid").columns, function (index, columnScan) {

            var jqTd;
            if (columnScan.locked) {
                lockCount++;
                jqTd = _this.kendoGrid().lockedContent.find("tbody>tr>td:nth-child(" + (index + 1) + ")");
            } else {
                jqTd = _this.kendoGrid().tbody.find(">tr>td:nth-child(" + (index + 1 - lockCount) + ")");
            }

            if (columnScan.width > 100) {
                jqTd.css("font-size", "10px");
            } else {
                jqTd.css("font-size", "12px");
            }

        }
    }
});

请注意，上面的代码是在具有可锁定列上下文的虚拟滚动中进行的，但我的逻辑仍适用于常规网格。

KendoUI Grid - 可以动态更改字体大小以适应列宽吗？

2 个答案: