0

さまざまなデータセットのクエリの結果を表示するグリッド (Dojo 1.8、dgrid) を TabContainer に入力しています。各タブは、1 つのデータセットの結果です。異なるデータセットにはさまざまな数のフィールドがあるため、各グリッドを動的に構築し、TabContainer に追加される ContentPane に追加します。

私の現在の問題は、グリッドを作成するときにグリッドの幅を設定することです。データセットには、グリッドに表示される 2 つのフィールドから 100 を超えるフィールドを含めることができます。CSS で 600px のグリッドのデフォルト幅を設定しましたが、グリッドにはデータセットの最初の 6 つのフィールドしか表示されません。幅を「自動」に設定すると、TabContainer と同じ幅しかなく、スクロール バーが削除され、データが切り取られます。各グリッドの幅を個別に設定することはできますか?

これは、結果がどのように見えるかです ここに画像の説明を入力

これは、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); }
}
4

2 に答える 2

0

問題はグリッド幅ではなく、列幅です。それらはコンテナに適合します。

列に固定幅を指定すると、目的の効果が得られます。

あなたはスタイルを整え.dgrid-cellたり、.dgrid-column-[index]

また、列のデータに応じてさらに制御する必要もありました。列に独自の renderHeaderCell および renderCell メソッドを提供することによって、スタイルを制御することもできます。(スタイルは dom-style を指します)

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

renderCell:  function(object, value, node) {
    style.set(node, 'width', '50px');
}
于 2013-06-18T13:12:47.017 に答える
0

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 があるはずです (ポイントもクリックした場合)。

于 2013-07-25T20:28:28.390 に答える