ASP.NET 2.0 TreeView には、すべてのツリー ノードのチェックボックスを表示するなど、多くの組み込み機能があります。ノード レベルの書式設定、スタイルなど。ShowCheckBoxes="All" プロパティを有効にすると、すべてのノードにチェックボックスが表示されるように設定されます。他のオプションは、[リーフ]、[なし]、[親]、および [ルート] で、それぞれのノード レベルでチェックボックスが表示されます。どれもチェックボックスを表示しません。
ShowCheckBoxes="All" を設定すると、他のすべてのチェックボックスが自動的にチェックされるように、ユーザーがルート ノードのチェックボックスを選択できる機能を提供したいと考えています。基本的に、親ノードがチェックされると、すべての子ノードが自動的にチェックされるはずです。
ポストバックを使用せずにクライアント側でこのタスクを実行するのは直感的です。
次のコード スニペットは、同じことを実現するのに役立ちます。
ツリービュー宣言
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" onclick="client_OnTreeNodeChecked();" ShowCheckBoxes="all">
<DataBindings>
<asp:TreeNodeBinding DataMember="Category" ValueField="ID" TextField="Name"></asp:TreeNodeBinding>
<asp:TreeNodeBinding DataMember="Description" ValueField="Value" TextField ="値"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>
上記の TreeView 宣言コードでは、プロパティ onclick="client_OnTreeNodeChecked();" を見つけることができます。イベントは、実際にはこのタスクを実行する JavaScript 関数です。
Javascript コード スニペットは次のとおりです: -
<script language="javascript" type="text/javascript">
関数 client_OnTreeNodeChecked()
{
var obj = window.event.srcElement;
vartreeNodeFound = false;
varcheckedState;
if (obj.tagName == "INPUT" && obj.type == "チェックボックス") {
var ツリーノード = obj;
checkedState = ツリーノード.チェック済み;
する
{
obj = obj.parentElement;
while (obj.tagName != "TABLE")
varparentTreeLevel = obj.rows[0].cells.length;
varparentTreeNode = obj.rows[0].cells[0];
var tables = obj.parentElement.getElementsByTagName("TABLE");
var numTables = tables.length
if (numTables >= 1)
{
for (i=0; i < numTables; i++)
{
if (テーブル[i] == obj)
{
ツリーノードが見つかりました = true;
i++;
if (i == numTables)
{
戻る;
}
}
if (treeNodeFound == true)
{
var childTreeLevel = tables[i].rows[0].cells.length;
if (childTreeLevel >parentTreeLevel)
{
var cell = tables[i].rows[0].cells[childTreeLevel - 1];
var inputs = cell.getElementsByTagName("INPUT");
入力[0].checked =checkedState;
}
それ以外
{
戻る;
}
}
}
}
}
}
</script>