記事一覧

DIVで囲れたコントロールを横並びに配置しスクロールを表示する方法 | asp.net


asp.net のコントロールを横並びに配置し、かつ、はみ出した部分はスクロールすることにより表示したい場合がありますが、そのhtml上のレイアウト方法についてご紹介いたします。今回はTreeViewをDIVで囲んだものを横並びに表示してスクロールを表示しています。横幅はjQueryで調節していきます。

aspnet_div_float_scroll_01.png


前提条件
Windows 7 Professional 以降 / Windows Server 2008 R2 以降
Visual Studio 2008 Professional 以降
VB.NET
.Net Framework 3.5 以降


1.CSSの設定

aspnet_div_float_scroll_02.png
最初に横並びにしたいコントロール(今回はTreeView)をDIVで囲い(孫DIV)、左から横並びになるように設定します。
    float: left;
次に複数の孫DIVをDIVで囲います(子DIV)。子DIVには最小の横幅を設定します。これによりスクロールの中でも改行されずに表示されます。
    min-width : 1200px;
最後に親のDIVに縦横のスクロールを表示するための設定と、高さと横幅を設定します。
    overflow :auto;
    height : 300px;
    width : 800px;



2.jQueryで横幅を動的に変更する

コントロールの大きさがデータによって変更になる場合、子DIVの大きさを超えてしまう場合があります。その場合、超えたコントロールが改行されて表示されてしまう事を防ぐために、jQueryで孫DIVの横幅を合計し、子DVIの横幅を調節することが必要です。これにより横スクロールの大きさも動的に変更されます。
//ページ表示時に設定を変更する。
$(window).load(function () {
    ResizeTrvArea();
});
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
function ResizeTrvArea() {
    var boxes = $(".trv-area .wrapper-area .box")
    var width = 0;
    for (var i = 0; i < boxes.length - 1; i++) {
        if (boxes[i] != null && boxes[i] != undefined) {
//boxの幅 + boxの余白 + 50px?←要調整
            width += boxes[i].clientWidth + 90
        }
    }
    $(".trv-area .wrapper-area").css({
        "width": width,
    });
}


3.サンプルコード

aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TreeViewTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TreeViewTest</title>
    <link rel="stylesheet" type="text/css" href="~/Scripts/Style.css" media="all" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        function PostBackForTreeView()
        {
            var o = window.event.srcElement;
            if (o.tagName == "INPUT" && o.type == "checkbox")
            {
                __doPostBack("","");
            }
        }
//ページ表示時に設定を変更する
        $(window).load(function () {
            ResizeTrvArea();
        });
//孫DIVの横幅を全て加算し、子DIVの横幅を設定する
        function ResizeTrvArea() {
            var boxes = $(".trv-area .wrapper-area .box")
            var width = 0;
            for (var i = 0; i < boxes.length - 1; i++) {
                if (boxes[i] != null && boxes[i] != undefined) {
                    width += boxes[i].clientWidth + 90
                }
            }
            $(".trv-area .wrapper-area").css({
                "width": width,
            });
        }
    </script>
    <div class="trv-area">
        <div class="wrapper-area">
            <div class="box">
                <asp:TreeView ID="trvTest1" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="RedFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest2" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest3" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest4" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest5" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
            <div class="box">
                <asp:TreeView ID="trvTest6" runat="server" onclick="PostBackForTreeView();"  >
                    <ParentNodeStyle CssClass="" />
                    <LeafNodeStyle   CssClass="BlueFont"/> 
                </asp:TreeView>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

CSS
body {
}
.RedFont {
    color:#FF0000;
    font: bold 12px;
}
.BlueFont {
    color:#0000FF;
    font: bold 12px;
}

.trv-area {
    overflow :auto;
    height : 300px;
    width : 800px;
}
.wrapper-area{
    min-width : 1200px;
    min-height : 500px;
}
.box {
    float: left;
    margin : 20px;
}


TreeViewでポストバックを発生させる方法については以下のURLでご紹介しております。
http://itblogdsi.blog.fc2.com/blog-entry-122.html

TreeViewにおいて親子関係のチェックを付ける方法については以下のURLでご紹介しております。
http://itblogdsi.blog.fc2.com/blog-entry-123.html


関連記事

コメント

コメントの投稿
非公開コメント

アルバム

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。