关于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原生工程中去.本篇旨在记录出现的问题以及应对方式 ...