javascript中TreeView 无刷新展开程序代码

例1

 代码如下 复制代码

function public_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;
}
//设置节点的父节点Cheched——该节点可访问，则他的父节点也必能访问
function setParentChecked(objNode)
{ 
    var objParentDiv = public_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 = true;
    setParentChecked(objParentCheckBox);
}
//设置节点的子节点uncheched——该节点不可访问，则他的子节点也不能访问
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;
        }
        setChildUnChecked(tempObj); 
    }
}
//设置节点的子节点cheched——该节点可以访问，则他的子节点也都能访问
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.checked = true;
        }
        setChildChecked(tempObj); 
    }
}
//触发事件
function CheckEvent()
{
    var objNode = event.srcElement; 
    if(objNode.tagName!="INPUT" || objNode.type!="checkbox")
    return;
    if(objNode.checked==true)
    {
        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);
    }
    else
    {
        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);
    }
}

服务器端控件操作

this.tvPrivilege.Attributes.Add("OnClick", "CheckEvent()");  

例2

TreeView 控件无刷新

3、tree.aspx代码如下：
....................................................................................

 代码如下 复制代码
<%@ Page language="c#" Codebehind="createTree.aspx.cs" AutoEventWireup="false" Inherits="treeviewDemo.createTree" %>
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>createTree</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" runat="server" method="post">
   查询动态数据库信息，并分类显示。
   <ajax:AjaxPanel id="panel1" runat="server" Width="584px" Height="216px" style="Z-INDEX: 101; LEFT: 64px; POSITION: absolute; TOP: 56px">
    <iewc:TreeView id="TreeView1" runat="server" AutoPostBack="True" SelectExpands="True"></iewc:TreeView>
    <asp:TextBox id="tbNode" Runat="server"></asp:TextBox>
   </ajax:AjaxPanel>
  </form>
 </body>
</HTML>

.......................................................................................
4、*.cs代码如下：

 代码如下 复制代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using Microsoft.Web.UI.WebControls;
using MagicAjax;

namespace treeviewDemo
{
 /// <summary>
 /// createTree 的摘要说明。
 /// </summary>
 public class createTree : System.Web.UI.Page
 {
  protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
  protected SqlConnection myConn;
  protected SqlDataAdapter myAdapter;
  protected DataSet data;
  protected MagicAjax.UI.Controls.AjaxPanel Ajaxpanel1;
  protected System.Web.UI.WebControls.TextBox tbNode;
  protected MagicAjax.UI.Controls.AjaxPanel panel1;
  protected string query;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   if (!Page.IsPostBack)
   {
    string ConnStr = System.Configuration.ConfigurationSettings.AppSettings["connString"];
    myConn = new SqlConnection(ConnStr);
    CreateDataSet();
    InitTree(TreeView1.Nodes, "0");
   }
  
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
 
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.TreeView1.SelectedIndexChange += new Microsoft.Web.UI.WebControls.SelectEventHandler(this.TreeView1_SelectedIndexChange);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
  #region
  // 将数据库的内容存入DataSet做缓冲
  private DataSet CreateDataSet()
  {
   query = "SELECT * FROM TreeViewTable";
   myAdapter = new SqlDataAdapter(query, myConn);
   data = new DataSet();
   myAdapter.Fill(data, "tree");

   return data;
  }

  // 从DataSet中取数据建树
  // 从根节点开始递归调用显示子树
  private void InitTree(TreeNodeCollection Nds,string parentId)
  {
   TreeNode tmpNd;
   DataRow [] rows = data.Tables[0].Select("ParentId='" + parentId + "'");

   foreach(DataRow row in rows)
   {
    tmpNd = new TreeNode();
    tmpNd.ID = row["NodeId"].ToString();
    tmpNd.Text = row["NodeName"].ToString();
//    tmpNd.NavigateUrl = row["Url"].ToString();
    Nds.Add(tmpNd);
    InitTree(tmpNd.Nodes, tmpNd.ID);
   }
  }
  #endregion

  private void TreeView1_SelectedIndexChange(object sender, Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs e)
  {
   TreeNode tn = TreeView1.GetNodeFromIndex(e.NewNode);
   tbNode.Text = tn.Text;
  } }
}

