剑道网格列宽+可滚动

Posted 2023-05-07

【中文标题】剑道网格列宽+可滚动

【英文标题】：Kendo Grid Column Width + Scrollable

【发布时间】：2013-07-06 18:27:48

【问题描述】：

我正在尝试从 javascript 绑定到可滚动的剑道网格，但在列宽方面存在一些问题。这个fiddle 演示了这个问题（问题末尾的代码）。我在 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%;

【参考方案1】：

这是带有水平滚动条的非常简单的网格（忽略虚拟化）http://demos.kendoui.com/web/grid/virtualization-remote-data.html。在你的网格上有一个宽度，或者它是每列的父级和宽度，它们的总和超过实际的网格宽度，然后你就会得到你的滚动条：

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

昨天已经在你的另一篇文章中回答了： Column lines are not in sync in a Kendo grid

或者

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

请注意，我使用的是较新版本的剑道和 jQuery。

【讨论】：

当然，这会起作用，但我想在标记中指定我的宽度，而不是在 javascript 中。必须为每个网格指定每列的详细信息是一项繁重的任务，并且指定样式是错误的地方（从语义上讲）。

是的，我后来意识到你在说什么，与昨天的问题有点不同。您打算如何处理文本/值宽度超过 20% 的网格？您是否总是在列中显示相同的数据。您可以根据需要在所有列和标题上设置宽度并部署省略号（“我的不完整值...”）以避免宽度/同步差异。

基本上，kendo 将可滚动网格的表格布局设置为“固定”（这很烦人），这意味着我们的某些列太宽了。我们有几列只是状态指示器图标，我想将它们设置为只有几个像素宽。其他所有内容都使用省略号，并且网格也设置为可调整大小，并在必要时显示水平滚动条（有关此类功能的示例，请参见 azure 管理门户上的网格）。剑道采用“两个网格”的方法而没有让消费者看不到复杂性，这真是太可惜了

看看我上次的编辑，你可以通过在标题和列上使用自定义属性来实现你所追求的。它还解决了您的语义问题。

谢谢@Bobby_D_，到目前为止，我会将其标记为已接受的答案。我仍然希望有一个不涉及我在 javascript 中为需要一列具有特定大小的每个网格创建列数组的解决方案，但这可能是我们拥有的最好的。

【参考方案2】：

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