这几天因为工作需要,要做一个支持无限级的菜单。
我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件。
不得不说,easyui确实很强大。
因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载。
但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接。
最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西。
一、HTML部分代码
style="width: 650px; height: 300px;">
html部分很简单,只要放一个ul就可以了。
二、JS部分代码
function showCategory(){
$('#MyTree').tree({
checkbox: false,
url: '/category/getCategorys.java?Id=0',
onBeforeExpand:function(node,param){
$('#MyTree').tree('options').url = "/category/getCategorys.java?Id=" + node.id;
},
onClick:function(node){
var state=node.state;
if(!state){ //判断当前选中的节点是否为根节点
currentId=node.id;
$("#chooseOk").attr( "disabled" , false ); //如果为根节点 则OK按钮可用
}else{
$("#chooseOk").attr( "disabled" , true ); //如果不为根节点 则OK按钮不可用
}
}
});
}
最后几句代码是因为我这个项目需要,只有选择到最下级节点的时候,才运行点击“确定”。否则不允许。
当用户点击确定的时候,需要获取 当前用户选中节点 的所有父节点
var nodes=[]; //定义数组用来存放各个节点名称
var node =$("#MyTree").tree("getSelected"); //当前选中节点
nodes.push(node.text); //首先放入当前节点
var pnode = $('#MyTree').tree('getParent',node.target); //获取当前节点的父节点
while(pnode!=null){
nodes.push(pnode.text); //依次放入各个父节点,直到根节点为止
pnode = $('#MyTree').tree('getParent',pnode.target);
}
nodes.reverse(); //数组元素倒序排序
$.each(nodes,function(){ //循环取值
var html=this;
$("#inCategoryDiv").html( $("#inCategoryDiv").html() + html + ">>" );
});
其实,主要问题在于后台对数据的处理,即如何能够转化为 easyui tree才可以识别的JSON数据。
三、后台代码(Java)
public ResponseEntity findBy(Integer Id ) {
List categorys = getcategorys(Id );
String ss="";
ss+="[";
for( Category category : categorys )
{
ss+="{";
//ss += ""id": ""+category.getId()+"","text": ""+category.getName().toString()+"","iconCls": "icon-ok","state": "closed"";;
List cs = getcategorys( category.getId() ); //判断当前节点是否还有子节点
if(cs.size()==0){ //没有子节点 设置 state 为空
ss+=String.format(""id": "%s", "text": "%s", "iconCls": "", "state": """, category.getId() , category.getName());
}else{ // 还有子节点 设置 state为closed
ss+=String.format(""id": "%s", "text": "%s", "iconCls": "", "state": "closed"", category.getId() , category.getName());
}
ss+="},";
}
ss=ss.substring(0, ss.length() - 1);
ss+="]";
return super.responseString(ss); //字符编码转换
}