注意: 主要是理解形成树形菜单的思路,并不是粘贴就可以用的。
返回数据(如:效果图)到页面后,通过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" ο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']);
}
}
}