ここでは、asp.net2.0 の TreeView コントロールを JavaScript と組み合わせて使用して、アクセス許可ツリーのいくつかの機能を実装します。
権限ツリーに次の 3 つのルールがあると仮定します。
1. ノードがアクセス可能な場合は、その親ノードもアクセス可能である必要があります。
2. ノードがアクセス可能な場合は、その子ノードにもアクセスできます。
3. ノードにアクセスできない場合、その子ノードにもアクセスできません。
コードは次のとおりです。
//指定されたtagNameの親要素を取得します
関数 public_GetParentByTagName(要素, タグ名)
{
var 親 = element.parentNode;
var upperTagName = tagName.toUpperCase();
//この要素が目的のタグではない場合は、トレースアップを続行します
while (親 && (parent.tagName.toUpperCase() != upperTagName))
{
親 = 親.親ノード ? 親.親ノード : 親.親要素;
}
親を返します。
}
// ノードの親ノードをチェック済みに設定します - ノードがアクセス可能な場合は、その親ノードもアクセス可能である必要があります
関数 setParentChecked(objNode)
{
var objParentDiv = public_GetParentByTagName(objNode,"div");
if(objParentDiv==null || objParentDiv == "未定義")
{
戻る;
}
var objID = objParentDiv.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("ノード"));
objID = objID+"チェックボックス";
var objParentCheckBox = document.getElementById(objID);
if(objParentCheckBox==null || objParentCheckBox == "未定義")
{
戻る;
}
if(objParentCheckBox.tagName!="INPUT" && objParentCheckBox.type == "チェックボックス")
戻る;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}
// ノードの子ノードを非チェックに設定します - ノードがアクセスできない場合、その子ノードもアクセスできなくなります。
関数 setChildUnChecked(divID)
{
var objchild = divID.children;
var count = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="INPUT" && tempObj.type == "チェックボックス")
{
tempObj.checked = false;
}
setChildUnChecked(tempObj);
}
}
// ノードの子ノードをチェックに設定します - ノードにアクセスできる場合は、その子ノードにもアクセスできます
関数 setChildChecked(divID)
{
var objchild = divID.children;
var count = objchild.length;
for(var i=0;i<objchild.length;i++)
{
var tempObj = objchild[i];
if(tempObj.tagName=="INPUT" && tempObj.type == "チェックボックス")
{
tempObj.checked = true;
}
setChildChecked(tempObj);
}
}
//イベントをトリガーする
関数 CheckEvent()
{
var objNode =event.srcElement;
if(objNode.tagName!="INPUT" || objNode.type!="チェックボックス")
戻り値;
if(objNode.checked==true)
{
setParentChecked(objNode);
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"ノード");
if(objParentDiv==null || objParentDiv == "未定義")
{
戻る;
}
setChildChecked(objParentDiv);
}
それ以外
{
var objID = objNode.getAttribute("ID");
var objID = objID.substring(0,objID.indexOf("CheckBox"));
var objParentDiv = document.getElementById(objID+"ノード");
if(objParentDiv==null || objParentDiv == "未定義")
{
戻る;
}
setChildUnChecked(objParentDiv);
}
次に
、TreeView を page_load イベントの js イベントにバインドします。
this.TreeView1.Attributes.Add("onclick", "CheckEvent()");