2017年6月21日,天气阴。心情比较沉重。

近期由于毕设的事情,三周不写代码了。这周测试提交了一些BUG,于是开始着手处理,还真的是熟能生巧,三周的功夫就感觉有点生疏。其中有一个BUG就是角色对应的菜单权限是写死的,理论上应该从数据库读取。其实之前一直知道应该这么做,只不过树这个功能确实耗了我很长时间,当时为了追赶进度就写死了。最开始我用的ZTree做的,花了三天时间没有做出来,后来我换成了EasyUI,树倒了显示出来了,只不过没有从数据库读数据。刚开始处理的时候还以为问题不大,把数据从数据库中拿到,在JS中按照规定好的格式拼凑就好了,没想到越做越复杂,目前的三级菜单就涉及三层for循环。起初写出来的时候每级菜单都循环了很多次,后来发现是加数据的位置不对,还有就是拼凑的时候格式有问题,本来应该是数组包含多个对象(对应各级菜单)的地方我只写了一个对象,后来换了很多次位置,并且完全按照之前写死的格式拼出来,终于一级菜单正常了,不过二、三级菜单依旧循环了很多次。试了很多次总是不行,问了一下同事聂兄,他过来帮我调试时发现原来是变量定义的问题,本来应该是局部变量,我定义成了全局变量,这就导致每次初始化的时候不是一个全新的变量,而是在原有基础上改变的变量。于是立刻把对应的变量修改,终于,功夫不负有心人,出来了。哈哈哈,内心还是蛮激动的!经过这件事我有几点感想:1.在开发之前尽量把该考虑的问题都考虑到,不然后期修改和维护会很麻烦;2.遇事不要慌张,冷静地思考,从多角度审视问题,只要找到问题所在,解决还是比较快的。

昨晚看到一句话,尼采的“一个人知道自己为什么而活着,便能生存。”还有《白鹿原》中朱先生送给黑娃的“学为好人”四个字。感觉都很有哲理,拿出来与君分享。

  废话不多说了,直接上代码。

1.controller查询菜单程序

 /**
* 查询权限
*
* @param
* @return 权限列表
*/
@RequestMapping(value = "selectmenu", method = RequestMethod.GET)
@ResponseBody
public R queryMenu() {
List<Menu> listmenu = roleService.queryMenu();
return R.ok().putData(listmenu);
}

备注:Dao层接口和Service层调用Dao层接口这里就不赘述了。

2.核心部分—JS三层遍历

 $(document).ready(function(){
$.ajax({
url:ctx+"/role/selectmenu",
dataType:"json",
type:"get",
contentType : "application/x-www-form-urlencoded",
async : false,
success:function(data){
var list=data.data;
var length = list.length;
var pmenuid;
var cmenuid;
var menuid;
var pname;
var cname;
var name;
var datas = [];
var data1;
for(var i=0;i<length;i++){
20 if(list[i].type==0){
21 pmenuid = list[i].menuId;
22 pname = list[i].name;
23 var menu2 = [];
24 for(var j=0;j<length;j++){
25 var data2;
26 if(list[j].parentId==pmenuid){
27 cmenuid = list[j].menuId;
28 cname = list[j].name;
29 var menu3 = [];
30 for(var k=0;k<length;k++){
31 var data3;
32 if(list[k].parentId==cmenuid){
33 menuid = list[k].menuId;
34 name = list[k].name;
35 data3={
36 "id" : menuid,
37 "text" : name
38 }
39 menu3.push(data3);
40 }
41 }
42 if(menu3!=null || menu3!=undefined){
43 data2={
44 "id" : cmenuid,
45 "text" : cname,
46 "children" : menu3
47 }
48 menu2.push(data2);
49 }else{
50 data2={
51 "id" : cmenuid,
52 "text" : cname,
53 }
54 menu2.push(data2);
55 }
56 }
57 }
58 data1 = {
59 "id" : pmenuid,
60 "text" : pname,
61 "children" : menu2
62 }
63 datas.push(data1);
64 }
65
66 }
$(function() {
$("#tt").tree({
data : datas,
checkbox : true,
cascadeCheck : false,
onCheck : function(node, checked) {
if (checked) {
var parentNode = $("#tt").tree('getParent', node.target);
if (parentNode != null) {
$("#tt").tree('check', parentNode.target);
}
} else {
var childNode = $("#tt").tree('getChildren', node.target);
if (childNode.length > 0) {
for (var i = 0; i < childNode.length; i++) {
$("#tt").tree('uncheck', childNode[i].target);
}
}
}
}
});
});
}
});
})

