默认情况下,kendo 网格将扩展以填充其包含的 div。它只是一个表格元素,自然如此。
<table role="grid">
<colgroup>
<col style="width:200px"> // etc
<colgroup>
<thread>
// content
</thread>
</table>
但是,当您添加更多列(或有太多列)时,它们会来回缩放以适应。我想要溢出时的水平滚动条。
为此,我添加了一些在启动、添加和重新排序时运行的代码。
this._initWidths = function () {
var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) {
var width = grid.columns[i].width;
$('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px');
$('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px');
totalWidth = totalWidth + width;
}
table.css('width', totalWidth + 'px');
};
然而,剑道似乎有自己的逻辑来反对这一点。 Colgroup 条目将开始被删除,弄乱一切。
我能做些什么来阻止这一切吗?有没有更好的方法来做我想做的事?
谢谢。
最佳答案
我有一个表容器:
<div id="myWindow">
<div id="myGrid"></div>
</div>
并应用了以下样式:
#myWindow {
width: 400px;
overflow-x: scroll;
}
你可以看到我将宽度强制设置为 400 像素并隐藏(和滚动)溢出的内容。
然后我定义以下网格
:
var grid = $("#myGrid").kendoGrid({
dataSource : {
data : entries,
schema : {
model: {
id: "city"
}
},
pageSize: 5
},
columns : [
{ field: "city", title: "City", width: 100 },
{ field: "time", title: "Time", format: "{0:HH:mm}", width: 200},
{ field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 }
],
sortable : {
mode : "single",
allowUnsort: false,
field : "city"
},
editable : "popup",
navigatable: true,
pageable : true
}).data("kendoGrid");
我得到的效果是网格水平溢出其容器的大小。
看到它正在运行here
注意 更棒的是,分页
始终保持 400px 适合可见区域,而网格实际上是 100 + 200 + 300 = 600
(列
的宽度
)
编辑:如果您希望网格
的宽度
与列
的总和相同> 那么你应该添加(在初始化网格之后)。
var totalWidth = 0;
for (var i = 0; i < grid.columns.length; i++) {
var width = grid.columns[i].width;
totalWidth = totalWidth + width;
}
grid.element.css('width', totalWidth + 'px');
循环计算总宽度,然后我将表格设置为它(不需要更改列,因为它们是正确的)。
设置here
关于javascript - Kendo Grid,水平滚动和列大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14363264/