最近做了一个项目,有用到easyui做树结构展示,看了很多资料,但是做起来还是有很多问题,现在写完了,将经验与大家分享一下。
前台用的是easyui1.3.2,后台框架是spring+springmvc+hibernate.我的数据库是两张表,target和targetgroup.
首先创建Tree,
private String id;
private String text;
private boolean leaf;
private String state;
private boolean checked;
private List
private Attributes attributes;//这是一个自定义属性,在对树进行crud的时候,可以传入其他参数
-------公共方法----------
public List queryList(String sql){
Session session = super.getSession();
Query query = session.createSQLQuery(sql).setResultTransformer(Transformers.ALLAS_TO_ENTITY_MAP);
List list = query.list();
try{
return list;
}finally{
releaseSession(session);
}
}
-----dao层-----
select * from targetgroup;
select * from target where targetgroupid='"+id+"';
----service层-----
public List getTreeList(){
List
List
for(int i =0;i
Map targetGroup = targetgroupList.get(i);
String id =targetGroup.get("TARGETGROUPID").toString();
Tree tree = new Tree();
tree.setId("targetgroup_"+id);
tree.setText(targetGroup.get("TARGETGROUPNAME").toString());
tree.setLeaf(false);
tree.setState("closed");
Attributes atr = new Attributes();
atr.setLevel("1"); //标记,做crud会用到
tree.setAttributes(atr);
List
if(targetList!=null){
List
for(int j=0;j
Map target =targetList.get(j);
Tree child = new Tree();
child.setId("target_"+target.get("TARGETID").toString());
child.setText(target.get("TARGETNAME").toString());
child.setLeaf(true);
chile.setState("closed");
Attributes atr2 = new Attributes();
atr2.setUrl(target.get("TARGETURL").toString());
atr2.setLevel("2");
child.setAttributes(atr2);
childTree.add(child);
}
tree.setChildren(childTree);
}
treeList.add(tree);
}
return treeList;
}
-------------------controller------------------------
private static final String JSON="json";
private Java2JsonUtil Java2JsonUtil ;
@RequestMapping(value="/getTargetTree",method=RequestMethod.POST)
@ResponseBody
public Map getTargetTree(){
Map result = new HashMap();
List
String json =Java2JsonUtil.toJson(list);
result.put("JSON",json);
return result;
}
-------------------------jsp--------------------------
------------------------js-------------------------------
function target(){
//这里的根节点“请选择”是我在前台拼接的根节点,所以将后台传来的数据追加到根节点上
$.ajax({
type:"POST",
url:"/你的项目名/XX/getTargetTree",
success:function(data){
checkbox:true,
cascadeCheck:false, //取消级联选中
data:[{"id":"00","leaf":true,"text":"请选择","attributes":{level:"0"}}]
}
});
var node = $('#targettree').tree('find',"00");
/**加载菜单树**/
var treeData =evel("("+data.JSON+")");
treeall=$("#targettree").tree('append',{
parent:node.target,
data:treeData
});
}
这是最后的项目展示图:(测试数据)