实体类:(定义的实体类要和bootstrupt中的相应的数据对应上) 不要把父节点设置成parentId，因为回合前台中的bootstrupt的parentId重名，导致数据没有办法传递过去
package com.lm.anga.platform.data.model;
import lombok.Data;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Data
public class CompTree implements Serializable {
protected Long treeparentId;
protected Long id;
protected String text;
protected int level;
protected int tag;
protected List<CompTree> nodes = new ArrayList();
protected String name;
protected String type;
protected String backColor;
protected String icon;
protected String color;
protected String expandIcon;
protected String nodeIcon;
protected String isFolder = "N";
protected boolean selected = false;
protected boolean checked = false;
protected Boolean expanded = true;
protected Map<String, Object> state = new HashMap();
}
service(不断地把节点放进去)PS：老师用的是递归的方法，但是我这情况有点不同，所以每一层写一个方法
@Override
public List<CompTree> CompTreeData(){
List<CompTree> nodes = new ArrayList();
CompTree root = new CompTree();
root.setText("组件分类");
root.setId(1L);
root.setIsFolder("Y");
root = this.secondNode(root);
nodes.add(root);
return nodes;
}
/**
* 组件是第一层，secondNode表示的是第二层
* @param node
* @return
*/
private CompTree secondNode(CompTree node) {
List<CompCate> list=compCateMapper.getDisplayCate();
if (BeanUtils.isNotEmpty(list)) {
List<CompTree> nodes = new ArrayList();
Iterator var4 = list.iterator();
while(var4.hasNext()) {
CompCate res = (CompCate)var4.next();
CompTree sub = new CompTree();
sub.setId(res.getId());
sub.setText(res.getName());
sub.setIcon(res.getIcon());
sub.setIsFolder("Y");
sub.setTreeparentId(1L);
this.thirdNode(sub);
nodes.add(sub);
}
node.setNodes(nodes);
}
return node;
}
/**
* 第三层
* @param node
* @return
*/
private CompTree thirdNode(CompTree node) {
List<CompCate> list=compCateMapper.getListByParentId(node.getId());
if (BeanUtils.isNotEmpty(list)) {
List<CompTree> nodes = new ArrayList();
Iterator var4 = list.iterator();
while(var4.hasNext()) {
CompCate res = (CompCate)var4.next();
CompTree sub = new CompTree();
sub.setId(res.getId());
sub.setText(res.getName());
sub.setIcon(res.getIcon());
sub.setTreeparentId(node.getId());
nodes.add(sub);
}
node.setNodes(nodes);
}
return node;
}
js
$(function() {
treelist = new treelist();
treelist.init();
});
(function() {
//定义常量
var _consts = {
FORM : '#systemResForm',// 表单form
TREE : '#treeview', //左分类树
IconSelector : '.icon-selector'
};
/**
* sys_auth_res 对象
* @returns {treelist}
*/
treelist = function() {
//定义属性
};
/**
* 方法
*/
treelist.prototype = {
consts: _consts,
/**
* 初始化
*/
init : function() {
if (this.hasInit) // 是否已初始化
return false;
this.hasInit = true;
if ($(this.consts.FORM).length > 0)//表单
this._initForm();
if ($(this.consts.TREE).length > 0){//树
this._treeFrameResize();
this._initResTree();
this.rightClick();
}
if($(this.consts.IconSelector).length > 0)
this._initIconSelector();
},
_initIconSelector:function(){
$('.icon-selector').fontIconPicker({
source: icons,
emptyIcon: true,
hasSearch: true
});
},
_treeFrameResize:function(){
var systemId=$("#systemId").val();
var $height=getWindowHeight();
$('#listFrame').height( $height);
$('#listFrame').attr('src',__ctx+'/platform/data/compCate/list')
$('div.boxscroll').height( $height-40);
},
/**
* 初始化表单
*/
_initForm : function() {
var me = this, form = $(this.consts.FORM), frm = form.form();
// 触发表单验证
frm.valid();
// 处理表单保存
$(document).on('click', 'a.save-link', function() {
frm.ajaxForm({
success : me._showResponse
});
if (frm.valid())
form.submit();
});
},
_initResTree:function(){
var me=this;
var systemId=$("#systemId").val();
$("#listFrame").attr("src",__ctx+"/platform/data/compCate/list");
var tree={
data:[],
backColor:'#FFFFFF',
showCheckbox : false,
onNodeChecked: function(event, data){
},
onNodeSelected:function(e, data){
me.data=data;
if(data.isFolder=='Y'){
$("#listFrame").attr("src",__ctx+"/platform/data/compCate/list?parentId="+data.id);
}
},
onNodeUnchecked: function(event, data){
}
};
var url=__ctx+"/platform/data/compCate/getResTreeData";
$.post(url,function(result){
tree.data=result;
me.tree=tree;
$('#treeview').treeview(tree);
//默认全选
$('#treeview').treeview('checkAll', { silent: true });
});
},
rightClick:function(){
var me = this;
var systemId=1;
$("#treeview").on("contextmenu","li.list-group-item.node-treeview", function(e){
e.preventDefault();
e.stopPropagation();
var node=me.data;
var nodeId=me.data.id;
var treeparentId = me.data.treeparentId;
var menu=null;
if(node){
if(node.id==systemId){
menu=$('#rootMenu');
}else{
if(node.isFolder=='Y'){
menu=$('#folderMenu');
}else{
menu=$('#leafMenu');
}
}
}
var ul = $("li.list-group-item.node-treeview");
$(ul).each(function(){
var li=this;
});
$(this).css("background-color","#428bca");
menu.contextMenu(e,{
onItem: function(context, ev) {
var target =$(ev.target),
action = target.data("action");
if (target.hasClass('disabled'))
return false;
switch (action) {
case "node_add":// 新增节点
me.addNode(nodeId,treeparentId);
break;
case "node_edit":// 编辑节点
me.editNode(nodeId);
break;
case "node_del":// 删除节点
me.delNode(nodeId);
break;
case "node_param":// 删除节点
me.paramNode(nodeId);
break;
}
}
});
});
},
editNode:function(nodeId){
var url=__ctx+"/platform/data/compCate/edit?id="+nodeId;
$("#listFrame").attr("src",url);
},
addNode:function(nodeId,treeparentId){
var systemId=$("#systemId").val();
var url=__ctx+"/platform/data/compCate/edit?id="+nodeId+"&parentId="+treeparentId;
$("#listFrame").attr("src",url);
},
delNode:function(nodeId){
url=__ctx+"/platform/data/compCate/del?id="+nodeId;
$.post(url,function(responseText){
var msg = new com.mliot.form.ResultMessage(responseText);
if (msg.isSuccess()) {
window.location.href = __ctx+'/platform/data/compCate/treeList';
} else {
DialogUtil.error(msg.getMessage());
}
});
},
paramNode:function(nodeId){
var url=__ctx+"/platform/data/paramInfo/list?cateId="+nodeId;
$("#listFrame").attr("src",url);
},
/**
* 表单成功返回信息
*
* @param responseText
*/
_showResponse : function(responseText) {
var msg = new com.mliot.form.ResultMessage(responseText);
if (msg.isSuccess()) {
DialogUtil.confirm(msg.getMessage() + ',是否继续操作',
function(rtn) {
if(rtn)
window.location.reload(true);
else
window.location.href = __ctx+'/platform/data/compCate/list';
});
} else {
DialogUtil.error(msg.getMessage());
}
}
};
})();
Html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="~{templates/hcommon :: h-common}">
</head>
<body>
<div class="row clearfix">
<div class="col-xs-2 col-sm-2 col-md-2" style="padding-left: 0; padding-right: 0;left:0;height: 100%;">
<div id="holeBox" >
<!-- <select class="form-control" id="systemId" name="systemId" onchange="systemRes._initResTree();">-->
<!-- <option th:each="system,stat:${systemList}" th:value="${system.id}" th:text="${system.sysName}" th:selected="${system.id == systemId}" />-->
<!-- </select>-->
<div class="boxscroll">
<div id="treeview"></div>
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-10 " style="padding-left: 0; padding-right: 0;left:0;height: 100%;">
<iframe name="listFrame" id="listFrame" width="100%" scrolling="no" frameborder="no" ></iframe>
</div>
</div>
<div id="rootMenu" class="bootstrap-contextmenu" >
<ul class="dropdown-menu" role="menu">
<li><a data-action="node_add" tabindex="-1" ><i class="fa fa-plus"></i> 增加节点</a></li>
</ul>
</div>
<div id="leafMenu" class="bootstrap-contextmenu" >
<ul class="dropdown-menu" role="menu">
<li><a data-action="node_edit" tabindex="-1"><i class="fa fa-edit"></i> 编辑节点</a></li>
<li><a data-action="node_del" tabindex="-1"><i class="fa fa-remove"></i> 删除节点</a></li>
</ul>
</div>
<div id="folderMenu" class="bootstrap-contextmenu" >
<ul class="dropdown-menu" role="menu">
<li><a data-action="node_add" tabindex="-1" ><i class="fa fa-plus"></i> 增加节点</a></li>
<li><a data-action="node_edit" tabindex="-1"><i class="fa fa-edit"></i> 编辑节点</a></li>
<li><a data-action="node_del" tabindex="-1"><i class="fa fa-remove"></i> 删除节点</a></li>
<li><a data-action="node_param" tabindex="-1"><i class="fa fa-remove"></i> 参数管理</a></li>
</ul>
</div>
<div th:insert="~{templates/fcommon :: f-common}"></div>
<script type="text/javascript" th:src="@{/base/js/plugin/contextMenu.js}"></script>
<script type="text/javascript" th:src="@{/js/platform/treelist.js}"></script>
</body>
</html>
controller
/**
* 得到组件页面的树
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping({"getResTreeData"})
@ResponseBody
public List<CompTree> getResTreeData(HttpServletRequest request, HttpServletResponse response) throws Exception {
List<CompTree> nodes = compCateService.CompTreeData();
return nodes;
}