配置 dgrid 单元格以显示数据的全宽

Question

我正在编写一个应用程序，其中生成的 dgrid 可能具有不同数量的 columns/column-widths，具体取决于输入。请注意以下两个屏幕截图。第一个只有几个 select 字段，cells/data 水平渲染得很好。第二个查询有许多 select 字段，正如您所看到的那样，当它试图将所有单元格放入一个屏幕时呈现出不受欢迎的结果，从而使数据混乱。请注意，dgrid 也位于 dijit BorderContainer 中。

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

屏幕截图 2（大 SELECT 字段集，渲染不理想

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

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

谢谢

Answer 1

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

有几个步骤：

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 数据时，设置每列的宽度（列的最大数据宽度 PX）。类似于：

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 对象的属性但是......

以下是我完成这些步骤后的结果：

配置 dgrid 单元格以显示数据的全宽

Configuring dgrid cells to display the full width of the data

javascript

json

dojo

dgrid

dstore