dhtmlxTree总结

最近有一个项目需要做到无限级树型菜单,而且要实现右键的功能,经别人的介绍,我接触到了dhtmlxtree,虽然最后并没有使用它,但是我想以后会有机会用的

在官方给出的例子中,加载一个xml文件很简单,文件内容如下

xml 代码

<?xml version='1.0' encoding='utf-8'?>
<tree id="0" text="root">
    <item text="Books" id="books" im0="books_close.gif" im1="tombs.gif" im2="tombs.gif" src="http://www.baidu.com">
        <item text="Mystery &amp; Thrillers" id="mystery" im0="book.gif" im1="books_open.gif" im2="books_close.gif">
            <item text="Lawrence Block" id="lb" im0="book.gif" im1="books_open.gif" im2="book.gif">
                <item text="All the Flowers Are Dying" id="a1" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"  child="1">
                </item>
                <item text="The Burglar on the Prowl" id="lb_2" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>
                <item text="The Plot Thickens" id="lb_3" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>
                <item text="Grifter's Game" id="lb_4" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>
                <item text="The Burglar Who Thought He Was Bogart" id="lb_5" im0="book_titel.gif" im1="book_titel.gif" im2="book_titel.gif"/>
            </item>
        </item>
    </item>
</tree>

简单了解下,id就是这个节点ID,text是显示的内容,src是点击时的超链接,有了这个xml文件的结构之后,我们就可以通过页面发出请求访问后台,由后台生成类似的xml的字符串,发送到页面,有页面进行接收处理

在页面中的显示如下

js 代码

<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
    <script src="../js/dhtmlXCommon.js"></script>
    <script src="../js/dhtmlXTree.js"></script>

......


<div id="treeboxbox_tree"></div>
<script>
    tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagePath("../imgs/");
    tree.setXMLAutoLoading("http://localhost:8082/jh_directoryManager/tree/treeLoad.do?method=open");
    tree.loadXML("http://localhost:8082/jh_directoryManager/tree/treeLoad.do?method=init");
    tree.setOnRightClickHandler(viewRight);//设置右键调用方法

</script>

这里的tree.loadXML说的明白一点,就是页面第一次打开的时候,访问的请求

tree.setXMLAutoLoading是展开树发送的请求

还可以通过查看API定义一些事件处理如

js 代码

tree.setOnRightClickHandler(viewRight);//设置右键调用方法

这是的意思是说当在树节点上点击右键的时候,会调用viewRight方法

因为在dhtmlxtree中定义右键菜单,我始终没有弄出来,所以最后放弃使用这个工具

好了,在帖下后台的代码,如下

java 代码

/**
     * 初始化root表显示根节点使用dhtmlTree
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     */
    public ActionForward init(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response){
        FtpRootPathService ftpRootPathService = (FtpRootPathService)this.getWebApplicationContext().getBean("ftpRootPathService");
        OrganizationService organizationService = (OrganizationService)this.getWebApplicationContext().getBean("organizationService");
//      List list = organizationService.getRootOrgs();
//--- 测试数据开始
        List list = new ArrayList();
//      TreeBean bean = new TreeBean();
//      bean.setId("1");bean.setName("机构1");bean.setCount("10");
//      list.add(bean);
//      TreeBean bean2 = new TreeBean();
//      bean2.setId("2");bean2.setName("机构2");bean2.setCount("0");
//      list.add(bean2);
//      TreeBean bean4 = new TreeBean();
//      bean4.setId("3");bean4.setName("机构4");bean4.setCount("3");
//      list.add(bean4);
//--- 测试数据结束
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");
        try {
            System.out.println(createDHTMLXML("0",list));
            response.getWriter().print(createDHTMLXML("0",list));//dhtmlxTree方式
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
    /**
     * 展开子节点处理
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     */
    public ActionForward open(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response){
        FtpRootPathService ftpRootPathService = (FtpRootPathService)this.getWebApplicationContext().getBean("ftpRootPathService");
        OrganizationService organizationService = (OrganizationService)this.getWebApplicationContext().getBean("organizationService");
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");

        String id = request.getParameter("id");
        //根据上一级节点,查询该节点下的所有节点及再下一级节点总个数
        List orgList = organizationService.getOrgChilds(id);

//      StringBuffer sb = new StringBuffer();
//      sb.append("<?xml version='1.0' encoding='utf-8'?>\n");
//      sb.append("<tree id=\""+id+"\">\n");
//          for(int i=0;i<4;i++){
//              sb.append("<item text=\""+id+"_"+i+"\" id=\""+id+"_"+i+"\" im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\" child=\"1\"></item>\n");
//          }
//      sb.append("</tree>");
        try {
            System.out.println(createDHTMLXML(id,orgList));
            response.getWriter().print(createDHTMLXML(id,orgList));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

/**
     * 生成dhtmlTree的xml文件
     * @param rootList
     * @return
     */
    public String createDHTMLXML(String id,List rootList){
        StringBuffer buffer = new StringBuffer();
        buffer.append("<?xml version='1.0' encoding='utf-8'?>\n<tree id=\""+id+"\">\n");
        for(int i=0;i<rootList.size();i++){
            TreeBean bean = (TreeBean)rootList.get(i);
            //添加主目录
            buffer.append("\t<item text=\""+bean.getName()+"\" id=\""+bean.getId()+"\" im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\" ");
                //判断是否有子节点,有的话,虚拟一个,强制页面显示有子节点样式
            if(!bean.getCount().equals("0")){
                buffer.append(" child=\"1\"");
            }
            buffer.append(">\n");
            buffer.append("\t</item>\n");
//          buffer.append("<item text="+id+"_"+i+" id="+id+"_"+i+"  im0=\"books_close.gif\" im1=\"tombs.gif\" im2=\"tombs.gif\"></item>");
        }
        buffer.append("</tree> ");
        return buffer.toString();
    }

结语:如果哪位高手在dhtmlxtree中加入了右键菜单,还望不吝赐教