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")@ResponseBodypublic 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;}

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

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