データを TreeView コントロールで表示
VisualStudio２０１７の Web サイトプロジェクトで、bootstrap,及び script フォルダの js ファイルが使用できるマスターページを親とする「TestTreeView.aspx」 ページを作成します。
下記のhtml コードのスタイルを作成します。
html コード 1
<%@ Page Title="" Language="VB" MasterPageFile="~/Admin/AdminMaster.master" AutoEventWireup="false" CodeFile="TestTreeView.aspx.vb" Inherits="TestTreeView" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div class="container">
<div class ="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-5"> <h2>CategoryManage</h2>
<br/>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="panel panel-default">
<div class="panel-heading"> 現在のカテゴリー構成 </div>
<div class="panel-body">
<asp:TreeView ID="myTree" runat="server" Font-Size="1.2em"></asp:TreeView> </div> </div> <%--panel 終了--%> </div> </div> <div class="clearfix"></div> </div> </asp:Content> Bootstrap のパネルの“panel-body”の中にツールボックスの「ナビゲーションタブ」の中の”TreeView”コントロールを設置します。上図赤色コード
次に、デザインビューのbootstrap のパネルの直下に SqlDataSource を配置します、ID を sdsParent にします、続けて、SqlDataSource を配置して ID を sdsChilld
配置図 1 使用するコントロールと用途 コントロール名 ID 名 用途 Treeview myTree 親、子カテゴリー名の表示 SqlDataSurce sdsParent 親カテゴリーを表示するためのデータソース SqlDataSource sdsChild こカテゴリーを表示するためのデータソース 各コントロールのプロパティ ID 名 プロパティ名 値
myTree Font Size 1.3em
sdsParent SelectQuery SELECT * FROM [ProdCate] WHERE ([Deleted] = 0)
UpdateQuery UPDATE [ProdCate] SET [CateName] = @CateName WHERE [CID] = @CID
InsertQuery INSERT INTO [ProdCate] ([CateName], [Deleted]) VALUES (@CateName,0)
DeleteQuery DELETE FROM [ProdCate] WHERE [CID] = @CID
sdsChild SelectQuery SELECT [SCID], [CID], [SubCateName] FROM [ProdSubCate] WHERE (([Deleted] = 0) AND ([CID] = @CID))
UpdateQuery UPDATE [ProdSubCate] SET [CID] = @CID, [SubCateName] = @SubCateName WHERE [SCID] = @SCID
InsertQuery INSERT INTO [ProdSubCate] ([CID], [SubCateName], [Deleted]) VALUES (@CID, @SubCateName, 0)
TreeView の概要についての技術情報はこちらから キーワードTreeView 現在、テーブル「ProdCate」と「ProdSubCate」には下表のデータが登録されているものとします。 ProdCate テーブル ProdSubCate テーブル 前図、配置図１のデザインビューを右クリックして、プログラムコードファイルに移って、下記のSub プロシージャを追加して下さい。 プログラムコード 1
Public Sub CreateMyTree(ByVal sdsParent As SqlDataSource, ByVal sdsChild As SqlDataSource, ByVal ParentID As String, ByVal ChildID As String, ByVal Tree As TreeView)
Dim reader As DbDataReader = sdsParent.Select(DataSourceSelectArguments.Empty) If reader.HasRows Then 'テーブル「ProdCate」にデータがあれば Tree.Nodes.Clear() Dim cnt As Integer = 0 Do While reader.Read cnt = cnt + 1
Dim node As New TreeNode()
'node の Value プロパティを設定します
node.Value = "P" & reader(ParentID) 'node の Text を設定します
node.Text = String.Format("{0}.{1}", cnt.ToString(), reader("CateName")) '子ノードを生成する
sdsChild.SelectParameters.Add((ParentID), CInt(reader(ParentID))) sdsChild.SelectParameters.Add(("Deleted"), CInt(0))
'sdsChild の DataSourcMode は、DataReader にすること
Dim Childreader As DbDataReader = sdsChild.Select(DataSourceSelectArguments.Empty) 'データがある限りループして、子ノードを作成する、
Do While Childreader.Read() Dim nd As New TreeNode()
nd.Value = "C" & Childreader(ChildID) nd.Text = Childreader("SubCateName") node.ChildNodes.Add(nd) Loop 'Tree にノードを追加する Tree.Nodes.Add(node) Loop Tree.ExpandAll() reader.Close() Else End If End Sub 次に、ページのLoad イベントコード内に下記のコードを追加して下さい。赤色のコード部分 プログラムコード 2
Private Sub TestTreeView_Load(sender As Object, e As EventArgs) Handles Me.Load Me.CreateMyTree(sdsParent, sdsChild, "CID", "SCID", myTree)
End Sub
実行画面 1
TreeView の Childleaf を赤色の表示にするには、myTree のプロパティウインドウで LeafNodeStyle プロパティの Font－＞ForeColor を Red にします、下図
これで、データベースからのデータをTreeView にデータバインドして、現在のカテゴリーの構成が表示できました。このプログラムを良く理解されてもっと機能
技術情報サイト
技術情報はこちらから このリンクを活用して下さい。
