如何以声明方式右对齐 Dojo 数据网格中的列答案

【问题标题】：How To Declaratively Right Align a Column in a Dojo Datagrid如何以声明方式右对齐 Dojo 数据网格中的列
【发布时间】：2012-07-17 12:21:04
【问题描述】：

我有一个使用 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

在下面的例子中style="text-align:right;"似乎被dojo完全忽略了

<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>

【问题讨论】：

你想要什么右对齐？专栏本身？还是列中的文本？我整理了一个快速小提琴来演示网格与 dojo 文档 (jsfiddle.net/jrkeller/3h6MN) 的相似性，但我认为我不明白您的要求。
@BuffaloBuffalo - 我希望列中的文本右对齐。 Col2 和 Col3 的数字有 2 位小数。我希望小数对齐。
@BuffaloBuffalo - 谢谢你的 jsfiddle，我也无法正确对齐那里的文本

标签： dojo dojox.grid.datagrid

【解决方案1】：

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

示例标记：

<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

【讨论】：

谢谢，成功了！我很尴尬，我已经阅读了该教程来创建我以编程方式生成的所有网格，并且应该知道更好地只是以声明性格式尝试它。
属性 styles 放在 html 元素上非常不直观，这无济于事。