zoukankan      html  css  js  c++  java
  • 包含CheckBox的TreeView控件——父节点选中时其子节点不可选,子节点有项选中时其父节点不可选

    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" onclick="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- 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>
  • 相关阅读:
    转转帖.NET.GC 浅谈.net托管程序中的资源释放问题 (转帖)
    [转]来谈谈从专业到更专业
    [转]ASP.NET中多国语言的实现
    [转]内向的人如何建立人际网络
    SQL 入门 (代码)
    SQL 查询 (代码)
    关于学生信息处理小代码
    SQL 函数 (代码)
    SQL 链接 (代码)
    SQL 数据表的相关操作
  • 原文地址:https://www.cnblogs.com/ahhswyf/p/3459599.html
Copyright © 2011-2022 走看看