artDialog弹窗+Ztree树从后台获取数据

简单的ArtDialog+Ztree
样子就是这个了

学习artDialog的前去artDialog 4.1.7,我们需要的都可以在这里下载。小案例可以看这个*artDialog 4.1.7精简版*
学习ztree的来这个网站Ztree-Jquery树插件，里面是详细的ztree的配置和参数

这个是下载的artDialog

skins里面是各种弹窗的皮肤，这两个放到你的项目中。
然后就是引入js文件和你想要的皮肤了

这个是下载的ztree，连有详细的api(有中文版和英文版)和js、css文件

将js和css两个文件夹直接拷贝到项目中

<link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/demo.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${pageContext.request.contextPath }/lib/jquery/jquery-1.9.0.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath }/artDialog/dist/artDialog.js?skin=chrome"></script>
//js和skin这个文件夹一定要在同一级
<script type="text/javascript"
	src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.core.js"></script>//ztree

如果遇到有一些控件没有效果的时候，再引入其他的js文件就行了，一般情况下，这个jquery.ztree.core.js就可以了满足了。

<div id="dialogContext" style="display: none;background-color: white;">
	<div>
		<input type="text" id="searchTreeText">
		<button type="submit" id="searchBtnTree">搜索</button>
		<button type="submit" id="choiceBtn">选择</button>
		<button type="submit" id="reset">重置</button>
	</div>
	<div class="content_wrap">
		<div class="zTreeDemoBackground">
			<ul id="treeMenu" class="ztree" style="width: 400px"></ul>
		</div>
	</div>
</div>

这里的布局是弹窗的内容 包含一些按钮和一个ztree树

var dialog;//弹窗
var ztree;//ztree树
var treeNode;//树节点

//弹窗
$("#dialogTree").click(function(event) {
	dialog = art.dialog({
		title : '选择树',//弹窗的标题
		//弹窗的内容，放ztree树
		content : document.getElementById("dialogContext"),
		lock : true,//开启锁屏，中断用户和对话框以外的活动
		background : '#FFFAFA'//此处用单引号
	});
});

//树的初始化的设置(这个setting设置，有其他需要的就多看一下api文档中setting的详细介绍)
$.windowbox = {  
   		treeInit:function(){
			var setting = {
				check : {
					chkStyle : "radio",//设置为单选框
					enable : true,//设置节点上是否开启checkBox/radio
					radioType : "all"//在整棵树范围内当做一个分组。
				},
				data : {
					simpleData : {//简单数据格式
						enable : true
					}
				},
				view : {
					expandSpeed : "fast",
					fontCss : setFontCss
				}
			};
			ztree = $.fn.zTree.init($("#treeMenu"), setting, treeNode);//树的初始化操作(这个是最重要的,最后一个参数是树节点，可以自己设置或者后台取)
			//以下可以根据自己的需要去选择是否填写
			var node = ztree.getNodeByParam("id", 1, null);//获取id为1的节点
			ztree.checkNode(node, true, true);//默认选中该节点
			ztree.expandNode(node, true, false, true);//默认展开该节点
			$("#dialogTree").val(node.name);//将默认选中的节点放入输入框中
	}
}

//我的treeNode是用ajax从后台获取的
$.ajax({
		async : false,//同步请求
		type : "GET",
		dataType : "json",
		url : "ztree.do",
		success : function(data) {
			treeNode = data;
			$.windowbox.treeInit();//
		}
});

前台布局好之后，就是后台获取数据的代码了
controller的代码

@RequestMapping("ztree.do")
@ResponseBody
public void getZtreeData(HttpServletResponse response) {
	List<YGDeptT> tree = ygService.getDept();
	PrintWriter out = null;
	try {
		response.setContentType("text/json");
		response.setCharacterEncoding("UTF-8");
		out = response.getWriter();
		//我们用的ztree需要的json对象，而不是json字符串
		JSONArray jsonArray = JSONArray.fromObject(tree);
		out.print(jsonArray);
		out.flush();
	} catch (Exception e) {
		e.printStackTrace();
	} finally {
		if (out != null) {
			out.close();
		}
	}

}

其中json数据的格式是

id：节点的id
name：节点的name
children：节点的子节点，里面是子节点的id，name，children

对我来说最难的就是将所有的数据弄成这个格式的嵌套的格式了，问了同事和同学才想明白，简直头疼，哭唧唧~

service层

/**
 * 获取机构树
 * 
 * 过程:从数据库拿到数据后，放到一个以机构id为key，此对象为value的map中。循环map，将parentID拿到，
 * 判断是否有以parentId为key的对象，如果没有，将空对象赋值，判断是否有子节点，空则初始化，有则add
 * 然后在空对象中添加parentID的对象； 如果有，判断子节点是否为空，空则初始化，有则add 最后放到一个list中返回
 */
public List<YGDeptT> getDept() {
	List<YGDeptT> rootList = new ArrayList<YGDeptT>();
	Map<Integer, YGDeptT> treeMap = ygDao.getDept();// 从数据拿到数据，以id为key
	Map<Integer, YGDeptT> treeMap2 = new HashMap<Integer, YGDeptT>();

	for (Map.Entry<Integer, YGDeptT> map : treeMap.entrySet()) {
		YGDeptT deptT = map.getValue();
		int parentId = deptT.getParentid();// 获取父亲id
		YGDeptT ygRoot = treeMap.get(parentId);
		// 如果没有以该id为key的对象，则为根节点
		if (ygRoot == null) {
			treeMap2.put(deptT.getId(), deptT);
			continue;// 跳过本次循环，执行下次循环
		}
		if (ygRoot.getChildren() == null) {
			List<YGDeptT> node = new ArrayList<YGDeptT>();
			ygRoot.setChildren(node);
		}
		ygRoot.getChildren().add(deptT);
	}
	for (Map.Entry<Integer, YGDeptT> entry : treeMap2.entrySet()) {
		rootList.add(entry.getValue());
	}
	return rootList;
}

这是最终成功的代码，有没有搞明白的再问我吧。

YGDept类

private int id;
private String name;
private int parentid;
private List<YGDeptT> children;

public List<YGDeptT> getChildren() {
	return children;
}

public void setChildren(List<YGDeptT> children) {
	this.children = children;
}

public int getId() {
	return id;
}

public void setId(int id) {
	this.id = id;
}

public String getName() {
	return name;
}

public void setName(String name) {
	this.name = name;
}

public int getParentid() {
	return parentid;
}

public void setParentid(int parentid) {
	this.parentid = parentid;
}

哦了，这样我们的数据就能够拿到了。我们就可以了看到最终的效果就是最开始的那张图片了。
搜索的实现我下次再写了，如果能帮到大家那就很开心了~

转载请说明地址并通知我，谢谢~