js编写的treeview使用方法

2024-12-23 21:55:56

本文实例为大家分享了treeview使用方法，供大家参考，具体内容如下

1.所需文件：ftiens4.js,ua.js,XMLTree.js,以及一些树上的图片（文件下载处：http://www.treeview.net/），图片名字和位置如下图

2.其他页面（MainContent.aspx,NavTree.aspx）放置位置如下图所示:

3.关键页面的代码

3.1 MainContent.aspx代码

<%@ Page Language="C#" CodeFile="MainContent.aspx.cs" Inherits="mainContent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>北京市城市轨道交通设施运行状态监测系统</title>
  <link rel="Shortcut Icon" href="Resources/Images/iehead.ico" />
  <link rel="Bookmark" href="Resources/Images/iehead.ico" />
  <script type="text/javascript">
  function op()
  {
   // This function is for folders that do not open pages themselves.
   // See the online instructions for more information.
  }
 </script>
</head>
 <frameset cols="250,10,*" border="0" frameSpacing="0" frameBorder="no" id="tree_frm">
   <frame src="navTree.Aspx" name="treeframe" noResize>
   <frame src="treeControl.htm" name="ctr_frm" id="ctr_frm" noResize scrolling="no">
   <frame src="#" name="mainGisWindow" id="basefrm" noResize>
 </frameset>
</html>

3.2 NavTree.aspx代码

<%@ Page Language="C#" CodeFile="NavTree.aspx.cs" Inherits="navTree" %>

<html >
<head runat="server">
  <title>北京市城市轨道交通设施运行状态监测系统</title>

<script src="Resources/JS/Tree/ua.js" type="text/javascript" language="javascript"></script>
 <!-- Infrastructure code for the TreeView. DO NOT REMOVE.  -->

<script src="Resources/JS/Tree/ftiens4.js" type="text/javascript" language="javascript"></script>
 <!-- Scripts that define the tree. DO NOT REMOVE.      -->
<script src="Resources/JS/Tree/XMLTree.js" type="text/javascript" language="javascript"></script>
  <%
   //Common.Utility.WebUtility.validLoning(Session, Response);
   string fileName = null;
   //Bussiness.Login.User loginUser = (Bussiness.Login.User)Session["currentUser"];
   string departmentid = "";
   if (Session["navItem"] != null)
   {
     string item = (string)Session["navItem"];

     if (item.ToUpper().Equals("Safety".ToUpper()))
     {
       fileName = "'SafetyTree.xml'";
       //departmentid = loginUser.department.depId;
     }
     else if (item.ToUpper().Equals("Gis".ToUpper()))
     {
       fileName = "'GisTree.xml'";
     }
     else if (item.ToUpper().Equals("DataQuality".ToUpper()))
     {
       fileName = "'DataQualityTree.xml'";
     }
     else if (item.ToUpper().Equals("StateAnalysis".ToUpper()))
     {
       fileName = "'StateAnalysisTree.xml'";
     }
     else if (item.ToUpper().Equals("SynthesisTechnique".ToUpper()))
     {
       fileName = "'SynthesisTechniqueTree.xml'";
     }
     else if (item.ToUpper().Equals("DataMaintenance".ToUpper()))
     {
       fileName = "'DataMaintenanceTree.xml'";
     }
   }
   %>
<script type="text/javascript">
  var xmlfile = "Resources/XML/Tree/"+<%=fileName %>;
  departmentid= '<%=departmentid %>';
  ICONPATH = 'Resources/Images/tree/';
  contentFrame = window.parent.document.getElementByIdx_x_x("basefrm");
  loadTreeFromXml(xmlfile);
</script>
  <style>
  BODY
   {

    background-image:url(/ESM/Resources/Images/DapHangNew.jpg);
    background-repeat:repeat-x;
   }
  TD {
   font-size: 10pt;
   font-family: verdana,helvetica;
   text-decoration: none;
   white-space:nowrap;}
  A {
   text-decoration: none;
   color: black;

   }

  .specialClass {
   font-family:garamond;
   font-size:10pt;
   color:Black;
   font-weight:lighter;
   text-decoration:underline
   }
 </style>
</head>
<body topmargin="16" marginheight="16">
  <!------------------------------------------------------------->
 <!-- IMPORTANT NOTICE:                    -->
 <!-- Removing the following link will prevent this script  -->
 <!-- from working. Unless you purchase the registered    -->
 <!-- version of TreeView, you must include this link.    -->
 <!-- If you make any unauthorized changes to the following  -->
 <!-- code, you will violate the user agreement. If you want -->
 <!-- to remove the link, see the online FAQ for instructions -->
 <!-- on how to obtain a version without the link.      -->
 <!------------------------------------------------------------->

<!--下面的一定不能删，删了就会有问题-->
<DIV style="position:absolute; top:0; left:0; display:none;"><TABLE border=0><TR><TD><FONT size=-2><A style="font-size:7pt;text-decoration:none;color:silver" href="http://www.treemenu.net/" target=_blank>Javascript Tree Menu</A></FONT></TD></TR></TABLE></DIV>
 <!-- Build the browser's objects and display default view -->
 <!-- of the tree.                     -->
 <script>
 initializeDocument();
 </script>
