DWZ框架和Ztree整合过程

最新推荐文章于 2018-06-08 18:05:00 发布

原创最新推荐文章于 2018-06-08 18:05:00 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DWZ框架 Ztree

web前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何将dwz框架与ztree控件进行整合，包括样式调整、异步调用实现及tab跳转功能的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间老大布置任务，让我把dwz框架和ztree给整合起来，dwz是多tab形式的框架，用到jtree，但是如果树的数目很大层次很多，那就需要用到异步调用了，所以我这两周研究这两个Jquery控件的整合，终于有点成绩了，先记下来流程，以免以后忘记了。

首先是css样式的整合，我把dwz-core.css关于tree的样式都屏蔽了，在后面加上ztree的样式，这里图片要注意路径正确，不然图片显示不了，还有就是在bin/dwz.min.css中有一段关于jTree的代码也要屏蔽，在686行左右，不然格式会错乱

/*if(tree.size()>0){
node.children(":first").wrap("<div></div>");
$(">div",node).prepend("<div class='"+(op.showSub?op.coll:op.exp)+"'></div>"+(op.ckbox?"<div class='ckbox "+checked+"'></div>":"")+(op.icon?"<div class='"+(op.showSub?op.options.folderColl:op.options.folderExp)+"'></div>":""));
op.showSub?tree.show():tree.hide();
$(">div>div:first,>div>a",node).click(function(){
var $fnode=$(">li:first",tree);
if($fnode.children(":first").isTag('a'))tree.subTree(op,op.level+1);
var $this=$(this);
var isA=$this.isTag('a');
var $this=isA?$(">div>div",node).eq(op.level):$this;
if(!isA||tree.is(":hidden")){
$this.toggleClass(op.exp).toggleClass(op.coll);
if(op.icon){
$(">div>div:last",node).toggleClass(op.options.folderExp).toggleClass(op.options.folderColl);}}(tree.is(":hidden"))?tree.slideDown("fast"):(isA?"":tree.slideUp("fast"));
return false;});
addSpace(op.level,node);
if(op.showSub)tree.subTree(op,op.level+1);}else{
node.children().wrap("<div></div>");
$(">div",node).prepend("<div class='node'></div>"+(op.ckbox?"<div class='ckbox "+checked+"'></div>":"")+(op.icon?"<div class='file'></div>":""));
addSpace(op.level,node);
if(op.isLast)$(node).addClass("last");}*/

调用过程很简单，根据ztree里面的demo就可以，主要是位置要放在

               <div class="accordion" fillSpace="sidebar">
 			<div class="accordionHeader">
					<h2>
						<span>Folder</span>界面组件
					</h2>
				</div>
				<div class="accordionContent">
					<div class="zTreeDemoBackground">
						<ul id="tree1" class="tree"></ul>
					</div>
				</div>
				<div class="accordionHeader">
					<h2>
						<span>Folder</span>流程演示
					</h2>
				</div>
			</div>

整合完后格式对了，可是不能实现tab跳转，这里有两种方法，第一种针对静态的树，可以直接在znode直接定义

        var zNodes = [ {
		id : 1,
		pId : 0,
		name : "表格页面",
		url : "Table.jsp",
		target : "navTab",
		rel : "table"
	}, {
		id : 2,
		pId : 0,
		name : "图表页面",
		url : "Fusion_pie.jsp",
		target : "navTab",
		rel : "chart"
	} ];

如果是在数据库中读取就在数据库中定义url，target和rel字段，用json字符串传入就可以了，

$.ajax({
				url: "<%=path%>/servlet/mapser",
				cache:false,
				async:false,
				dataType: "html",
				data:"servtype=1",
				success:function(data)	{	
				//alert(data);
			   	zNodes=eval("("+data+")");	
		   	
			}

我用的ztree版本比较旧，现在3.5都出来了，但是因为我找的大数量异步调用demo是基于2.5的，所以就在jquery-ztree-2.5里面修改一下地方，把target的值改为navTab，添加 setNodeRel函数，在另外两个有调用set函数的地方加上调用

//设置Target
	function setNodeTarget(treeNode) {
		var aObj = $("#" + treeNode.tId + IDMark_A);
		//aObj.attr("target", (treeNode.target || "_blank"));
		aObj.attr("target", (treeNode.target || "navTab"));
		
	}

function setNodeRel(treeNode) {
		var aObj = $("#" + treeNode.tId + IDMark_A);
		//aObj.attr("target", (treeNode.target || "_blank"));
		aObj.attr("rel",treeNode.rel );
		
	}

完成了以上修改，就基本实现了整合，当然后面如果还有问题，我继续修改该文。