zTree兼容ie8,解决对象不支持“addEventListener”属性或方法

由于我们是把树作为一个模块单独抽离出来,让使用者直接调用我们一个js就好了,所以我在树模块中就把需要的js和css都加载好。但是Ztree和Layui结合使用加载机构树在谷歌浏览器成功展示以后在ie8上却报错了

后面加了兼容ie8的代码后成功显示

var node = document.createElement('script');
			node.src = contextPath+"/common/zTree/js/jquery.ztree.all.min.js";
			node.type = "text/javascript";
			 
			var nodetcss = document.createElement('link');
			nodetcss.href = contextPath+"/common/zTree/css/tree.css";
			nodetcss.type = "text/css";
			nodetcss.rel = "stylesheet";
			
			var nodezcss = document.createElement('link');
			nodezcss.href = contextPath+"/common/zTree/css/zTreeStyle/zTreeStyle.css";
			nodezcss.type = "text/css";
			nodezcss.rel = "stylesheet";
			
			head.appendChild(node);
			head.appendChild(nodetcss);
			head.appendChild(nodezcss);

			if(node.addEventListener){
				//添加js文件加载完成的事件(addEventListener对于IE8不支持)
				node.addEventListener("load",function(e){
					$.fn.zTree.init($(treeId),setting);
				});
			}else {
				//对于不支持addEventListener的浏览器的处理
				node.onreadystatechange = function(){
					var state = node.readyState;
					if(state == 'loaded' || state == 'complete'){
						//zTree的js文件加载完成后执行
						node.onreadystatechange = null;
						$.fn.zTree.init($(treeId),setting);
					}
				}
			}

由于ie8不支持addEventListener这个方法,所以我们采用下面那种,监听node的状态,当node的状态为下载完成(loaded)或者脚本执行完毕后(complete)我们再去初始化树

在做的过程中还发现另外一个问题

后查资料看博客,发现是<select标>签的问题,在下面加一个空的<option>就可以了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: zTree是一个开源的Javascript树形结构插件,功能十分强大,但其样式设计确实存在一些问题。首先,zTree的默认样式比较简单、朴素,不够美观。其次,zTree的样式比较难以自定义,很难与网页的整体风格相协调,有些网站在使用zTree时会遇到样式不统一的问题。 为了解决这个问题,我们可以采取一些措施。首先,可以使用zTree提供的皮肤样式进行自定义,或者利用CSS技术进行个性化设计,使其符合网站整体风格。其次,与zTree配套的插件、主题等可以选择一些样式更为美观的版本,从而使得zTree看起来更加漂亮。 总之,虽然zTree默认样式不够出色,但是通过一些方法进行个性化设计,我们完全可以让zTree变得更加美观,提升用户体验。 ### 回答2: ztree 是一种用于构建树形结构的插件,它基于 jQuery 库,使用简单方便。然而,在一些情况下,人们可能会觉得 ztree 的默认样式不够美观。这时,我们可以根据自己的需求进行样式修改。 首先,我们可以通过修改 ztree 的 CSS 文件来改变其外观。在 CSS 文件中,我们可以修改节点的字体、颜色、背景图等属性,同时,还可以通过设置 ztree 的图标来达到更好的视觉效果。此外,如果觉得 ztree 的默认样式与网站或项目的风格不符,我们也可以通过定制化 CSS 样式来使其更加和谐、美观。 其次,在使用 ztree 的时候,我们还可以通过配置参数来实现样式的修改。在初始化 ztree 时,我们可以通过修改其参数来控制节点、线条等元素的样式。这些参数包括节点字体、颜色、大小等,而且通过一些参数的自定义,还可以让 ztree 在响应用户操作时表现出更加人性化的效果。 综上所述,虽然 ztree 的默认样式可能并不是所有人都能接受,但是我们可以通过修改其 CSS 文件和参数来达到自己的需求。在使用 ztree 的过程中,我们应该注重其实际功能和效果,对样式的修改不应过分强调。 ### 回答3: ztree 是一款非常流行的树形控件,在网页开发中经常被用来构建层级结构,但是由于其默认样式的问题,有些人觉得不够美观。针对这个问题,可以通过以下方法来改善 ztree 的样式。 首先,可以通过修改 ztree 的 CSS 文件来改变其样式。在 ztree 的 CSS 文件中,可以修改字体、颜色、边框、背景等属性,以达到更好的视觉效果。可以自行搜索相关的 CSS 教程和技巧,进行优化。 其次,可以使用 ztree 的皮肤功能,替换当前的样式。ztree 提供了多种皮肤可以选择,包括默认皮肤、Metro 皮肤、material 皮肤等。这些皮肤通常都已经经过了精心的设计和优化,可以让 ztree 的样式更加美观。 最后,如果以上方法还不能满足需求,也可以通过自定义 ztree 的样式来改变其外观。可以基于 ztree 的 API,对其 DOM 结构进行自定义修改,添加样式或者移除部分元素,以实现更加个性化的样式设计。 总之,ztree 样式不好看这个问题并不难解决,只要有一定的 CSS 技巧和基础,就可以通过以上方法来优化 ztree 的样式。控件本身并没有固定的颜色和样式,用户可以根据自己的需求来灵活定制,以满足不同的视觉效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值