Kendo 网格列宽度 + 可滚动

2024-04-25

我正在尝试从 JavaScript 绑定到可滚动剑道网格,但在列宽方面遇到了一些问题。这fiddle http://jsfiddle.net/mnTGm/1/演示了问题(问题末尾的代码)。我在 html 中指定标头并向其中一个标头添加宽度。然后 JavaScript 设置数据源(在生产代码中,这是通过 ajax 调用完成的)。

我想避免在 javascript 中设置 columns.width 属性,因为

  • 我有很多网格,因为我的视图模型是精心构建的,所以它们能够自动识别所需的列。我们的应用程序中有超过 100 个网格,必须为所有网格指定列列表会很麻烦。
  • 反正感觉不对,这是造型信息。

我确实明白该功能是由于剑道创建了两个网格,一个用于标题,一个用于滚动内容。然而,我过去使用过的其他执行类似操作的控制库总是在两个网格之间复制样式信息,以便在保持两个表同步的同时促进声明式样式 - 我只是不确定“剑道”是什么这样做的方法是。

来自小提琴的 HTML

<table>
    <thead>
        <th class="p20" data-field="status">Status</th>
        <th data-field="description">Description</th>
    </thead>
</table> 

JavaScript

$('table').kendoGrid({
    dataSource: [
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' }
    ],
    scrollable: true
});

CSS

.k-grid-content {
    height: 100px;
}
.p20 {
    width: 20%;
}

这是带有水平滚动条的非常直接的网格(忽略虚拟化)http://demos.kendoui.c​​om/web/grid/virtualization-remote-data.html http://demos.kendoui.com/web/grid/virtualization-remote-data.html。在网格或其父网格上有一个宽度,以及每列的宽度,它们的总和超过实际网格宽度,然后你就得到了滚动条:

{ field: "OrderID", title: "Order ID", width: 60 },

昨天已经在你的另一篇文章中回答了:Kendo 网格中的列线不同步 https://stackoverflow.com/questions/17523124/column-lines-are-not-in-sync-in-a-kendo-grid

Or

http://jsfiddle.net/vojtiik/2ApvC/3/ http://jsfiddle.net/vojtiik/2ApvC/3/

注意我使用的是比你更新版本的kendo 和jQuery。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Kendo 网格列宽度 + 可滚动 的相关文章