配合Ajaxpro读取无限父子关系部门使用javascript生成的树形目录
前台的js页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="displayDepartment.aspx.cs" Inherits="OASolution.Web.systemModule_displayDepartment" %>
<!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>
<style type="text/css">
<!--
body {
background-color: #D5DEE6;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/right_bg.jpg);
background-repeat:repeat-x;
}
-->
</style>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<script language=javascript type="text/javascript">
function init()//初始化
{
var obj = document.getElementById('div1');
getAll(obj,0);//0是父节点编号
}
function getAll(obj,e)//传入父容器，和父节点的编号
{
var ds = OASolution.Web.systemModule_displayDepartment.getAllChildDepartment(e).value;
if(ds !=null && ds.Tables[0] != null && ds.Tables[0].Rows.length != 0)
{
var tb = ds.Tables[0];
var length = tb.Rows.length;
if(length != 0)
{
for(var n = 0;n < length ; n++)
{
var divObj = document.createElement('div');
divObj.id =e + '_' + tb.Rows[n]['DepartmentID'];
// divObj.className = 'home_right';
divObj.innerHTML ='<hr style="color:#DAE1E9">' + createSpace(tb.Rows[n]['Grade'],tb.Rows[n]['DepartmentID']) +tb.Rows[n]['DepartmentName'] +'</a> <a href="editDepartment.aspx?departid='+tb.Rows[n]['DepartmentID']+'"><img border=0 alt="编辑" title="编辑" src="../images/edit.gif" /></a> ';
obj.appendChild(divObj);
if(tb.Rows[n]['Grade'] != 1)
{
divObj.style.display = 'none';
}
getAll(divObj,tb.Rows[n]['DepartmentID']);
}
}
}
{
return ;
}
}
function createSpace(grade,departID)//显示空格。传入级别和部门编号
{
var space = OASolution.Web.systemModule_displayDepartment.createLine(grade,departID).value;
return space;
}
function clickNode()//点击事件（要注意点击的元素对象）
{
changePic();
var aObj = event.srcElement;
var obj;
if(aObj.tagName == 'A')
{
obj = aObj.parentElement;
}
else if(aObj.tagName == 'IMG')
{
obj = aObj.parentElement.parentElement;
}
var parentID = obj.id;
var temp = parentID.lastIndexOf('_');
var tempParentID = parentID.substr(temp + 1);
var childObj = obj.getElementsByTagName('div');
var length = childObj.length;
if(length != 0)
{
for(var n = 0; n < length ;n++)
{
var childID = childObj[n].id;
var temp = childID.lastIndexOf('_');
var pID = childID.substr(0,temp);
if(tempParentID == pID )
{
if(childObj[n].style.display == 'none')
{
childObj[n].style.display = 'block';
}
else
{
for(var n = 0; n < length ;n++)
{
childObj[n].style.display = 'none';
}
changePicToPlus(childObj);
}
}
}
}
else
{
return ;
}
}
function changePic()//切换加减图片的显示注意点击的元素对象
{
var picObj;
var aObj = event.srcElement;
if(aObj.tagName == 'A')
{
picObj = aObj.getElementsByTagName('img');
if(picObj.length != 0)
{
var pic = picObj[0].src;
var temp = pic.lastIndexOf('/');
var picname = pic.substr(temp + 1);
if(picname == 'plus.gif')
{
picObj[0].src = '../images/minus.gif';
}
else
{
picObj[0].src = '../images/plus.gif';
}
}
}
else if(aObj.tagName == 'IMG')
{
picObj = aObj;
var pic = picObj.src;
var temp = pic.lastIndexOf('/');
var picname = pic.substr(temp + 1);
if(picname == 'plus.gif')
{
picObj.src = '../images/minus.gif';
}
else
{
picObj.src = '../images/plus.gif';
}
}
}
function changePicToPlus(divObj)//收缩的时候把所有子子节点的减号改为加号图片
{
if(divObj.length != 0)
{
for(var n = 0;n < divObj.length ; n++)
{
var picObj = divObj[n].getElementsByTagName('img');
if(picObj.length != 0)
{
var pic = picObj[0].src;
var temp = pic.lastIndexOf('/');
var picname = pic.substr(temp + 1);
picObj[0].src = '../images/plus.gif';
}
}
}
else
{
}
}
</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<table width="92%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" class="right_name" style="padding-top:15px; padding-left:10px; padding-bottom:5px"><img src="../images/name/name_fsxx.gif" width="35" height="35" align="absmiddle">
部门信息
</td>
<td class="font" style="padding-top:15px; padding-bottom:5px"><div align="right">
<a href=DepartMent.aspx><img border=0 src="../images/button/add.gif" width="83" height="24" /></a>
<a href="javascript:save()"><img src="../images/button/modify.gif" width="83" height="24" border=0></a>
</div></td>
</tr>
</table>
<table width="92%" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size: 12pt">
<tr>
<td height=400px class="table" align=left valign=top><div id="div1" style="font-size: 12px; color: #475A78; margin-left:20px; margin-top:20px;" align=left> </div></td>
</tr>
</table>
</form>
</body>
</html>
后台的cs代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
namespace OASolution.Web
{
public partial class systemModule_displayDepartment : PageBase
{
public OASolution.BLL.SystemModle SM = new OASolution.BLL.SystemModle();
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(systemModule_displayDepartment));
}
/// <summary>
/// 输入部门编号得到该部门的所以子部门
/// </summary>
/// <param name="parentID"></param>
//public void getAllChildDepartment(int parentID)
//{
// DataSet ds = SM.GetDepartMentList(parentID);
// if (ds.Tables[0].Rows.Count == 0 || ds.Tables[0] == null || ds == null)
// {
// return;
// }
// for (int n = 0; n < ds.Tables[0].Rows.Count; n++)
// {
// ListItem li = new ListItem();
// li.Value = ds.Tables[0].Rows[n][0].ToString();
// li.Text = createLine(int.Parse(ds.Tables[0].Rows[n][7].ToString().Trim())) + ds.Tables[0].Rows[n][3].ToString().Trim();
// this.ddlDepartMent.Items.Add(li);
// getAllChildDepartment(int.Parse(ds.Tables[0].Rows[n][0].ToString()));
// }
//}
/// <summary>
/// 生成父子部门的划线
/// </summary>
/// <param name="grade"></param>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string createLine(int grade,int departID)
{
string line = String.Empty;
int count = GetChildCount(departID);
if (grade == 1)
{
if (count == 0)
{
return " <a style='cursor:hand;' onclick='clickNode()' id='" + departID + "'>";
}
else
{
return " <a style='cursor:hand;' onclick='clickNode()' id='" + departID + "'><img src='../images/plus.gif' />";
}
}
else
{
for (int n = 1; n < grade; n++)
{
line += "<a color='#475A78'>--------</a>";
}
line += "<a style='cursor:hand;' onclick='clickNode()' id='" + departID + "'>";
}
if(count != 0)
{
line += "<img src='../images/plus.gif' />";
}
return line;
}
[AjaxPro.AjaxMethod]
public DataSet getAllChildDepartment(int parentID)
{
DataSet ds = SM.GetDepartMentList(parentID);
return ds;
}
[AjaxPro.AjaxMethod]
public DataSet GetChildDepartmentID(string departID)
{
DataSet ds = SM.GetChildDepartmenID(int.Parse(departID));
return ds;
}
[AjaxPro.AjaxMethod]
public int GetChildCount(int departID)
{
return SM.GetChildCount(departID);
}
}
}
本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。
