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/radioradioType : "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为keyMap<Integer, YGDeptT> treeMap2 = new HashMap<Integer, YGDeptT>();for (Map.Entry<Integer, YGDeptT> map : treeMap.entrySet()) {YGDeptT deptT = map.getValue();int parentId = deptT.getParentid();// 获取父亲idYGDeptT 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;
}

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

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

artDialog弹窗+Ztree树从后台获取数据相关推荐

Vue---从后台获取数据vue-resource的使用方法
作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...
下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...
表单和ajax中的post请求后台获取数据方法（深度好文）
最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
jsp页面加载的时候，从后台获取数据，页面加载完成之后，下拉列表中已经有值
在jsp中,我们经常会遇到这种情况:当页面加载完成之后,下拉列表中已经有数据,这是怎么实现的呢? 下面作以详解: 1.<body οnlοad="fun()">:在js ...
使用echarts绘制统计分析图表（动态从后台获取数据）
说明:实际项目中的统计分析模块不仅需要数据以表格的方式显示,还需要用图形化的方式进一步渲染,以提升数据的可观性,以下是使用echarts来进行绘制统计分析图表的案例: 文章目录一.第一个静态echa ...
vue 后台获取数据下拉框_Vue开发中的一些常见套路和技巧
属性排放管理请求加载状态 Proxy跨域对developer和build的打包进行不同配置大部分开发者都喜欢将Vue的config写在一个文件中,看起来是没有问题,但是随着环境的变化,项目优化, ...
vue根据url获取内容axios_vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据...
在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...
vuex+element 从后台获取数据写导航栏-菜单权限
主要用到 vuex.router.beforeEach.router.addRoutes().vuex 的使用方法可以看我的另一篇博客:vue笔记(四)vuex. 顺便安利一个在线视频转gif图. ...

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

artDialog弹窗+Ztree树从后台获取数据相关推荐

最新文章

热门文章