1

テーブルの列をサブ列に分割する方法はありますか? たとえば、メインの列はリリースのイテレーションですが、イテレーションごとに Resources|Planned|Accepted のサブ列があります。

4

1 に答える 1

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>
于 2012-04-17T18:26:39.180 に答える