javascript - 配置 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 进行一些调整对象。

有几个步骤:

1) 创建 <div> html 调用中的标记 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 对象的属性，但是......

以下是我最终完成这些步骤的结果: