コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
DIVで囲れたコントロールを横並びに配置しスクロールを表示する方法 | asp.net
- 2017/04/03
- 15:35
asp.net のコントロールを横並びに配置し、かつ、はみ出した部分はスクロールすることにより表示したい場合がありますが、そのhtml上のレイアウト方法についてご紹介いたします。今回はTreeViewをDIVで囲んだものを横並びに表示してスクロールを表示しています。横幅はjQueryで調節していきます。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降
１．CSSの設定
最初に横並びにしたいコントロール（今回はTreeView）をDIVで囲い（孫DIV）、左から横並びになるように設定します。
float: left;
次に複数の孫DIVをDIVで囲います（子DIV）。子DIVには最小の横幅を設定します。これによりスクロールの中でも改行されずに表示されます。
min-width : 1200px;
最後に親のDIVに縦横のスクロールを表示するための設定と、高さと横幅を設定します。
overflow :auto;
height : 300px;
width : 800px;
２．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,
});
}
３．サンプルコード
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でご紹介しております。
/blog-entry-122.html
TreeViewにおいて親子関係のチェックを付ける方法については以下のURLでご紹介しております。
/blog-entry-123.html
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
- 関連記事
-
- Visual Studio 2015 の IIS Express にIP経由で接続する方法 | asp.net
- ぺージロード時のスクリプト処理順序について | asp.net
- DIVで囲れたコントロールを横並びに配置しスクロールを表示する方法 | asp.net
- ListViewのヘッダーを固定する方法 | asp.net
- ListViewの明細毎に存在するチェックボックスをJavascriptで全て更新する方法 | asp.net
