以下是 jquery下拉列表树插件代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<TITLE>jquery��������������</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<link rel="stylesheet" type="text/css" href="dtreeck.css">
<SCRIPT language="Javascript" type="text/javascript" src="dtreeck.js"></SCRIPT>
<SCRIPT language="Javascript" type="text/javascript" src="jquery.js"></SCRIPT>
<style type="text/css">
body,td,th {
font-size: 12px;
}
</style>
<style type="text/css">
a:link {
font-family: "����";
font-size: 12px;
color: #0000FF;
text-decoration: none;
}
a:visited {
font-family: "����";
font-size: 12px;
color: #0000FF;
text-decoration: none;
}
a:hover {
font-family: "����";
font-size: 12px;
color: #CC6600;
text-decoration: none;
}
a:active {
font-family: "����";
font-size: 12px;
color: #006600;
text-decoration: none;
}
</style>
</HEAD>
<body topmargin="0" leftmargin="0" >
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" bgcolor="#FFFFFF" valign="top" width="35%" style="padding-left: 30px;">
</td>
<td bgcolor="#FFFFFF" valign="top" height="65%" align="left">
<form method="post" id="regform">
<table width="70%" cellpadding="1" cellspacing="0" border="0" style="margin-top: 10px;">
<tr>
<td width="20%" align="right">�� �� ���� </td>
<td width="30%" align="left">
<input type="text" id="menu_parent_name" style="width: 150px;">
<input type="hidden" id="menu_parent" name="menu_parent"><!-- ���˵�id -->
<input type="hidden" id="oprate" name="oprate"><!-- radio -->
<input type="hidden" id="menu_id" name="menu_id"><!-- ���˵�id -->
</td>
<td width="20%" align="right"></td>
<td width="30%" align="left">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<div id="treediv" style="display: none;position:absolute;overflow:scroll; width: 150px;height:200px; padding: 5px;background: #fff;color: #fff;border: 1px solid #cccccc" >
<div align="right"><a href="##" id="closed"><font color="#000">�ر� </font></a></div>
<script language="JavaScript" type="text/JavaScript">
//������
mydtree = new dTree('mydtree','imgmenu/','no','no');
mydtree.add(0,
-1,
"��Ŀ¼",
"javascript:setvalue('0','��Ŀ¼')",
"��Ŀ¼",
"_self",
false);
mydtree.add(37,
0,
'PDA��Ϣ����',
"javascript:setvalue('37','PDA��Ϣ����')",
'PDA��Ϣ����',
'_self',
false);
mydtree.add(40,
0,
'���ɷ������',
"javascript:setvalue('40','���ɷ������')",
'���ɷ������',
'_self',
false);
mydtree.add(44,
0,
'������Ϣ����',
"javascript:setvalue('44','������Ϣ����')",
'������Ϣ����',
'_self',
false);
mydtree.add(47,
0,
'�����ල',
"javascript:setvalue('47','�����ල')",
'�����ල',
'_self',
false);
mydtree.add(50,
0,
'��ͼ',
"javascript:setvalue('50','��ͼ')",
'��ͼ',
'_self',
false);
mydtree.add(66,
0,
'��Ϣ��ѯ',
"javascript:setvalue('66','��Ϣ��ѯ')",
'��Ϣ��ѯ',
'_self',
false);
mydtree.add(73,
0,
'�����ּ�����',
"javascript:setvalue('73','�����ּ�����')",
'�����ּ�����',
'_self',
false);
mydtree.add(80,
0,
'ר�ҿ����',
"javascript:setvalue('80','ר�ҿ����')",
'ר�ҿ����',
'_self',
false);
mydtree.add(92,
0,
'����֪ͨ��Ϣ',
"javascript:setvalue('92','����֪ͨ��Ϣ')",
'����֪ͨ��Ϣ',
'_self',
false);
mydtree.add(94,
0,
'ͳ�Ʊ���',
"javascript:setvalue('94','ͳ�Ʊ���')",
'ͳ�Ʊ���',
'_self',
false);
mydtree.add(84,
0,
'�������',
"javascript:setvalue('84','�������')",
'�������',
'_self',
false);
mydtree.add(89,
0,
'���ڹ���',
"javascript:setvalue('89','���ڹ���')",
'���ڹ���',
'_self',
false);
mydtree.add(96,
0,
'��������',
"javascript:setvalue('96','��������')",
'��������',
'_self',
false);
mydtree.add(103,
0,
'Ԥ����Ϣ',
"javascript:setvalue('103','Ԥ����Ϣ')",
'Ԥ����Ϣ',
'_self',
false);
mydtree.add(110,
0,
'������ͳ��',
"javascript:setvalue('110','������ͳ��')",
'������ͳ��',
'_self',
false);
mydtree.add(1,
0,
'ϵͳ����',
"javascript:setvalue('1','ϵͳ����')",
'ϵͳ����',
'_self',
false);
mydtree.add(2,
1,
'��ɫ����',
"javascript:setvalue('2','��ɫ����')",
'��ɫ����',
'_self',
false);
mydtree.add(3,
1,
'Ȩ����',
"javascript:setvalue('3','Ȩ����')",
'Ȩ����',
'_self',
false);
mydtree.add(4,
1,
'�˵�����',
"javascript:setvalue('4','�˵�����')",
'�˵�����',
'_self',
false);
mydtree.add(5,
1,
'���Ź���',
"javascript:setvalue('5','���Ź���')",
'���Ź���',
'_self',
false);
mydtree.add(28,
1,
'�����ֵ����',
"javascript:setvalue('28','�����ֵ����')",
'�����ֵ����',
'_self',
false);
mydtree.add(29,
1,
'��֯��Ա����',
"javascript:setvalue('29','��֯��Ա����')",
'��֯��Ա����',
'_self',
false);
mydtree.add(30,
1,
'��Ա����',
"javascript:setvalue('30','��Ա����')",
'��Ա����',
'_self',
false);
mydtree.add(152,
1,
'���֤��Ϣά��',
"javascript:setvalue('152','���֤��Ϣά��')",
'���֤��Ϣά��',
'_self',
false);
mydtree.add(39,
37,
'֪ͨͨ��',
"javascript:setvalue('39','֪ͨͨ��')",
'֪ͨͨ��',
'_self',
false);
mydtree.add(86,
37,
'��Ϣ����',
"javascript:setvalue('86','��Ϣ����')",
'��Ϣ����',
'_self',
false);
mydtree.add(88,
37,
'Ӧ��Ԥ��',
"javascript:setvalue('88','Ӧ��Ԥ��')",
'Ӧ��Ԥ��',
'_self',
false);
mydtree.add(41,
40,
'���ɷ������',
"javascript:setvalue('41','���ɷ������')",
'���ɷ������',
'_self',
false);
mydtree.add(42,
40,
'���ɷ���鿴',
"javascript:setvalue('42','���ɷ���鿴')",
'���ɷ���鿴',
'_self',
false);
mydtree.add(45,
44,
'�����Ŀ����',
"javascript:setvalue('45','�����Ŀ����')",
'�����Ŀ����',
'_self',
false);
mydtree.add(49,
44,
'���ල��λ����',
"javascript:setvalue('49','���ල��λ����')",
'���ල��λ����',
'_self',
false);
mydtree.add(62,
44,
'���������',
"javascript:setvalue('62','���������')",
'���������',
'_self',
false);
mydtree.add(63,
44,
'��λС������',
"javascript:setvalue('63','��λС������')",
'��λС������',
'_self',
false);
mydtree.add(64,
44,
'���������',
"javascript:setvalue('64','���������')",
'���������',
'_self',
false);
mydtree.add(65,
44,
'��������',
"javascript:setvalue('65','��������')",
'��������',
'_self',
false);
mydtree.add(48,
47,
'Ѳ��ල',
"javascript:setvalue('48','Ѳ��ල')",
'Ѳ��ල',
'_self',
false);
mydtree.add(82,
47,
'�ල��¼',
"javascript:setvalue('82','�ල��¼')",
'�ල��¼',
'_self',
false);
mydtree.add(83,
47,
'��λ��Ϣ��ѯ',
"javascript:setvalue('83','��λ��Ϣ��ѯ')",
'��λ��Ϣ��ѯ',
'_self',
false);
mydtree.add(51,
50,
'��ͼ����',
"javascript:setvalue('51','��ͼ����')",
'��ͼ����',
'_self',
false);
mydtree.add(67,
66,
'ִҵҽʦ��ѯ',
"javascript:setvalue('67','ִҵҽʦ��ѯ')",
'ִҵҽʦ��ѯ',
'_self',
false);
mydtree.add(74,
73,
'�����ּ�����',
"javascript:setvalue('74','�����ּ�����')",
'�����ּ�����',
'_self',
false);
mydtree.add(81,
80,
'ר�ҿ����',
"javascript:setvalue('81','ר�ҿ����')",
'ר�ҿ����',
'_self',
false);
mydtree.add(85,
84,
'�Ƴ���������',
"javascript:setvalue('85','�Ƴ���������')",
'�Ƴ���������',
'_self',
false);
mydtree.add(100,
84,
'��Ա����',
"javascript:setvalue('100','��Ա����')",
'��Ա����',
'_self',
false);
mydtree.add(101,
84,
'�����鿴�Ƴ�����',
"javascript:setvalue('101','�����鿴�Ƴ�����')",
'�����鿴�Ƴ�����',
'_self',
false);
mydtree.add(90,
89,
'�ҵĿ��ڼ�¼',
"javascript:setvalue('90','�ҵĿ��ڼ�¼')",
'�ҵĿ��ڼ�¼',
'_self',
false);
mydtree.add(91,
89,
'���ڼ�¼����',
"javascript:setvalue('91','���ڼ�¼����')",
'���ڼ�¼����',
'_self',
false);
mydtree.add(93,
92,
'����֪ͨ��Ϣ����',
"javascript:setvalue('93','����֪ͨ��Ϣ����')",
'����֪ͨ��Ϣ����',
'_self',
false);
mydtree.add(95,
94,
'ͳ�Ʊ���¼��',
"javascript:setvalue('95','ͳ�Ʊ���¼��')",
'ͳ�Ʊ���¼��',
'_self',
false);
mydtree.add(102,
94,
'ͳ�Ʊ���鿴',
"javascript:setvalue('102','ͳ�Ʊ���鿴')",
'ͳ�Ʊ���鿴',
'_self',
false);
mydtree.add(105,
94,
'����鿴',
"javascript:setvalue('105','����鿴')",
'����鿴',
'_self',
false);
mydtree.add(106,
94,
'�ܹ�����ͳ��(������)',
"javascript:setvalue('106','�ܹ�����ͳ��(������)')",
'�ܹ�����ͳ��(������)',
'_self',
false);
mydtree.add(109,
94,
'�ܹ�����ͳ��(Υ���ۼ�)',
"javascript:setvalue('109','�ܹ�����ͳ��(Υ���ۼ�)')",
'�ܹ�����ͳ��(Υ���ۼ�)',
'_self',
false);
mydtree.add(97,
96,
'������������',
"javascript:setvalue('97','������������')",
'������������',
'_self',
false);
mydtree.add(99,
96,
'������������ͳ��',
"javascript:setvalue('99','������������ͳ��')",
'������������ͳ��',
'_self',
false);
mydtree.add(104,
103,
'Ԥ����֤��6����',
"javascript:setvalue('104','Ԥ����֤��6����')",
'Ԥ����֤��6����',
'_self',
false);
mydtree.add(107,
103,
'Ԥ�����֤�ѹ���',
"javascript:setvalue('107','Ԥ�����֤�ѹ���')",
'Ԥ�����֤�ѹ���',
'_self',
false);
mydtree.add(108,
103,
'Ԥ�����֤��������',
"javascript:setvalue('108','Ԥ�����֤��������')",
'Ԥ�����֤��������',
'_self',
false);
mydtree.add(111,
110,
'�ܹ�����ͳ��',
"javascript:setvalue('111','�ܹ�����ͳ��')",
'�ܹ�����ͳ��',
'_self',
false);
mydtree.add(112,
110,
'�¹�����ͳ��',
"javascript:setvalue('112','�¹�����ͳ��')",
'�¹�����ͳ��',
'_self',
false);
mydtree.add(115,
114,
'�����¶���',
"javascript:setvalue('115','�����¶���')",
'�����¶���',
'_self',
false);
mydtree.add(151,
150,
'���֤��Ϣά��',
"javascript:setvalue('151','���֤��Ϣά��')",
'���֤��Ϣά��',
'_self',
false);
document.write(mydtree);
</script>
</div>
<script type="text/javascript">
//���ɵ�����Ĵ���
xOffset = 0;//����ƫ����
yOffset = 25;//����ƫ����
var toshow = "treediv";//Ҫ��ʾ�IJ��id
var target = "menu_parent_name";//Ŀ��ؼ�----Ҳ������Ҫ��������β˵����Ǹ��ؼ�id
$("#"+target).click(function (){
$("#"+toshow)
.css("position", "absolute")
.css("left", $("#"+target).position().left+xOffset + "px")
.css("top", $("#"+target).position().top+yOffset +"px").show();
});
//�رղ�
$("#closed").click(function(){
$("#"+toshow).hide();
});
//�ж�����ڲ��ڵ����㷶Χ��
function checkIn(id){
var yy = 20; //ƫ����
var str = "";
var x=window.event.clientX;
var y=window.event.clientY;
var obj=$("#"+id)[0];
if(x>obj.offsetLeft&&x<(obj.offsetLeft+obj.clientWidth)&&y>(obj.offsetTop-yy)&&y<(obj.offsetTop+obj.clientHeight)){
return true;
}else{
return false;
}
}
//���body�رյ�����
$(document).click(function(){
var is = checkIn("treediv");
if(!is){
$("#"+toshow).hide();
}
});
//���ɵ�����Ĵ���
//����˵������ı���ֵ------------------�˵�����Ӵ˷���
function setvalue(id,name){
$("#menu_parent_name").val(name);
$("#menu_parent").val(id);
$("#treediv").hide();
}
</script>
</body>
</html>
JS代码(dtreeck.js):
function Node(id,pid,name,url,title,target,checked,icon,iconOpen,open ){
this.id = id;
this.pid = pid;
this.name = name;
this.url = url;
this.title = title;
this.target = target;
this.icon = icon;
this.iconOpen = iconOpen;
this._io = open || false;
this._is = false;
this._ls = false;
this._hc = false;
this._ai = 0;
this._p;
this._checked = checked || false;
}
;
// Tree objectfunction dTree(objName,filepath,showBoxLevel,showBoxOnlyLeaf){
this.config ={
target:null,folderLinks:true,useSelection:true,useCookies:true,useLines:true,useIcons:true,useStatusText:false,closeSameLevel:false,inOrder:false,check:true}
this.filePath=filepath;
this.showBoxLevel = showBoxLevel;
this.showBoxOnlyLeaf = showBoxOnlyLeaf;
this.icon ={
root:this.filePath+'base.gif',folder:this.filePath+'folder.gif',folderOpen:this.filePath+'folderopen.gif',node:this.filePath+'page.gif',empty:this.filePath+'empty.gif',line:this.filePath+'line.gif',join:this.filePath+'join.gif',joinBottom:this.filePath+'joinbottom.gif',plus:this.filePath+'plus.gif',plusBottom:this.filePath+'plusbottom.gif',minus:this.filePath+'minus.gif',minusBottom:this.filePath+'minusbottom.gif',nlPlus:this.filePath+'nolines_plus.gif',nlMinus:this.filePath+'nolines_minus.gif'}
;
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
}
;
// Adds a new node to the node arraydTree.prototype.add = function(id,pid,name,url,title,target,icon,iconOpen,open){
this.aNodes[this.aNodes.length] = new Node(id,pid,name,url,title,target,icon,iconOpen,open);
}
;
// Open/close all nodesdTree.prototype.openAll = function(){
this.oAll(true);
}
;
dTree.prototype.closeAll = function(){
this.oAll(false);
}
;
// Outputs the tree to the pagedTree.prototype.toString = function(){
var str = '<div class="dtree">\n';
if (document.getElementById){
if (this.config.useCookies)this.selectedNode = this.getSelected();
str += this.addNode(this.root);
}
elsestr += 'Browser not supported.';
str += '</div>';
if (!this.selectedFound) this.selectedNode = null;
this.completed = true;
return str;
}
;
// Creates the tree structuredTree.prototype.addNode = function(pNode){
var str = '';
var n=0;
if (this.config.inOrder) n = pNode._ai;
for (n;
n<this.aNodes.length;
n++){
if (this.aNodes[n].pid == pNode.id){
var cn = this.aNodes[n];
cn._p = pNode;
cn._ai = n;
this.setCS(cn);
if (!cn.target && this.config.target) cn.target = this.config.target;
if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);
if (!this.config.folderLinks && cn._hc) cn.url = null;
if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound){
cn._is = true;
this.selectedNode = n;
this.selectedFound = true;
}
str += this.node(cn,n);
if (cn._ls) break;
}
}
return str;
}
;
// Creates the node icon,url and textdTree.prototype.node = function(node,nodeId){
var str = '<div class="dTreeNode">' + this.indent(node,nodeId);
if (this.config.check){
if((this.showBoxLevel!='no')&&(this.getNodeLevel(nodeId)>this.showBoxLevel||!node._hc)){
//���ϲ㼶Ҫ�����ʾcheckboxif(node._checked){
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')" checked/>';
}
else{
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
}
}
if((this.showBoxOnlyLeaf!='no')&&(this.showBoxOnlyLeaf=='leaf'&&!node._hc)){
//leafֻ��Ҷ�ӽڵ���ʾcheckbox,all����ʾif(node._checked){
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')" checked/>';
}
else{
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
}
//alert(str);
}
if((this.showBoxOnlyLeaf!='no')&&(this.showBoxOnlyLeaf=='all')){
//leafֻ��Ҷ�ӽڵ���ʾcheckbox,all����ʾif(node._checked){
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')" checked/>';
}
else{
str+= '<input type="checkbox" name="'+node.id+'" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
}
}
}
if (this.config.useIcons){
if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root:((node._hc) ? this.icon.folder:this.icon.node);
if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen:this.icon.node;
if (this.root.id == node.pid){
node.icon = this.icon.root;
node.iconOpen = this.icon.root;
}
str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen:node.icon) + '" alt="" />';
}
if (node.url){
str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel':'node')):'node') + '" href="' + node.url + '"';
if (node.title) str += ' title="' + node.title + '"';
if (node.target) str += ' target="' + node.target + '"';
if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';
return true;
" onmouseout="window.status=\'\';
return true;
" ';
if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))str += ' onclick="javascript:' + this.obj + '.s(' + nodeId + ');
"';
str += '>';
}
else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)str += '<a href="javascript:' + this.obj + '.o(' + nodeId + ');
" class="node">';
str += node.name;
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
str += '</div>';
if (node._hc){
str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block':'none') + ';
">';
str += this.addNode(node);
str += '</div>';
}
this.aIndent.pop();
return str;
}
;
// Adds the empty and line iconsdTree.prototype.indent = function(node,nodeId){
var str = '';
if (this.root.id != node.pid){
for (var n=0;
n<this.aIndent.length;
n++)str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line:this.icon.empty ) + '" alt="" />';
(node._ls) ? this.aIndent.push(0):this.aIndent.push(1);
if (node._hc){
str += '<a href="javascript:' + this.obj + '.o(' + nodeId + ');
"><img id="j' + this.obj + nodeId + '" src="';
if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus:this.icon.nlPlus;
else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom:this.icon.minus):((node._ls && this.config.useLines) ? this.icon.plusBottom:this.icon.plus ) );
str += '" alt="" /></a>';
}
else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom:this.icon.join ):this.icon.empty) + '" alt="" />';
}
return str;
}
;
// Checks if a node has any children and if it is the last siblingdTree.prototype.setCS = function(node){
var lastId;
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n].pid == node.id) node._hc = true;
if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;
}
if (lastId==node.id) node._ls = true;
}
;
// Returns the selected nodedTree.prototype.getSelected = function(){
var sn = this.getCookie('cs' + this.obj);
return (sn) ? sn:null;
}
;
// Highlights the selected nodedTree.prototype.s = function(id){
if (!this.config.useSelection) return;
var cn = this.aNodes[id];
if (cn._hc && !this.config.folderLinks) return;
if (this.selectedNode != id){
if (this.selectedNode || this.selectedNode==0){
eOld = document.getElementById("s" + this.obj + this.selectedNode);
eOld.className = "node";
}
eNew = document.getElementById("s" + this.obj + id);
eNew.className = "nodeSel";
this.selectedNode = id;
if (this.config.useCookies) this.setCookie('cs' + this.obj,cn.id);
}
}
;
// Toggle Open or closedTree.prototype.o = function(id){
var cn = this.aNodes[id];
this.nodeStatus(!cn._io,id,cn._ls);
cn._io = !cn._io;
if (this.config.closeSameLevel) this.closeLevel(cn);
if (this.config.useCookies) this.updateCookie();
}
;
// Open or close all nodesdTree.prototype.oAll = function(status){
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id){
this.nodeStatus(status,n,this.aNodes[n]._ls)this.aNodes[n]._io = status;
}
}
if (this.config.useCookies) this.updateCookie();
}
;
// Opens the tree to a specific nodedTree.prototype.openTo = function(nId,bSelect,bFirst){
if (!bFirst){
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n].id == nId){
nId=n;
break;
}
}
}
var cn=this.aNodes[nId];
if (cn.pid==this.root.id || !cn._p) return;
cn._io = true;
cn._is = bSelect;
if (this.completed && cn._hc) this.nodeStatus(true,cn._ai,cn._ls);
if (this.completed && bSelect) this.s(cn._ai);
else if (bSelect) this._sn=cn._ai;
this.openTo(cn._p._ai,false,true);
}
;
// Closes all nodes on the same level as certain nodedTree.prototype.closeLevel = function(node){
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc){
this.nodeStatus(false,n,this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
// Closes all children of a nodedTree.prototype.closeAllChildren = function(node){
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc){
if (this.aNodes[n]._io) this.nodeStatus(false,n,this.aNodes[n]._ls);
this.aNodes[n]._io = false;
this.closeAllChildren(this.aNodes[n]);
}
}
}
// Change the status of a node(open or closed)dTree.prototype.nodeStatus = function(status,id,bottom){
eDiv= document.getElementById('d' + this.obj + id);
eJoin= document.getElementById('j' + this.obj + id);
if (this.config.useIcons){
eIcon= document.getElementById('i' + this.obj + id);
eIcon.src = (status) ? this.aNodes[id].iconOpen:this.aNodes[id].icon;
}
eJoin.src = (this.config.useLines)?((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):((status)?this.icon.nlMinus:this.icon.nlPlus);
eDiv.style.display = (status) ? 'block':'none';
}
;
// [Cookie] Clears a cookiedTree.prototype.clearCookie = function(){
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie('co'+this.obj,'cookieValue',yesterday);
this.setCookie('cs'+this.obj,'cookieValue',yesterday);
}
;
// [Cookie] Sets value in a cookiedTree.prototype.setCookie = function(cookieName,cookieValue,expires,path,domain,secure){
document.cookie =escape(cookieName) + '=' + escape(cookieValue)+ (expires ? ';
expires=' + expires.toGMTString():'')+ (path ? ';
path=' + path:'')+ (domain ? ';
domain=' + domain:'')+ (secure ? ';
secure':'');
}
;
// [Cookie] Gets a value from a cookiedTree.prototype.getCookie = function(cookieName){
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1){
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';
',posValue);
if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue,endPos));
else cookieValue = unescape(document.cookie.substring(posValue));
}
return (cookieValue);
}
;
// [Cookie] Returns ids of open nodes as a stringdTree.prototype.updateCookie = function(){
var str = '';
for (var n=0;
n<this.aNodes.length;
n++){
if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id){
if (str) str += '.';
str += this.aNodes[n].id;
}
}
this.setCookie('co' + this.obj,str);
}
;
// [Cookie] Checks if a node id is in a cookiedTree.prototype.isOpen = function(id){
var aOpen = this.getCookie('co' + this.obj).split('.');
for (var n=0;
n<aOpen.length;
n++)if (aOpen[n] == id) return true;
return false;
}
;
//Click the CheckBox,check it's Father Node and Child nodes.dTree.prototype.cc=function(nodeId){
var cs = document.getElementById("c"+this.obj+nodeId).checked;
var n,node = this.aNodes[nodeId];
var len = this.aNodes.length;
for (n=0;
n<len;
n++){
if (this.aNodes[n].pid == node.id){
document.getElementById("c"+this.obj+n).checked=cs;
this.cc(n);
}
}
if(cs==false)return;
var pid=node.pid;
var bSearch;
do{
bSearch=false;
for(n=0;
n<len;
n++){
if(this.aNodes[n].id==pid){
document.getElementById("c"+this.obj+n).checked=true;
pid=this.aNodes[n].pid;
bSearch= true;
break;
}
}
}
while(bSearch==true);
}
// If Push and pop is not implemented by the browserif (!Array.prototype.push){
Array.prototype.push = function array_push(){
for(var i=0;
i<arguments.length;
i++)this[this.length]=arguments[i];
return this.length;
}
}
;
if (!Array.prototype.pop){
Array.prototype.pop = function array_pop(){
lastElement = this[this.length-1];
this.length = Math.max(this.length-1,0);
return lastElement;
}
}
;
// ����id�õ��ڵ����dTree.prototype.getNode = function(id){
var nd;
for(var i=0;
i<this.aNodes.length;
i++){
nd = this.aNodes[i];
if(nd.id==id){
break;
}
}
return nd;
}
// ����id�õ��ڵ�IJ㼶dTree.prototype.getNodeLevel = function(id){
var cn = this.aNodes[id];
var level = 0;
for(;
;
){
if(cn._p.id==this.root.id){
break;
}
level++;
cn = cn._p;
}
return level;
}
//�ж��Dz���Ҷ��Ŀ¼dTree.prototype.isLeaf = function (nodeId){
var cn = this.aNodes[nodeId];
return cn._hc;
}
CSS代码(dtreeck.css):
.dtree{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;color:#666;white-space:nowrap;}
.dtree img{border:0px;vertical-align:middle;}
.dtree a{color:#0000FF;text-decoration:none;}
.dtree a.node,.dtree a.nodeSel{white-space:nowrap;padding:1px 2px 1px 2px;}
.dtree a.node:hover,.dtree a.nodeSel:hover{color:#CC6600;text-decoration:underline;}
.dtree a.nodeSel{background-color:#c0d2ec;}
.dtree .clip{overflow:hidden;}
分享到QQ
分享到微博
微信扫一扫
