如何声明右对齐Dojo Datagrid中的列

时间:2012-07-18 12:50:52

标签: dojo dojox.grid.datagrid

我使用html以声明方式创建了一个Dojo数据网格。我需要右对齐一列。我尝试了以下两种方法,我无法让它工作

尝试1

在以下示例中,他align="right"被忽略,但width="100px"被添加到每个<td>元素的样式

<table data-dojo-type="dojox.grid.DataGrid" style="height:100px;">
<thead>
   <tr>
    <th field="col1" width="auto">Col 1</th>
    <th field="col2" width="100px" align="right">Col 2</th>
    <th field="col3" width="100px" align="right">Col 3</th>
   </tr>
</thead>
</table>

尝试2

在以下示例中,{0}似乎完全忽略了style="text-align:right;"

<table data-dojo-type="dojox.grid.DataGrid" style="height:100px;">
<thead>
   <tr>
    <th field="col1" width="auto">Col 1</th>
    <th field="col2" width="100px" style="text-align:right;">Col 2</th>
    <th field="col3" width="100px" style="text-align:right;">Col 3</th>
   </tr>
</thead>
</table>

1 个答案:

答案 0 :(得分:2)

您需要使用styles元素上的<th>属性。顾名思义,This属性指定将哪些css样式应用于该列的<td>

示例标记:

<body class="claro">
    <table data-dojo-type="dojox.grid.DataGrid" style="width:100%" store="myStore">
        <thead>
            <tr>
                <th field="col1" width="auto" align="left">Col 1</th>
                <th field="col2"  width="100px" align="left">Col 2</th>
                <th field="col3" width="100px" align="right" styles="text-align:right;">Col 3</th>
           </tr>
        </thead>
    </table>
</body>

示例js:

dojo.require('dojox.grid.DataGrid');
dojo.require('dojo.parser');
dojo.require('dojo.data.ItemFileWriteStore');
dojo.ready(function() {
    var data = {
        identifier: 'id',
        items: []
    };
    var data_list = [
        {
        col1: "normal",
        col2: false,
        col3: 29.91},
    {
        col1: "important",
        col2: false,
        col3: 9.33},
    {
        col1: "important",
        col2: false,
        col3: 19.34}
    ];
    var rows = 60;
    for (var i = 0, l = data_list.length; i < rows; i++) {
        data.items.push(dojo.mixin({
            id: i + 1
        }, data_list[i % l]));
    }
    myStore = new dojo.data.ItemFileWriteStore({
        data: data
    });

    dojo.parser.parse();
});​

http://jsfiddle.net/jrkeller/3h6MN/1/

我在“使用网格”教程here

中发现了这个属性