Question

我正在填充带有网格的TabContainer（Dojo 1.8，dgrid），它们显示了不同数据集的查询结果。每个选项卡都是单个数据集的结果。不同的数据集将具有不同数量的字段，因此我将动态构建每个网格并将其添加到ContentPane，然后将其添加到TabContainer。

我目前的问题是在构建网格时设置网格的宽度。数据集可以从两个字段到100个字段中显示在网格中。我在CSS中为600px的网格设置了默认宽度，但网格只显示数据集的前六个字段。如果我将宽度设置为“自动”，它只会与TabContainer一样宽，删除滚动条并切断数据。是否可以分别为每个网格设置宽度？

这就是结果 enter image description here

这是填充TabContainer

的代码

function buildColumns(feature) {
    var attributes = feature.attributes;
    var columns = [];

    for (attribute in attributes) {
        if (attribute != "Shape") {
            var objects = {};
            objects.label = attribute;
            objects.field = attribute;
            columns.push(objects);
        }
    }
    return columns;
}

function populateTC(results, evt) {
    try {
        if (dijit.byId('tabs').hasChildren) {
            dijit.byId('tabs').destroyDescendants();
        }

        if (results.length == 0) {
            console.log('Nothing found.');
            return;
        }

        var combineResults = {};
        for (var i = 0, len = results.length; i < len; i++) {
            var result = results[i];
            var feature = result.feature;
            var lyrName = result.layerName.replace(' ', '');
            if (combineResults.hasOwnProperty(lyrName)) {
                combineResults[lyrName].push(result);
            }
            else {
                combineResults[lyrName] = [result];
            }
        }

        for (result in combineResults) {
            var columns = buildColumns(combineResults[result][0].feature);
            var features = [];

            for (i = 0, len = combineResults[result].length; i < len; i++) {
                features.push(combineResults[result][i].feature);
            }

            var data = array.map(features, function (feature) {
                return lang.clone(feature.attributes);
            });

            var dataGrid = new (declare([Grid, Selection]))({
                id: "dgrid_" + combineResults[result][0].layerId,
                bufferRows: Infinity,
                columns: columns,
                "class": "resultsGrid"
            });


            dataGrid.renderArray(data);
            dataGrid.resize();

            dataGrid.on(".dgrid-row:click", gridSelect);

            var cp = new ContentPane({
                id: result,
                content: "<b>" + combineResults[result][0].layerName + "\b",
                //content: dataGrid,
                title: combineResults[result][0].layerId
            }).placeAt(dijit.byId('tabs'));

            cp.addChild(dataGrid);

            cp.startup();
            cp.resize();
        }
        tc.startup();
        tc.resize();
        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
    }
    catch (e) { console.log(e.message); }
}

Answer 1

问题不在于网格宽度，而在于列宽。它们适合容器。

如果为列提供固定宽度，您将获得所需的效果。

您应该能够设置.dgrid-cell或.dgrid-column-[index]

的样式

我还需要根据列数据进行更多控制。您可以通过提供具有自己的renderHeaderCell和renderCell方法的列来控制样式。（风格指的是dom风格）

renderHeaderCell: function(node) {
    style.set(node, 'width', '50px');
}

renderCell:  function(object, value, node) {
    style.set(node, 'width', '50px');
}

Answer 2

我能够使用AddCssRule动态更改网格的大小

var dataGrid = new (declare([Grid, Selection]))({
    id: "dgrid_" + combineResults[result][0].layerId,
    bufferRows: Infinity,
    columns: columns,
    "class": "resultsGrid"
});

dataGrid.renderArray(data);

var gridWidth = "width: " + String(columns.length * 100) + "px";
dataGrid.addCssRule("#" + dataGrid.id, gridWidth);
dataGrid.resize();
dataGrid.refresh();

这是显示结果的Fiddle。单击彩色多边形以显示不同的网格（尽管内容有时会被推入网格的标题中）。此外，选项卡未正确呈现，但应该有0,224和227（如果您还单击了一个点）。

将具有可变宽度的dgrid添加到TabContainer

2 个答案: