当前位置：首页 > news >正文

包含CheckBox的TreeView控件——父节点选中时其子节点不可选，子节点有项选中时其父节点不可选...

news 来源：原创 2024/5/18 12:03:12

1、在.aspx中添加TreeView控件：

<asp:TreeView ID="tvTemp" runat="server" ShowCheckBoxes="All" ShowLines="True">
</asp:TreeView>

2、给TreeView控件添加onclick事件：

方法一：在TreeView控件上添加onclick事件

<asp:TreeView ID="tvTemp" runat="server" ShowCheckBoxes="All" ShowLines="True" οnclick="CheckEvent()">
</asp:TreeView>

方法二：在页面加载时为TreeView控件添加onclick事件

protected void Page_Load(object sender, EventArgs e)
{
　　if (!IsPostBack)
　　{
　　　　PreTIDBind();

　　　　tvTempBind();//绑定节点值
　　　　this.tvTemp.Attributes.Add("onclick", "CheckEvent()");
　　}
}

3、新建JScript文件，加入onclick事件代码：

function CheckEvent() {
    var objNode = event.srcElement;
    if (objNode.tagName != "INPUT" || objNode.type != "checkbox") {
        return;
    }
    if (objNode.checked == true) {//当前节点被选中
        setParentUnChecked(objNode); //设置父节点不可选
        var objID = objNode.getAttribute("ID");
        var objID = objID.substring(0, objID.indexOf("CheckBox"));
        var objParentDiv = document.getElementById(objID + "Nodes");
        if (objParentDiv == null || objParentDiv == "undefined") {
            return;
        }
        setChildUnChecked(objParentDiv); //设置子节点不可选
    }
    else {//当前节点取消选中
        setParentChecked(objNode); //设置父节点可选
        var objID = objNode.getAttribute("ID");
        var objID = objID.substring(0, objID.indexOf("CheckBox"));
        var objParentDiv = document.getElementById(objID + "Nodes");
        if (objParentDiv == null || objParentDiv == "undefined") {
            return;
        }
        setChildChecked(objParentDiv); //设置子节点可选
    }
}

function GetParentByTagName(element, tagName) {
    var parent = element.parentNode;
    var upperTagName = tagName.toUpperCase();
    //如果这个元素不是想要的tag就继续上溯
    while (parent && (parent.tagName.toUpperCase() != upperTagName)) {
        parent = parent.parentNode ? parent.parentNode : parent.parentElement;
    }
    return parent;
}

//设置父节点不可选
function setParentUnChecked(objNode) {
    var objParentDiv = GetParentByTagName(objNode, "div");
    if (objParentDiv == null || objParentDiv == "undefined") {
        return;
    }
    var objID = objParentDiv.getAttribute("ID");
    objID = objID.substring(0, objID.indexOf("Nodes"));
    objID = objID + "CheckBox";
    var objParentCheckBox = document.getElementById(objID);
    if (objParentCheckBox == null || objParentCheckBox == "undefined") {
        return;
    }
    if (objParentCheckBox.tagName != "INPUT" || objParentCheckBox.type != "checkbox") {
        return;
    }
    objParentCheckBox.checked = false;
    objParentCheckBox.disabled = true;
    setParentUnChecked(objParentCheckBox);
}

//设置父节点可选
function setParentChecked(objNode) {
    var objParentDiv = GetParentByTagName(objNode, "div");
    if (objParentDiv == null || objParentDiv == "undefined") {
        return;
    }
    var objID = objParentDiv.getAttribute("ID");
    objID = objID.substring(0, objID.indexOf("Nodes"));
    objID = objID + "CheckBox";
    var objParentCheckBox = document.getElementById(objID);
    if (objParentCheckBox == null || objParentCheckBox == "undefined") {
        return;
    }
    if (objParentCheckBox.tagName != "INPUT" || objParentCheckBox.type != "checkbox") {
        return;
    }
    var inplen = objParentDiv.getElementsByTagName("input");
    for (var i = 0; i < inplen.length; i++) {
        if (inplen[i].checked == true) {
            objParentCheckBox.disabled = true;
            return;
        }
    }
    objParentCheckBox.disabled = false;
    setParentChecked(objParentCheckBox);
}

//设置子节点不可选
function 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 == "checkbox") {
            tempObj.checked = false;
            tempObj.disabled = true;
        }
        setChildUnChecked(tempObj);
    }
}

//设置子节点可选
function 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 == "checkbox") {
            tempObj.disabled = false;
        }
        setChildChecked(tempObj);
    }
}

4、保存JScript文件，名为：CheckEvent.js，在.aspx中添加引用。

<script src="../js/CheckEvent.js" type="text/javascript"></script>

