easyui前台树结构展示

最近做了一个项目，有用到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<Tree> children;

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<Tree> treeList =new ArrayList<Tree>();

List<Map> targetgroupLIst =targetgroupdao.selectAllTargetGroup();//查询所有一级菜单

for(int i =0;i<targetgroupList.size();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<Map> targetList = targetdao.selectAllTarget(id);//查询targetlist里边的数据根据targetgroupid

 if(targetList!=null){

    List<Tree> childTree = new ArrayList<Tree>();

    for(int j=0;j<targetList.size();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<Tree> list = targetservice.getTreeList();

  String json =Java2JsonUtil.toJson(list);

  result.put("JSON",json);

  return result;

}

-------------------------jsp--------------------------

<ul id="targettree" class="easyui-tree">

------------------------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

});

}

这是最后的项目展示图：(测试数据)