fc2ブログ

記事一覧

TreeViewにおいて親子関係のチェックを付ける方法 | asp.net


TreeViewにおいて全ての子ノードにチェックがONの場合、親ノードのチェックをONにする、または親ノードのチェックをOFFにした場合、子ノードのチェックをOFFにする方法をご紹介いたします。

似たような事例が以下のURLに載っていますが、子ノードのチェックをOFFにした場合の仕様が異なるため、ここに記載します。

<参考URL>
http://stackoverflow.com/questions/1437617/asp-net-treeview-checkbox-selection


aspnet_treeview_02.png



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



1.サンプルコード

JavaScript にてチェックのコントールを行います。
※ jQuery の方が軽量かつ簡素的に実装できます。
※ JavaScript なのでポストバック後には必ずチェックの値検証を VB 側で行ってください。

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="trvTest" runat="server" onclick="OnTreeClick(event); "  >
        </asp:TreeView>
    </div>
    </form>
<script type = "text/javascript" >
Function OnTreeClick(evt) {
var src = window.event!= window.undefined ? window.event.srcElement : evt.target
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
If (isChkBoxClick) Then {
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
If (nxtSibling && nxtSibling.nodeType == 1) // check Then If nxt sibling Is Not null & Is an element node
{
If (nxtSibling.tagName.toLowerCase() == "div") // If node has children
{
//check Or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check Or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}

Function CheckUncheckChildren(childContainer, check) {
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
For (var i = 0; i < childChkBoxCount; i++) {
childChkBoxes[i].checked = check;
}
}

Function CheckUncheckParents(srcChild, check) {
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;

If (parentNodeTable) Then {
var checkUncheckSwitch;
var isAllSiblingsUnChecked = AreAllSiblingsUnChecked(srcChild);
If (isAllSiblingsUnChecked) Then
checkUncheckSwitch = True;
Else
checkUncheckSwitch = False;

var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
If (inpElemsInParentTable.length > 0) Then {
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}

Function AreAllSiblingsUnChecked(chkBox) {
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
For (var i = 0; i < childCount; i++) {
If (parentDiv.childNodes[i].nodeType == 1) //check if the child node Is an element node
{
If (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are Not checked, return false
If (!prevChkBox.checked) Then {
Return False;
}
}
}
}
Return True;
}

//utility function to get the container of an element by tagname
Function GetParentByTagName(parentTagName, childElementObj) {
var parent = childElementObj.parentNode;
While (parent.tagName.toLowerCase()!= parentTagName.toLowerCase()) {
parent = parent.parentNode;
}
Return parent;
}
</script>
</body>
</html>


TreeViewのデータバインドの方法やポストバックの方法などは前回の記事をご覧くださいませ。
https://itblog.dynaspo.com/blog-entry-122.html





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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