关于EasyUI中的Tree
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的更多相关文章
- PHP 使用编码树,生成easyui中的tree样式
生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename 节点名称 这样的形 ...
- easyui中tree型控件不正常显示的处理方法
我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...
- easyui中的几个问题
easyui中的tree,采用url参数读取json,无法显示.有可能是vs的IIS不支持,$.ajax 原因待测试,有知道的朋友也可以贴代码,我解决的一个办法是 $(function () { $. ...
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- 做权限树时 使用EasyUI中Tree
符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...
- 使用EasyUI中Tree
easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...
- TWaver初学实战——如何在EasyUI中插入TWaver
TWaver是一款强大的图形界面开发组件,可以很方便地集成到其他开发工具中.今天就用一个小例子来操练如何结合TWaver和EasyUI进行网页开发. 准备工作 俗话说他山之玉可以直接拿来,EasyUI ...
- easyui 异步json tree跨域访问问题解决
最近在用easyui中的异步tree时发现了跨域访问问题,我们都知道jquery ajax提供get请求的跨域访问.所以解决easyui tree跨域访问的问题便是将数据通过jquery ajax将数 ...
- java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs
1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...
随机推荐
- css grid学习材料整理
2017-04-18 19:59:02 由浅入深: 什么是网格布局:http://www.w3cplus.com/css3/what-is-css-grid-layout.html 浏览器如何开启网格 ...
- LESS的一点自己的理解(2)
上次写的一点居然忘了保存了,虽然说编辑器有自动保存的功能,但是昨天写的依然找不到了,/(ㄒoㄒ)/~~那好吧,重新开始写. 1.上篇写到了Mixins(混入),如果你仔细看了上面的例子,你就会发现其实 ...
- Nginx 反向代理&负载均衡
1.反向代理 当我们请求一个网站时,nginx会决定由哪台服务器提供服务,就是反向代理. nginx只做请求的转发,后台有多个tomcat服务器提供服务,nginx的功能就是把请求转发给后面的服务器, ...
- [玩耍]C++控制台扫雷
其实是大一还不会GUI时闲着无聊写的.都是硬编码,也不支持自定义棋盘大小,现在看看这代码惨不忍睹.下载地址:http://download.csdn.net/download/xienaoban/98 ...
- 一个简单易用的容器管理平台-Humpback
什么是Humpback? 在回答这个问题前,我们得先了解下什么的 Docker(哦,现在叫 Moby,文中还是继续称 Docker). 在 Docker-百度百科 中,对 Docker 已经解释得很清 ...
- 基于spark和sparkstreaming的word2vec
概述 Word2vec是一款由谷歌发布开源的自然语言处理算法,其目的是把words转换成vectors,从而可以用数学的方法来分析words之间的关系.Spark其该算法进行了封装,并在mllib中实 ...
- PyCharm的小技巧
PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如:代码跳转.智能提示.自动完成.单元测试.版本控制.此外,该IDE提供了一些高级功能, ...
- ASP.NET MVC5路由系统机制详细讲解
请求一个ASP.NET mvc的网站和以前的web form是有区别的,ASP.NET MVC框架内部给我们提供了路由机制,当IIS接受到一个请求时,会先看是否请求了一个静态资源(.html,css, ...
- VR市场爆炸-VR全景智慧城市
随着VR的火爆,越来越多的企业开始关注这种高新技术,也有越来越多VR虚拟现实公司应运而生,但是VR虚拟现实公司真的那么好做吗?虽然VR虚拟现实拥有巨大的市场潜力,但是同时它也非常烧钱,如果VR虚拟现实 ...
- Android 工程集成React Native 0.44 注意点
当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...