自定义类 无极限树形结构菜单(繁杂版)
生活随笔
收集整理的這篇文章主要介紹了
自定义类 无极限树形结构菜单(繁杂版)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
注意: 主要是理解形成樹形菜單的思路,并不是粘貼就可以用的。
??返回數據(如:效果圖)到頁面后,通過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 FROMott_vod_category vc</select>
業務層處理:
@Overridepublic 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" οnclick="editVodCategory('+jsonArr[i].id+')">編輯</button>';if(jsonArr[i].status=="0" ){html += '?<button class="btn btn-danger btn-sm" οnclick="opVodCategoryStatus('+jsonArr[i].id+',1)">鎖定</button></td>';}else{html += '?<button class="btn btn-primary btn-sm" οnclick="opVodCategoryStatus('+jsonArr[i].id+',0)">解鎖</button></td>';}html +='</tr>';if(jsonArr[i]['children'] != null || jsonArr[i]['children'] != '' ){getHtml(jsonArr[i]['children']);}} }
總結
以上是生活随笔為你收集整理的自定义类 无极限树形结构菜单(繁杂版)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 02极限
- 下一篇: 【TP5.1】树状导航栏(无极限分类)