获取Tree菜单ID的程序

 var arr = [];
var checkeds = $('#tt').tree('getChecked', 'checked');
for (var i = 0; i < checkeds.length; i++) {
arr.push(checkeds[i].id);
}
arr = arr.toString();

3.JSP代码

 <!--EasyUI树-->
<ul id="tt" align="left"></ul>

关于EasyUI中的Tree的更多相关文章

  1. PHP 使用编码树,生成easyui中的tree样式

    生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename  节点名称 这样的形 ...

  2. easyui中tree型控件不正常显示的处理方法

    我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...

  3. easyui中的几个问题

    easyui中的tree,采用url参数读取json,无法显示.有可能是vs的IIS不支持,$.ajax 原因待测试,有知道的朋友也可以贴代码,我解决的一个办法是 $(function () { $. ...

  4. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  5. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  6. 使用EasyUI中Tree

    easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...

  7. TWaver初学实战——如何在EasyUI中插入TWaver

    TWaver是一款强大的图形界面开发组件,可以很方便地集成到其他开发工具中.今天就用一个小例子来操练如何结合TWaver和EasyUI进行网页开发. 准备工作 俗话说他山之玉可以直接拿来,EasyUI ...

  8. easyui 异步json tree跨域访问问题解决

    最近在用easyui中的异步tree时发现了跨域访问问题,我们都知道jquery ajax提供get请求的跨域访问.所以解决easyui tree跨域访问的问题便是将数据通过jquery ajax将数 ...

  9. java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs

    1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...

随机推荐

  1. spring cloud微服务搭建第一天

    martin fowler大神提出微服务的概念后,各种微服务的技术满天飞,现在用的比较多的是spring cloud和阿里的dubbo,由于dubbo 在16年10月份就停止更新了,这里我们讲解spr ...

  2. 访问servlet的路径问题

    一.url-pattern的三种配置 在web.xml配置文件中配置有关Servlet的时候,<url-pattern>标签是用于配置当前Servlet拦截的路径,也就是说,客户端浏览器访 ...

  3. python3.5 安装lxml

    通过xpath 爬虫时,使用到了lxml,通过pip 安装lxml 报错"building 'lxml.etree' extension  building 'lxml.etree' ext ...

  4. Java类加载和卸载的跟踪

    博客搬家自https://my.oschina.net/itsyizu/blog/ 什么是类的加载和卸载 Java程序的运行离不开类的加载,为了更好地理解程序的执行,有时候需要知道系统加载了哪些类.一 ...

  5. 《安卓网络编程》之第一篇 java环境下模拟客户端、服务器端

    1.Socket简介 在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个双向链路的一端称为一个Socket.Socket通常用来实现客户方和服务方的连接.Socket是TCP/IP协议的一个 ...

  6. html学习笔记 - table表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. SSM框架中常用的注解

    @Controller:在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model , ...

  8. 第 7 章 MySQL 数据库锁定机制

      前言: 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就成为了各种数据库的核心技术之一.本章将对 MySQ ...

  9. meta标签属性总结

    一.常见name属性.不同参数含义 meta标签的name属性语法格式是: <meta name="参数" content="具体的参数值"> 其中 ...

  10. excel vba 实现跨表单(sheet) 搜索 - 显示搜索行记录搜索历史

    前两天,一个朋友问我,有没有办法在excel里实现一个表单里是原始数据,在另一个表单里显示搜索到的行,搜索关键词可用~分隔开,并把搜索历史记录下来? 我想了想,用vba实现肯定可以啊,但是我又在想,有 ...