データを TreeView コントロールで表示 VisualStudio2017 の 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 class="panel-body"> <asp:treeview ID="myTree" runat="server" Font-Size="1.2em"></asp:TreeView> <%--panel 終了 --%> <div class="clearfix"> </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) DeleteQuery DELETE FROM [ProdSubCate] WHERE [SCID] = @SCID
TreeView の概要についての技術情報はこちらからキーワード TreeView 現在 テーブル ProdCate と ProdSubCate には下表のデータが登録されているものとします ProdCate テーブル ProdSubCate テーブル 前図 配置図 1 のデザインビューを右クリックして プログラムコードファイルに移って 下記の 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.clear()
Else 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() 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 にデータバインドして 現在のカテゴリーの構成が表示できました このプログラムを良く理解されてもっと機能の高いコントロールに仕上げて下さい
技術情報サイト技術情報はこちらからこのリンクを活用して下さい