Question

我正在尝试创建一个必须具有自动调整大小的列（在某些约束内）并且其宽度不得超过父div的宽度的网格。

我有4列：

       col1        col2    col3    col4
------------------------------------------
| very long text |  ...  |  ...  |  ...  |
|     ...        |  ...  |  ...  |  ...  |
------------------------------------------

第一列中的值非常长，因此我使用样式：white-space: nowrap; text-overflow: ellipsis;文本保留在一行中。我希望col2为105-170px，col3 40-190px和col4 75-150px。我希望尽可能小，以避免出现巨大的空白区域。

我知道这样的事情可以通过设置scrollable: true来实现，但我不需要滚动条，我真的不喜欢它如何在那里没有好用。

Answer 1

在玩了不同的选项和数小时的搜索后，我决定使用一个不太优雅的解决方案，但我已经实现了我想要的。如果有人遇到类似的问题，我就是这样做的：

当DOM加载（jQuery中的$(document).ready(...)或$(...)）时，我调用代码删除padding-right的右.k-grid-header并移除overflow-y .k-grid-content 1}}。

我用过的代码：

// jQuery code
$(".k-grid-header").css("padding-right","0");
$(".k-grid-content").css("overflow-y","initial");

// JS (without jQuery) equivalent
var gridHeaders = document.querySelectorAll(".k-grid-header");
for (var i = 0, element; element = gridHeaders[i++];)
    element.paddingRight = "0";

var gridContent = document.querySelectorAll(".k-grid-content");
for (var i = 0, element; element = gridContent [i++];)
    element.overflowY = "initial";

Kendo UI Grid列自动调整大小

1 个答案: