自定义类 无极限树形结构菜单(繁杂版)
2015-12-26 15:19
483 查看
注意: 主要是理解形成树形菜单的思路,并不是粘贴就可以用的。
返回数据(如:效果图)到页面后,通过js做递归调用处理就好了。
树形菜单基础类: TreeGridCategory.java
mybatis 查询:
业务层处理:
控制层:
Js 上递归处理:
返回数据(如:效果图)到页面后,通过js做递归调用处理就好了。
树形菜单基础类: TreeGridCategory.java
public class TreeGridCategory implements Comparable{ private String id; /* ID */ private String name; /* 名称 */ private String path; /* 图标 */ private String pid; /* 父级ID */ private String level; private String state="close"; /* 折叠状态 */ private String lang; private String sort; private String status; private String leaf; /* 叶子节点标识:1:子节点 2:叶子节点 */ Map<String,Object> params = new HashMap<String,Object>(); List<TreeGridCategory> children = new ArrayList<TreeGridCategory>(); /* 子集节点 */
mybatis 查询:
<!-- 获取视频分类列表 --> <select id="getVodCategory" parameterType="map" resultType="map"> SELECT vc.id AS id, vc.leaf AS leaf, vc.parent_id AS pid, vc.level AS level, vc.name AS name, vc.path AS path, vc.lang AS lang, vc.sort AS sort, vc.status AS status FROM ott_vod_category vc </select>
业务层处理:
@Override public List<TreeGridCategory> getTreeGridCategory(VodCategory vodCategory) { List<TreeGridCategory> easyuiTreetemp = new ArrayList<TreeGridCategory>(); Map<String,Object> map=new HashMap<String,Object>(); map.put("lang","zh-cn"); List<Map<String,Object>> dataList = tVodCategoryDao.getVodCategory(map); Map<String,TreeGridCategory> treeMap = new HashMap<>(); for (Map<String,Object> easyuiTreeMap : dataList) { TreeGridCategory treeGridCategory = fomateTreeGridCategory(easyuiTreeMap); treeMap.put(treeGridCategory.getId(), treeGridCategory); easyuiTreetemp.add(treeGridCategory); } List<TreeGridCategory> treeGridList = new ArrayList<TreeGridCategory>(); for (int i = 0; i < easyuiTreetemp.size(); i++) { TreeGridCategory tempTree = easyuiTreetemp.get(i); TreeGridCategory mapTree = treeMap.get(tempTree.getPid()); if(null != mapTree && !tempTree.getId().equals(tempTree.getPid())){ mapTree.getChildren().add(tempTree); }else{ treeGridList.add(tempTree); } } return treeGridList; } private TreeGridCategory fomateTreeGridCategory(Map<String,Object> map){ TreeGridCategory treeGridCategory = new TreeGridCategory(); Map<String,Object> params = new HashMap<String,Object>(); for (String key : map.keySet()) { switch (key) { case "id": treeGridCategory.setId(map.get(key)+""); break; case "name": treeGridCategory.setName(map.get(key)+""); break; case "path": treeGridCategory.setPath(map.get(key)+""); break; case "pid": treeGridCategory.setPid(map.get(key)+""); break; case "leaf": treeGridCategory.setLeaf(map.get(key)+""); break; case "sort": treeGridCategory.setSort(map.get(key) + ""); break; case "level": treeGridCategory.setLevel(map.get(key) + ""); break; case "lang": treeGridCategory.setLang(map.get(key)+""); break; case "status": treeGridCategory.setStatus(map.get(key)+""); break; default: params.put(key, map.get(key)); break; } } treeGridCategory.setParams(params); return treeGridCategory; }
控制层:
List<TreeGridCategory> list = new ArrayList<TreeGridCategory>(); list = treeGridService.getTreeGridCategory(vodCategory); return list;
Js 上递归处理:
function getHtml(jsonArr){ for(var i=0;i<jsonArr.length;i++){ if(jsonArr[i].id != 1) html += '<tr data-tt-id="'+jsonArr[i].id+'" data-tt-parent-id="'+jsonArr[i].pid+'">'; else html += '<tr data-tt-id="'+jsonArr[i].id+'">'; html += '<td style="width:120px;">'+jsonArr[i].id+'</td>'; html += '<td>'+jsonArr[i].name+'</td>'; if(jsonArr[i].path!=null){ html += '<td><img src='+jsonArr[i].path+' style="width:40px;height:32px;" /></td>'; }else{ html += '<td><img src="" style="width:40px;height:32px;" /></td>'; } html += '<td>'+jsonArr[i].lang+'</td>'; html += '<td>'+jsonArr[i].sort+'</td>'; if(jsonArr[i].status=="0" ){ html += '<td ><i class="fa fa-unlock"></i></td>'; }else{ html += '<td ><i class="fa fa-lock"></i></td>'; } html += '<td><button class="btn btn-success btn-sm" onclick="editVodCategory('+jsonArr[i].id+')">编辑</button>'; if(jsonArr[i].status=="0" ){ html += ' <button class="btn btn-danger btn-sm" onclick="opVodCategoryStatus('+jsonArr[i].id+',1)">锁定</button></td>'; }else{ html += ' <button class="btn btn-primary btn-sm" onclick="opVodCategoryStatus('+jsonArr[i].id+',0)">解锁</button></td>'; } html +='</tr>'; if(jsonArr[i]['children'] != null || jsonArr[i]['children'] != '' ){ getHtml(jsonArr[i]['children']); } } }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总