网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章来给各位同学介绍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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论