</body>
</html>

3.3 treeControl.aspx代码（它的作用就是树和右边页面的分隔栏，可以隐藏树）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <script type="text/javascript" language="javascript">
    var LEFT_MENU_VIEW=1;
    function leftmenu_ctrl()
    {
     if(LEFT_MENU_VIEW==0)
     {
      parent.tree_frm.cols="250,10,*";
      LEFT_MENU_VIEW=1;
      myarrow.src="/ESM/Resources/Images/topleft.gif"; //左箭头
     }
     else
     {
      parent.tree_frm.cols="0,10,*";
      LEFT_MENU_VIEW=0;
      myarrow.src="/ESM/Resources/Images/topright.gif"; //右箭头
     }
    }
  </script>

</head>
<body style="background-color:#F1F8FC;">
  <div id="AdLayer" style="position:absolute;width:60px; height:21px; z-index:20;visibility:visible;left:0%; top:40%;">
    <div id="oa_tree" onclick="leftmenu_ctrl();" title="隐藏工具栏" style="cursor:pointer;"><img id="myarrow" src="/ESM/Resources/Images/topleft.gif" alt="" /></div>
  </div>
</body>
</html>

[over]

这样就成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript-TreeView父子联动效果保持节点状态一致

我们大部分都用过TreeView控件,对这个控件的评价也是各式各样的,但是我觉得不论如何它是一个免费的开源的控件,所以我还是在用它.在刚接触ASP.NET的时候,记得需要做一个分配权限的权限树,当时只知道有这个树,经过一天的研究对其服务器端的行为基本以及搞清楚了,但是由于当时的js水平有限,所以对客户端的代码很畏惧,基本没有看过. 当时有这样一个要求:如果一个节点被选中则该节点的所有子节点都要选中,如果该节点的所有子节点取消选择则该节点也要取消选择(节点一致性),相反一样. 还有一个要求就是:如
动态加载dtree.js树treeview(示例代码)

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Destroydrop » Javascripts » Tree</title><link rel="StyleSh
选择TreeView控件的树状数据节点的JS方法(jquery)

方法要达到的效果是:" 改变一节点的选中状态时,其后代节点选中状态也要跟随当前节点的选中状态改变而改变.当前节点选中时,其所有祖先节点也要跟着选中;如取消时,要根据其同级节点是否有选中时,来决定其祖先节点的选中状态." 说明:树是用vs的TreeView控件生成的. 如图: 代码如下: 复制代码代码如下: jQuery(function(){ jQuery(":checkbox").click(function(){ var objNode = this; var
用js脚本控制asp.net下treeview的NodeCheck的实现代码

增加CheckBox联动的情况选择: 1.单选TreeView中的任一节点 2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变; 父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true. 3.当一节点CheckBox属性值改变时:子节点.父节点的CheckBox属性值跟随其改动; 父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的Chec
Bootstrap树形菜单插件TreeView.js使用方法详解

jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.
JS控制TreeView的结点选择

网上有很多控制TreeView的checkbox选中,但是自己尝试的时候,要么报错,要么不可行.以下这种写法是经过验证有效的,仅作参考,思维比较巧妙! Tree: <asp:TreeView ID="treeViewDapartment" runat="server" SelectedNodeStyle-BackColor="GrayText" onclick="javascript:NodeCheck();" Font
Javascript 实现TreeView CheckBox全选效果

复制代码代码如下: function OnTreeNodeChecked() { var ele = event.srcElement; if (ele.type == 'checkbox') { var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); var div = document.getElementById(childrenDivID); if (div != null) { var checkBoxs = div.getE
js获取Treeview选中的节点(C#选中CheckBox项)

方法网上有很多,试了一下都有瑕疵.最后找了个看上去代码比较少,比较顺眼的,测试结果报错说有几个函数不存在,于是设置断点调试,各个属性查找有用的字段,终于找到. 现整理如下: 首先,要想在javascript中获取treeview中带checkbox的节点,需要设置treeview节点的某些属性,我是在后台代码中添加的. 复制代码代码如下: TreeNode newNode = new TreeNode(); newNode.Text = "showText"; newNode.Val
JS控件ASP.NET的treeview控件全选或者取消(示例代码)

复制代码代码如下: <script language="javascript"> /* 函数名称:CheckNode(currentNode).ParentNode(currentNode).ChildNode(currentNode) 函数功能:实现带checkbox的treeview中 1.选中父结点其子结点也全部选中 2.取消全部子结点的选择后,父结点的选择也随之取消使用方法:1.在<head></head>中间添加Chec
js获取TreeView控件选中节点的Text和Value值的方法

在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,TreeView控件的数据绑定在我的上一篇随笔(TreeView绑定XML数据源C#代码示例)中有讲到,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口. 首先,在后台代码中为TreeView添加属性onclick以支持TreeView的客户端事件,代码如下: 复制代码代码如下: if (!IsPostBack) { TreeView1.Attributes.

js编写的treeview使用方法

相关推荐

随机推荐