1

我正在编写一个应用程序，其中生成的 dgrid 可能具有不同数量的列/列宽，具体取决于输入。请注意以下两个屏幕截图。第一个只有几个选择字段，并且单元格/数据水平渲染得很好。第二个查询有许多选择字段，正如您所见，当它试图将所有单元格放入一个屏幕中，使数据变得混乱时，呈现出不受欢迎的效果。请注意，dgrid 也位于 dijit BorderContainer 中。

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

屏幕截图 2（大型 SELECT 字段集，呈现不理想 屏幕截图 2（大型 SELECT 字段集，呈现不理想）

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

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

谢谢

4

1 回答 1

1

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

有几个步骤：

<div>1)在您的 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 数据网格对象的属性，但是......

这是我最终完成这些步骤的结果：

在此处输入图像描述

于 2015-04-08T17:10:59.540 回答