データを TreeView コントロールで表示 VisualStudio2017 の Web サイトプロジェクトで bootstrap, 及び script フォルダの js ファイルが使用できるマスターページを親とする TestTreeView.aspx ページを作成します下記の html コー

Size: px

Start display at page:

Download "データを TreeView コントロールで表示 VisualStudio2017 の Web サイトプロジェクトで bootstrap, 及び script フォルダの js ファイルが使用できるマスターページを親とする TestTreeView.aspx ページを作成します下記の html コー"

ただきよおおふさ
4 years ago
Views:

1 データを 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 にします次図を参照して下さい

2 配置図 1 使用するコントロールと用途コントロール名 ID 名用途 Treeview mytree 親子カテゴリー名の表示 SqlDataSurce sdsparent 親カテゴリーを表示するためのデータソース SqlDataSource sdschild こカテゴリーを表示するためのデータソース各コントロールのプロパティ ID 名プロパティ名値

[CateName] = @CateName WHERE [CID] = @CID InsertQuery INSERT INTO [ProdCate] ([CateName], [Deleted]) VALUES

[SubCateName] FROM [ProdSubCate] WHERE (([Deleted] = 0) AND ([CID] = @CID)) UpdateQuery UPDATE [ProdSubCate] SET

3 mytree Font Size 1.3em sdsparent SelectQuery SELECT * FROM [ProdCate] WHERE ([Deleted] = 0) UpdateQuery UPDATE [ProdCate] SET [CateName] WHERE [CID] InsertQuery INSERT INTO [ProdCate] ([CateName], [Deleted]) VALUES (@CateName,0) DeleteQuery DELETE FROM [ProdCate] WHERE [CID] sdschild SelectQuery SELECT [SCID], [CID], [SubCateName] FROM [ProdSubCate] WHERE (([Deleted] = 0) AND ([CID] UpdateQuery UPDATE [ProdSubCate] SET [CID] [SubCateName] WHERE [SCID] InsertQuery INSERT INTO [ProdSubCate] ([CID], [SubCateName], [Deleted]) VALUES 0) DeleteQuery DELETE FROM [ProdSubCate] WHERE [SCID]

TreeView の概要についての技術情報はこちらからキーワード TreeView 現在テーブル ProdCate と ProdSubCate には下表のデータが登録されているものとします ProdCate テーブル ProdSubCate テーブル前図配置図 1 のデザインビューを右クリックしてプログラムコードファイルに移って下記の Sub プロシージャを追加して下さい

DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then ' テーブル ProdCate にデータがあれば Tree.Nodes.Clear() Dim cnt As Integer = 0 Do While reader.

4 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()

5 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 ここでブラウザーで表示して実行します次図実行画面が結果です

6 実行画面 1 TreeView の Childleaf を赤色の表示にするには mytree のプロパティウインドウで LeafNodeStyle プロパティの Font->ForeColor を Red にします下図これでデータベースからのデータを TreeView にデータバインドして現在のカテゴリーの構成が表示できましたこのプログラムを良く理解されてもっと機能の高いコントロールに仕上げて下さい

7 技術情報サイト技術情報はこちらからこのリンクを活用して下さい

スポーツ写真販売サイト作成（１）

スポーツ写真販売サイト作成（１） 0 SkyOcean スポーツ写真販売サイト作成 (1) サイト管理の作成 1 内容スポーツ写真販売サイト作成 (1)... 0 初めに... 2 対象読者について... 2 アプリケーションの概要... 2 共通事項... 3 本チュートリアルでの表記... 3 プロパティウインドウでの色の設定... 3 テーブルの列等のプロパティ設定例... 3 ストアドプロシージャの作成方法... 4 kk...

データを TreeView コントロールで表示 VisualStudio2017 の Web サイトプロジェクトで bootstrap, 及び script フォルダの js ファイルが使用できるマスターページを親とする TestTreeView.aspx ページを作成します 下記の html コー

データを TreeView コントロールで表示 VisualStudio2017 の Web サイトプロジェクトで bootstrap, 及び script フォルダの js ファイルが使用できるマスターページを親とする TestTreeView.aspx ページを作成します下記の html コー