javascript - dojox.grid.DataGrid 行のスタイルをどのように設定しますか?

Question

次のサンプルコードがあります (必要に応じてカットアンドペーストできます)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />

<script>
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");
    function init() {
        var lData = {
            items: [
                   {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
                   {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
                   {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
                   {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
                   {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
            ],
            identifier: "position"      
        };
        var dataStore = new dojo.data.ItemFileReadStore({data:lData});
        var grid = dijit.byId("theGrid");
        grid.setStore(dataStore);

        dojo.connect(dijit.byId("theGrid"), 'onStyleRow', this, function (row) {
            var theGrid = dijit.byId("theGrid")
            var item = theGrid.getItem(row.index);
            if(item){
                var type = dataStore.getValue(item, "band", null);
                if(type == "Rothwell Temperance"){
                    row.customStyles += "color:red;";
                }
            }
            theGrid.focus.styleRow(row);
            theGrid.edit.styleRow(row);
        });
    }
var plugins = {
    filter: {
        itemsName: 'songs',
    closeFilterbarButton: true,
    ruleCount: 8
        }
};
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("theGrid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("theGrid").filter({band: '*'});
        dijit.byId('filterText').set('value','');
    }
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">&nbsp;&nbsp;&nbsp;
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<table dojoType="dojox.grid.DataGrid" id="theGrid" autoHeight="auto" autoWidth="auto" plugins="plugins">
    <thead>
        <tr>
            <th field="position" width="200px">Position</th>
            <th field="band" width="200px">Band</th>
            <th field="conductor" width="200px">Conductor</th>
        </tr>
    </thead>
</table>
</body>
</html>

行をクリックしたonStyleRowときにのみ発生します。ボタンの内容に基づいて行をフォーマットする方法はありますか? 作成時にクラスを行に割り当ててからクラスの値を変更するか、行をループしてstyle内容に基づいてそれぞれの要素を直接変更します。

編集

また、プログラムでグリッドを作成しようとしました。この方法で作成するonStyleRowと、作成時に起動しますが、他の方法と同じレベルのハイライトは提供されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
        djConfig="parseOnLoad:true"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css" />
<style>
#grid {
    height: 20em;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.Button");
    function init() {
        var lData = {
            items: [
                   {"position":"1","music":"Opera","band":"Black Dyke","conductor":"Nick Childs"},
                   {"position":"2","music":"Opera","band":"Carlton Main","conductor":"Philip McCann"},
                   {"position":"3","music":"Classical","band":"Grimethorpe","conductor": "Allan Withington"},
                   {"position":"4","music":"Classical","band":"Brighouse and Rastrick","conductor": "David King"},
                   {"position":"5","music":"Opera","band":"Rothwell Temperance","conductor":"David Roberts"},
            ],
            identifier: "position"      
        };
        var dataStore = new dojo.data.ItemFileReadStore({data:lData});
        var layout = [[
            {'name':'Position','field':'position','width':'50px'},
            {'name':'Music Type','field':'music','width':'150px'},
            {'name':'Band','field':'band','width':'200px'},
            {'name':'Conductor','field':'conductor','width':'200px'}
        ]];
        var grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: dataStore,
            structure: layout,
            rowSelector: false,
            selectionMode: 'extended',
            onStyleRow: function(row) {
                var item = this.getItem(row.index);
                if(item){
                    var type = this.store.getValue(item, "band", null);
                    if(type == "Rothwell Temperance"){
                        row.customStyles += "color:red;";
                    }
                }
            }
        });
        grid.placeAt("gridDiv");
        grid.startup();
    }
    var plugins = {
        filter: {
            itemsName: 'songs',
            closeFilterbarButton: true,
            ruleCount: 8
        }
    };
    dojo.ready(init);
    function filterGrid() {
        dijit.byId("grid").filter({band: dijit.byId('filterText').get('value')+'*'});
        console.log(dijit.byId('filterText').get('value')+'*');
    }
    function resetFilter() {
        dijit.byId("grid").filter({band: '*'});
        dijit.byId('filterText').set('value','');
    }
</script>
</head>
<body class="claro">
<input dojoType="dijit.form.TextBox" id="filterText" type="text" onkeyup="filterGrid()">&nbsp;&nbsp;&nbsp;
<button dojoType="dijit.form.Button" onclick="resetFilter()">Clear</button><br><br>
<div id="gridDiv"></div>
</body>
</html>

方法 1 (グリッドが作成されたときに書式設定されず、ハイライト表示されます) ここに画像の説明を入力

方法 2 (グリッド作成時の書式、行の強調表示なし) ここに画像の説明を入力

score 4 · Accepted Answer

関数の単純な順序変更により、データがグリッドに追加される前に関数init()が確実にバインドされます。onStyleRow

function init() {
    var lData = {
        items: [
               {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
               {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
               {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
               {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
               {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
        ],
        identifier: "position"      
    };
    var dataStore = new dojo.data.ItemFileReadStore({data:lData});
    var grid = dijit.byId("theGrid");
    dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if(item){
            var type = dataStore.getValue(item, "band", null);
            if(type == "Rothwell Temperance"){
                row.customStyles += "color:red;";
                //row.customClasses += " dismissed";
            }
        }
        //theGrid.focus.styleRow(row);
        //theGrid.edit.styleRow(row);
    });
    grid.setStore(dataStore);
}

score 2 · Accepted Answer

次のいずれかを試しましたか。

データに応じて Dojox グリッド行のスタイルを設定する

dojox DataGrid onStyleRow は最初は機能しますが、その後は機能しません

dojox.grid.DataGrid - onStyleRow の更新が必要ですか? (道場1.2.0)

Firebug を使用して、行に ID が割り当てられているかどうかを確認し、onStyleRow を使用して各行の背景を変更することもできます。

javascript - dojox.grid.DataGrid 行のスタイルをどのように設定しますか?

2 に答える 2

Related

Reference