....................................................................................
到目前为止，TreeView加载完毕！

5、运行后会发现一个问题：
**PostBack时会丧失树的效果；查看错误是无法访问 about:blank/webctrl_client/1_0/.htc
该问题解决如下：

在web.config里 添加

 代码如下 复制代码

<configSections>

<section name="MicrosoftWebControls" type="System.Configuration.NameValueSectionHandler, System, System.Configuration.NameValueSectionHandler, System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

</configSections>

<MicrosoftWebControls>

<add key="CommonFiles" value="/webctrl_client/1_0" />

</MicrosoftWebControls>

可以修改调用树的htc的位置

把以上配置中的

 代码如下 复制代码
/webctrl_client/1_0

改为
网址全称

 代码如下 复制代码
http://localhost/webctrl_client/1_0
时间： 2024-08-01 20:22:21

javascript中TreeView 无刷新展开程序代码的相关文章

javascript实现TreeView 无刷新展开的实例代码

这篇文章介绍了javascript实现TreeView 无刷新展开的实例代码,有需要的朋友可以参考一下   复制代码 代码如下: function public_GetParentByTagName(element, tagName)  {     var parent = element.parentNode;     var upperTagName = tagName.toUpperCase();     //如果这个元素还不是想要的tag就继续上溯     while (parent &

javascript实现TreeView 无刷新展开的实例代码_javascript技巧

复制代码 代码如下: function public_GetParentByTagName(element, tagName)  {     var parent = element.parentNode;     var upperTagName = tagName.toUpperCase();     //如果这个元素还不是想要的tag就继续上溯     while (parent && (parent.tagName.toUpperCase() != upperTagName)) 

Javascript+ASP打造无刷新新闻列表

javascript|刷新|无刷新 如上图所示的新闻列表在各大网站中并不少见,有了新闻列表就少不了分页,今天我们要谈的就是各分页间的切换方式.传统的方法是将页码以URL参数的形式传到列表页,列表页内程序根据传入的参数来显示不同的内容,这之间就有了一次刷新.然而很多时候页面中的新闻列表只占该页布局的一小部分,分了更新这小部分的内容却得刷新整个页面的内容,有人抗议了,于是之后就有人采用XMLHTTP.AJAX等技术来实现无刷新更新列表.今天我们也要实现无刷新更新列表,但不使用XMLHTTP.AJAX

如何在静态HTM页面中实现无刷新的更换CSS样式

     在静态HTM页面中实现无刷新的更换CSS样式!     系统原来的更换CSS模板是要重新刷新一下儿页面的,我一直都对这个功能很不满意,百分之九十五的功能都用AJAX无刷新的实现了,难道要在这个小小的更换页面CSS模板上给用户添点恶心吗?于是,昨天晚上好好考虑了这个功能上的实现,原来发现其实并不难,小改一下就OK了,现在系统上的模板更换是不用刷新页面来完成的,明显在感觉上比原来好得多了,下面谈谈经验吧:      对于一个多页面的网站来说了,CSS的更换不能只简单的在一个页面中调用更换C

Ajax实现无刷新分页实例代码

今天我们要用ajax做一个分页: 实现Ajax分页: 如果可以的话加上查询条件 找一张表做分页 分页不使用page类 页面不用刷新 Ajax加载数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.

PHP中ajax无刷新上传图片与图片下载功能

php ajax无刷新上传图片与图片下载功能的实现代码如下所示: <meta charset="utf-8" > <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p> 上传文件: <input type=

asp.net中Timer无刷新定时器的实现方法_实用技巧

 本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID=&quo

jquery + ajax +smarty+php 无刷新删除数据代码

jquery + ajax +smarty+php教程 无刷新删除数据代码 写个js:view sourceprint?01 02 function delItem (id) {  03 $.get('delete.php?id='+id,null,function (msg) {//ajax请求,请求后执行下面<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=%B4%FA%C2%EB">代码</S

jQuery基于ajax实现带动画效果无刷新柱状图投票代码_jquery

本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节.如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head>