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>