本文章来给各位同学介绍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的位置
把以上配置中的
改为
网址全称
代码如下 |
|
http://localhost/webctrl_client/1_0
|