javascript控制treeview

最新推荐文章于 2023-11-11 18:25:30 发布

snjdju

最新推荐文章于 2023-11-11 18:25:30 发布

阅读量3k

点赞数

文章标签： javascript asp server function input button

1.设置所选节点，如选中第二个节点
function SetSelNode()
{
TreeView1.selectedNodeIndex="1";
}

2.得到所选节点的Text，ID或NodeData
function GetAttribute()
{
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替换Text为ID或NodeData，可分别得到所选节点的ID或NodeData

3.修改节点属性，如修改第一个节点的Text
function ModifyNode()
{
var node=TreeView1.getTreeNode("0");
node.setAttribute("Text","hgknight");
}

4.得到点击节点
function TreeView1.onclick()
{
alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}

5.添加节点
function AddNode()
{
var node=TreeView1.createTreeNode();
node.setAttribute("Text","hgknight");
TreeView1.add(node);
}

怎样用脚本语言javascript获得treeview(vs2005)中选定节点叶子的所有值,并且不刷新页面

----------------------------------------------------------------------

可以参考下面的执行。下面的文件直接存成tree.aspx，可以运行，看效果

<%@ Page Language="C#" %>
<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
    TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)");
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
    if (Request.Form["CheckedNode"] != null)
    {
      string CheckedNodeValue = Request.Form["CheckedNode"];
      if (CheckedNodeValue == "")
        return;

      if (CheckedNodeValue.EndsWith(","))
        CheckedNodeValue = CheckedNodeValue.TrimEnd(',');

      Response.Write("您选择的节点有："+CheckedNodeValue);
    }
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>客户端实现全选子节点</title>
  <script type="text/javascript" language="javascript">
  //识别不同的浏览器
  function getTargetElement(evt) {
    var elem
    if (evt.target)
    {
      elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
    }
    else
    {
      elem = evt.srcElement
    }
    return elem
  }

  function OnClientTreeNodeChecked(evt)
  {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    if(evt == "")
    {
      return;
    }
    var obj = getTargetElement(evt);
    var hasTreeNode = false;
    if(obj.tagName)
    {
      if (obj.tagName == "INPUT" && obj.type == "checkbox") {
        var treeNode = obj;
        while (obj.tagName != "TABLE")
        {
          obj = obj.parentNode;
        }
        var parentTreeDeep = obj.rows[0].cells.length;
        var parentTreeNode = obj.rows[0].cells[0];
        var oDiv = obj.parentNode;
        if( null == oDiv )
        {
          return;
        }
        if( 1 != oDiv.nodeType)
        {
          return;
        }
        var tables = oDiv.getElementsByTagName("TABLE");
        if( null == tables)
        {
          return;
        }
        var tableCount = tables.length;
        if(tableCount < 1)
        {
          return;
        }
        for (i = 0; i < tableCount; i++)
        {
          if ( obj == tables[i] )
          {
            hasTreeNode = true;
            i++;
            if (tableCount == i )
            {
              return;
            }
          }
          if (hasTreeNode)
          {
            var childTreeDeep = tables[i].rows[0].cells.length;
            if (childTreeDeep > parentTreeDeep)
            {
              var cellTreeNode = tables[i].rows[0].cells[childTreeDeep - 1];
              var inputs = cellTreeNode.getElementsByTagName("INPUT");
              if( null != inputs)
              {
                inputs[0].checked = treeNode.checked;
              }
            }
            else
            {
              return;
            }
          }
        }
      }
    }
  }
  function ShowCheckbox()
  {
    var TreeView = "<%=TreeView1.ClientID %>"
    var checkNode = document.getElementById("CheckedNode")
    var checkboxs = document.getElementById(TreeView).getElementsByTagName("INPUT")
    for(i=0;i<checkboxs.length;i++)
    {
      if(checkboxs[i].type == "checkbox"
        &&  checkboxs[i].name.substr(0,TreeView.length) == TreeView
        && checkboxs[i].checked )
      {
        checkNode.value += checkboxs[i].title + ","
      }
    }
  }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:TreeView ID="TreeView1" runat="server" ShowLines="true"
      ShowCheckBoxes="All">
      <Nodes>
        <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand">
          <asp:TreeNode Text="ASP.NET技术">
            <asp:TreeNode Text="缓存管理"/>
            <asp:TreeNode Text="状态管理" />
            <asp:TreeNode Text="导航控件">
              <asp:TreeNode Text="Menu 服务器控件" />
              <asp:TreeNode Text="SiteMapPath 服务器控件" />
            </asp:TreeNode>
          </asp:TreeNode>
          <asp:TreeNode Text="C#技术" />
        </asp:TreeNode>
        <asp:TreeNode Text="【孟子E章】站点二" />
        <asp:TreeNode Text="【孟子E章】站点三">
          <asp:TreeNode Text="Web开发技术" />
          <asp:TreeNode Text="Web脚本库" />
        </asp:TreeNode>
      </Nodes>
    </asp:TreeView>
    <input type="hidden" name="CheckedNode"  id="CheckedNode"/>
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
      OnClientClick="ShowCheckbox()" Text="提交" />
  </form>
</body>
</html>

snjdju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript控制treeview

<br />1.设置所选节点，如选中第二个节点<br />function SetSelNode()<br />{<br /> TreeView1.selectedNodeIndex="1";<br />} <br />2.得到所选节点的Text，ID或NodeData<br />function GetAttribute()<br />{<br /> alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"))
复制链接

扫一扫