　　在使用TreeView控件进行数据绑定时，特别是在修改的时候，想把之前添加的数据在页面加载时就勾选上，这样在修改看起来一目了然。

5、在绑定TreeView控件之前，先要获取到之前选中项的数据集合：

public void PreTIDBind()
{
　　string pretid = "";
　　DataTable dt = GetTable(TID);
　　for (int i = 0; i < dt.Rows.Count; i++)
　　{
　　　　pretid += dt.Rows[i]["PreTID"].ToString() + ',';
　　}
　　pretid = pretid.TrimEnd(',');
　　hfpreid.Value = pretid; //将数据集合赋值给隐藏控件
}

6、在绑定TreeView控件时，将每个节点的值与数据集合中的值比较，若有相等的，则选中该项：

private void tvTempBind()
{
　　tvTemp.Nodes.Clear();
　　DataSet ds = new DataSet();
　　ds = GetPreTemplateList("-1");
　　for (int i = 0; i < ds.Tables[0].DefaultView.Count; i++)
　　{
　　　　TreeNode treenode = new TreeNode();
　　　　string tempid = ds.Tables[0].DefaultView[i]["TID"].ToString();
　　　　treenode.Value = ds.Tables[0].DefaultView[i]["TID"].ToString();
　　　　treenode.Text = ds.Tables[0].DefaultView[i]["TempName"].ToString();
　　　　string[] ids = hfpreid.Value.Split(',');
　　　　for (int j = 0; j < ids.Length; j++)
　　　　{
　　　　　　if (treenode.Value == ids[j])
　　　　　　{
　　　　　　　　treenode.Checked = true;
　　　　　　}
　　　　}
　　　　treenode.SelectAction = TreeNodeSelectAction.None;
　　　　tvTemp.Nodes.Add(treenode);
　　　　ChildBind(treenode, tempid); //绑定子节点
　　}
}

绑定子节点，同样将每个节点的值与数据集合中的值比较，若有相等的，则选中该项：

private void ChildBind(TreeNode treenode, string tempid)
{
　　DataSet ds = new DataSet();
　　ds = TemplateBLL.GetPreTemplateList(tempid);
　　for (int i = 0; i < ds.Tables[0].DefaultView.Count; i++)
　　{
　　　　TreeNode childnode = new TreeNode();
　　　　childnode.Value = ds.Tables[0].DefaultView[i]["TID"].ToString();
　　　　childnode.Text = ds.Tables[0].DefaultView[i]["TempName"].ToString();
　　　　string childtempid = ds.Tables[0].DefaultView[i]["TID"].ToString();
　　　　childnode = new TreeNode(childnode.Text, childnode.Value);
　　　　string[] ids = hfpreid.Value.Split(',');
　　　　for (int j = 0; j < ids.Length; j++)
　　　　{
　　　　　　if (childnode.Value == ids[j])
　　　　　　{
　　　　　　　　childnode.Checked = true;
　　　　　　}
　　　　}
　　　　childnode.SelectAction = TreeNodeSelectAction.None;
　　　　treenode.ChildNodes.Add(childnode);
　　　　ChildBind(childnode, childtempid);
　　}
}

　　在修改数据时，之前选中提交的数据的确已经勾选了，但是在子节点有项选中时，其父节点并没有控制不可选，在父节点有项选中时，也没有控制其子节点不可选，所以接下来还要控制子、父节点在页面加载时的可用性。

7、给TreeView控件外的标签添加id：（方便在TreeView控件转化成HTML代码后找到所有的input type="checkbox"多选按钮）

<tr>
　　<td style="border-width: 0px" id="prelist">
　　　　<asp:TreeView ID="tvTemp" runat="server" ShowCheckBoxes="All" ShowLines="True">
　　　　</asp:TreeView>
　　</td>
</tr>

8、在.aspx中添加JS代码：（需要加入jquery文件，这里用的是：jquery-1.8.2.min.js）

<script type="text/javascript">
　　$(function () {
　　　　var ckb = jQuery("#prelist input");
　　　　for (var i = 0; i < ckb.length; i++) {
　　　　　　if (ckb[i].checked == true) {
　　　　　　　　setParentUnChecked(ckb[i]); //设置父节点不可选（调用CheckEvent.js中的setParentUnChecked()方法）
　　　　　　　　var objID = ckb[i].getAttribute("ID");
　　　　　　　　var objID = objID.substring(0, objID.indexOf("CheckBox"));
　　　　　　　　var objParentDiv = document.getElementById(objID + "Nodes");
　　　　　　　　if (objParentDiv == null || objParentDiv == "undefined") {
　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　setChildUnChecked(objParentDiv); //设置子节点不可选（调用CheckEvent.js中的setChildUnChecked()方法）
　　　　　　}
　　　　}
　　});
</script>