5

我正在尝试从 javascript 绑定到可滚动的剑道网格,并且在列宽方面存在一些问题。这个小提琴演示了这个问题(问题末尾的代码)。我在 html 中指定标题并向其中一个标题添加宽度。然后 javascript 设置数据源(在生产代码中,这是通过 ajax 调用完成的)。

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

  • 我有很多网格,因为我的视图模型经过精心构造,能够自动识别所需的列。我们的应用程序中有 100 多个网格,并且必须为所有网格指定列列表会很笨拙。
  • 无论如何感觉不对,这是样式信息。

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

来自小提琴的 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%;
}
4

2 回答 2

3

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

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

昨天已经在您的另一篇文章中回答了: Kendo 网格中的列线不同步

或者

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

请注意,我使用的是更新版本的剑道和 jQuery,然后您就使用了。

于 2013-07-09T08:31:18.437 回答
0

另一种选择是使用具有样式/类属性的元素<colgroup/><col/>

于 2015-05-13T14:20:45.543 回答