dtree点击事件和中文乱码

      最近在做一个类似课件的东西，要用到dtree生成章节目录，dtree是一个开源的框架，下载地址是：http://www.destroydrop.com/javascripts/tree/。

 

     dtree的使用参照上面网站的例子就可以了，通过调用add方法和传递相应的参数来控制目录的外观等。

但是在我使用的过程中遇到了这样一个问题：在点击一个节点的时候要调用一个定位函数。

 

     这个定位函数的作用是在一个div标签中，显示出用户看到的当前页面所属的章节信息：

 

     就是点击位置1，然后在2处会显示位置

     最开始的方案：在首页：index.html 中写入如下定位函数：

 

<script type="text/javascript">
/* 获取当前位置的函数*/
function ok(address1,address2)
{
    var currentdiv=document.getElementById("currentdiv");
    currentdiv.innerHTML=address1+">>"+address2;
}
</script> 

以及相应的div：

 

<div style="float:left;">您当前的位置：</div>
<div id="currentdiv" style="float:left;">交互空间>>课件词典</div> 

 

并且利用dtree.js生成一颗目录树：

 

<div class='dtree'>
<script type='text/javascript'>
d = new dTree('d');
d.add(0,-1,'课程目录');
d.add(498,0,'第一讲 编年体');
d.add(3179,498,'本讲导学 ','kcxxContent_4458_1.html','本讲导学 ','secnavframe');
d.add(3180,498,'典籍概述','kcxxContent_3843_1.html','典籍概述','secnavframe');
d.add(3181,498,'史料选讲','kcxxContent_3846_1.html','史料选讲','secnavframe');
d.add(3899,498,'课后练习','kcxxContent_4048_1.html','课后练习','secnavframe');
d.add(499,0,'第二讲 国别体');
d.add(3182,499,'本讲导学 ','kcxxContent_4459_1.html','本讲导学 ','secnavframe');
d.add(3183,499,'典籍概述','kcxxContent_4049_1.html','典籍概述','secnavframe');
d.add(3184,499,'史料选讲','kcxxContent_4295_1.html','史料选讲','secnavframe');
d.add(3900,499,'课后练习','kcxxContent_4456_1.html','课后练习','secnavframe');
d.add(500,0,'第三讲 纪传体');
d.add(3185,500,'本讲导学','kcxxContent_4460_1.html','本讲导学','secnavframe');
d.add(3186,500,'典籍概述','kcxxContent_4058_1.html','典籍概述','secnavframe');
d.add(3187,500,'史料选讲','kcxxContent_4368_1.html','史料选讲','secnavframe');
d.add(3907,500,'课后练习','kcxxContent_4125_1.html','课后练习','secnavframe');
document.write(d);
</script>

 

最开始觉得应该可以自己再多定义一个参数，比如：

 

d.add(3912,505,'课后练习','kcxxContent_4457_1.html','课后练习','secnavframe','ok('1','2')');

但是，由于我是初学者，云山雾绕的引号觉得很麻烦，于是就放弃了……

之后就各种百度，谷歌，发现了一个可行的方案~~

 

mytree.add(1,0,'My Pictures','javascript:alert(\'dddddddd\'););

 

 就是在上面参数中url位置上，把网页地址换成javascript：alert(\'dddd\')，真的可以做到点击树状目录的时候，有反应，弹出提示框，但是在改进的时候发现这种方法不可行的理由：

     1.只能写在这个固定的地方，不能函数调用

     2.点击触发事件的同时我还想打开页面……

也许是自己才疏学浅，所以又放弃了~~~

-------------------------------------------------------------------------------------------- 

纠结了好久，最后终于成功了

方法就是：修改dtree.js文件！

 

把函数直接写在dtree.js文件里，不用调用

 在.js文件中有一个函数名字是 s  他的作用是在点击叶子节点的时候使之高亮，我们在这里面添加相应的代码，就能实现点击如上图“本讲导学”的时候，同时触发修改定位和转移页面。而定位函数就是写在了下述代码的后两行。

 

// 点击节点的时候，更改css样式，使选中节点高亮，同时可以在此处编写点击目录节点时想要触发的函数
dTree.prototype.s = function(id) 
{
	// 判断是否允许选中节点
	if (!this.config.useSelection) return;
	// 根据索引值从节点数组中取出节点对象
	var cn = this.aNodes[id];
	var parent = this.aNodes[id].pid;
	var pName;
	for(var i=0;i<this.aNodes.length;i++)
	{
		if(this.aNodes[i].id == parent)
		{
			pName = this.aNodes[i].name;
		}
	}
	// 判断包含子节点的节点是否允许选中
	if (cn._hc && !this.config.folderLinks) return;
	// 交换新旧节点的选中状态，改变css
	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);
		var currentdiv=document.getElementById("currentdiv");
		currentdiv.innerHTML = "课程学习>>"+pName+">>"+this.aNodes[id].name;
	}
};

------------------------------------------------------------------------------------------- 

在.js文件中有一个函数名字是  nodeStatus ，他的作用是改变有子节点的节点的展开或者折叠状态，所以在这里我们可以定义在点击二级节点时的动作~~这样就解决了我的问题~~

 

/**
 * 改变节点的状态(展开或折叠)
 * @param status true展开，false折叠;
 * @param id 节点的数组索引值(_ai);
 * @param bottom 是否是本级最后一个节点(_ls);
 * 可以在这个地方编写点击二节目录的函数
 */
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';

};

 

------------------------------------------------------------------------------------------

 

在这里，也遇到了乱码问题，比如在s函数中的定位函数部分：

var currentdiv=document.getElementById("currentdiv");
currentdiv.innerHTML = "课程学习>>"+pName+">>"+this.aNodes[id].name;

 

   在前台显示的时候，“课程学习”是乱码

其实是因为首页index.html是gb2312编码，而我们从网上下载下来的dtree.js是utf-8编码，所以只要在dreamweaver中改变dtree.js页面的编码格式就行啦~~

修改——页面属性——把编码改成gb2312

 

-----------------------------------over--------------------------------------------------------