配置dgrid单元格以显示数据的完整宽度

Question

我正在编写一个应用程序，其中生成的dgrid可能具有不同数量的列/列宽，具体取决于输入。请注意以下两个屏幕截图。第一个只有几个选择字段，单元格/数据水平渲染很好。第二个查询有许多选择字段，因为你可以看到渲染不合意，因为它试图将所有单元格装入一个屏幕混乱数据。请注意，dgrid也位于dijit BorderContainer中。

屏幕截图1（小型SELECT字段集，渲染正常）

屏幕截图2（大型SELECT字段集，呈现不合需要的效果

这里有许多问题需要解决，但我想我的主要问题是：

1. 是否有css规则（或任何其他方式 - dgrid函数/事件？）我可以用来指定要扩展的单元格以使用其中的数据的整个宽度而不切断它（即没有溢出） ？然后，这将需要使用水平滚动条显示网格。所以我希望数据能够驱动网格的宽度，而不是设置宽度。我试过.dgrid-cell { white-space:nowrap; }，但这似乎被忽略了。看起来像是需要在单元格中添加跨度，这将具有上述css规则？
2. 其次 - 下一个问题将是确定在哪些情况下我应该应用上述规则，而不是数据适合屏幕的情况。在这些情况下，最好让表格按照第一个屏幕截图使用100％宽度。关于这个的任何意见？

由于

Answer 1

这里是我根据数据设置网格单元格宽度的方法。这是针对datagrid obj的，但您可能需要对dgrid obj进行一些调整。

有几个步骤：

1）在html调用<div>

中创建test标记

<div id="test"></div>

2）遍历网格中每列的数据，并使用javascript捕获该列的最大数据宽度：

var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
  tst_item.innerHTML = columns[i]; //columns array represents data that will display for the column
   widthPX = (tst_item.clientWidth + 1); //Give width in PX of the data pad it a bit as needed
}

此处的重要项目包括设置适当的字体大小（fnt_sz），循环所有列数据以查找列中PX的最大宽度。使用列的最大widthPX来设置数据网格的layout对象中的列宽。

3）为数据网格创建布局JSON数据时，请设置每列的宽度（列的最大数据widthPX）。类似的东西：

var build_layout = "    var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
  build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},"; 
}
build_layout += "]];";
eval(build_layout);

/*create a new grid*/
var grid = new DataGrid({
  id: 'grid',
  store: store,
  structure: layout, //Use layout JSON data which has width: xxpx; set for each column
  rowSelector: '20px',
  style: 'font-size:9pt',
  rowsPerPage: 1000,
  columnReordering: true,
  autoWidth: true,
  autoHeight: autoH});

当网格显示时，它应该在任何浏览器中看起来都很好并且所有数据都应该可见，因为列宽PX值大于该列的最大数据项。应该很容易添加最大px值每一列所以事情不会随着宽度而失控。

这在$ ss中有点痛苦，应该是dojo datagrid对象的属性，但是......

以下是我最终完成这些步骤的内容：