Rally App SDK:有没有办法为表提供子列?

时间:2012-04-17 17:29:39

标签: rally

有没有办法将列拆分为表的子列?例如,主列是发布的迭代,但是每次迭代都会有Resources | Planned | Accepted的子列。

1 个答案:

答案 0 :(得分:1)

你可以用一点CSS和几个跨度相当简单地做到这一点。下面是一个简单的例子。您可能可以更好地使用CSS并在子列周围绘制一些边框,但这给出了这个想法。请注意,当您以这种方式执行操作时,整个列的排序由第一个子列中的值决定...

    <html>
        <head>
        <title>Table With Sub Columns Example</title>
        <meta name="Name" content="Table With Sub Columns Example" />

        <style type="text/css">

            .subColumnLeft {
                float: left;
                text-align: center;
                width: 200px;
            }

            .subColumnRight {
                float: right;
                text-align: center;
                width: 200px;
            }


        </style>


        <script type="text/javascript" src="https://rally1.rallydev.com/apps/1.31/sdk.js"></script>
        <script type="text/javascript">

            rally.addOnLoad(function(){

                var table = new rally.sdk.ui.Table({
                    columns: [
                        {key: 'name', header: 'Name', width: 100},
                        {key: 'subColumnData', header: '<span class="subColumnLeft">Sub Column 1 Header</span>' +
                                '<span class="subColumnRight">Sub Column 2 Header</span>', width: 430}
                    ]
                });

                table.addRows([
                    {
                        name: 'Test 1',
                        subColumnData: '<span class="subColumnLeft">Sub Column 1 Data Here</span>' +
                                '<span class="subColumnRight">Sub Column 2 Data Here</span>'
                    },
                    {
                        name: 'Test 2',
                        subColumnData: '<span class="subColumnLeft">Sub Column 1 Data Here</span>' +
                                '<span class="subColumnRight">Sub Column 2 Data Here</span>'
                    }
                ]);

                table.display('tableDiv');

            });

        </script>
    </head>
    <body>
    <div id="tableDiv"></div>
    </body>
    </html>