转载自http://cn-arthurs.iteye.com/blog/351456
我之前发布的dhtmltree总结因为页面问题,看起来很不爽,再次做一下更新,希望大家看起来更方便
最近有一个项目需要做到无限级树型菜单,而且要实现右键的功能,经别人的介绍,我接触到了dhtmlxtree,虽然最后并没有使用它,但是我想以后会有机会用的
在官方给出的例子中,加载一个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 & 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的字符串,发送到页面,有页面进行接收处理
在页面中的显示如下
- <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 language="javascript">
- tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
- tree.setImagePath("../../images/csh_bluebooks/");
- tree.setXMLAutoLoading("tasklist.do");//如果不加的话就会不现实有下级菜单
- tree.loadXML("tasklist.do?id=<%=id%>");
- function tondblclick(id){
- id=tree.getSelectedItemId();
- //window.location="searchByStype.do?stype=id";
- window.parent.main.location="taskright.do?id="+id;
- }
- tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件
- function add(){
- if(tree.getSelectedItemId()==""){
- alert("请选中父任务进行添加");
- return false;
- }
- window.parent.main.location="taskadd.do?id="+tree.getSelectedItemId();
- }
- function update(){
- if(tree.getSelectedItemId()==""){
- alert("请选中任务进行修改");
- return false;
- }
- window.parent.main.location="taskupdate.do?id="+tree.getSelectedItemId();
- }
- function update1(){
- if(tree.getSelectedItemId()==""){
- alert("请选中任务进行修改");
- return false;
- }
- window.parent.main.location="taskupdate1.do?id="+tree.getSelectedItemId();
- }
- function del(){
- if(tree.getSelectedItemId()==""){
- alert("请选中任务进行删除");
- return false;
- }
- if(confirm('确定要删除吗?'))
- {
- window.parent.main.location="taskdel.do?id="+tree.getSelectedItemId();
- }
- }
- function add1(){
- window.parent.main.location="taskadd.do?id=<%=id%>";
- }
- function add2(id){
- tree._xopenAll(tree._globalIdStorageFind(id));
- }
- function add3(id){
- //tree.refreshItem(id); //刷新指定节点
- window.location.reload();
- }
- function opentiems(itemId){
- tree.openAllItems(0);
- }
- function cltime(){
- tree.closeAllItems(0);
- }
- </script>
这里的tree.loadXML说的明白一点,就是页面第一次打开的时候,访问的请求
tree.setXMLAutoLoading是展开树发送的请求
大家还可以通过查看API定义一些事件处理如:
tree.setOnDblClickHandler(tondblclick);//设置tree的双击事件
台的代码如下:
- public ModelAndView handleRequest(HttpServletRequest request,
- HttpServletResponse response) throws Exception {
- HttpSession session=request.getSession();
- UserVo user=(UserVo)session.getAttribute("user");
- String id =request.getParameter("id");
- String[] ids=id.split("_");
- String pid=ids[0];
- String fid=ids[1];
- response.setContentType("text/xml;charset=UTF-8");
- response.setHeader("Cache-Control","no-cache");
- StringBuffer sb = new StringBuffer();
- sb.append("<?xml version='1.0' encoding='utf-8'?>\n");
- if(fid.equals("0"))
- {
- id="0";
- }
- sb.append("<tree id=\""+id+"\">\n");
- List list = projectService.gettreexml(pid, fid);
- for(int i=0;i<list.size();i++){
- PmenuVo bean = (PmenuVo)list.get(i);
- sb.append("\t<item");
- if(!bean.getSum().equals("0")){
- sb.append(" child='1' open ='1'");
- }
- String id11=pid+"_"+bean.getId();
- sb.append(" id='"+id11+"' text='"+bean.getTaskname().trim()+"'>\n");
- sb.append("\t</item>\n");
- }
- sb.append("</tree> ");
- try {
- response.getWriter().print(sb.toString());
- } catch (IOException e) {
- e.printStackTrace();
- }
- return null;
- }