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

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

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

 if(targetList!=null){

    List childTree = new ArrayList();

    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 list = targetservice.getTreeList();

  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

    });

    }

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

    easyui前台树结构展示_第1张图片











你可能感兴趣的:(easyui前台树结构展示)