0

Web ページにマスター詳細レポートを表示しようとしています。現在の動作方法は、各マスター行を作成するテーブルを作成し、各マスター行の下に詳細を含む別のテーブルを作成することです。これらのテーブルの一部は、複数の行です。詳細行を展開/折りたたむにはどうすればよいですか? 詳細行のコードは次のとおりです。

<table>
    <tr>
        <th>
            Bar Code &nbsp;
        </th>
        <th>
            Start Time
        </th>
        <th>
            Length &nbsp;
        </th>
        <th>
            End Time
        </th>
    </tr>

    <tbody id = '@ViewBag.i'>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.BarCode
                </td>
                <td>
                    @item.StartTime
                </td>
                <td>
                    @item.Length
                </td>
                <td>
                    @item.EndTime
                </td>
            </tr>
        }
    </tbody>
</table>

この場合、他のビューでこのテーブルを生成するためのループが実行されるたびに、viewBag がインクリメントされます。以前にいくつかのコードを試したことがありますが、最も近いものは、最初の詳細テーブルにのみ影響する展開/折りたたみでした。前もって感謝します。

4

2 に答える 2

-1

この例は、探している最終結果のように聞こえます。

したがって、基本的には@ViewBag.i、各テーブルを一意にするために使用する必要があるように思えます。このような：

<table>
    <tr>
        <th>
            Bar Code &nbsp;
        </th>
        <th>
            Start Time
        </th>
        <th>
            Length &nbsp;
        </th>
        <th>
            End Time
        </th>
    </tr>

    <tbody id = 'someTbodyID_@(ViewBag.i)'>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.BarCode
                </td>
                <td>
                    @item.StartTime
                </td>
                <td>
                    @item.Length
                </td>
                <td>
                    @item.EndTime
                </td>
            </tr>
        }
    </tbody>
</table>

<a href="#" id="clicker_@(ViewBag.i)">click me to collapse 1</a>

次にjsで、jQueryが含まれています：

$(function(){
    $("#clicker_@(ViewBag.i)").click(  function(){
        $("#someTbodyID_@(ViewBag.i) tr").toggle();
    });        
});​

これにより、 を使用@(ViewBag.i) して各テーブルが一意になり、クリックしてTRその tbody 内のすべてを折りたたむことができます。

クリックして折りたたむものとして何を使用したいのかわからなかったので、それを追加しましたA. ただし、クリックイベントは何にでも追加できます。

于 2012-12-26T16:25:01.330 に答える
-1

javascipt の次のコードでこれを行うことができると思います。

function showHide(obj){  
var tbody = obj.parentNode.parentNode.parentNode.getElementsByTagName("someTbodyID_@(ViewBag.i)")[0];  
var old = tbody.style.display;  
tbody.style.display = (old == "none"?"":"none");  
}
于 2012-12-26T17:03:32.217 に答える