Jquery树形插件--应用举例

来源：互联网发布：数据库优化面试题编辑：程序博客网时间：2024/06/06 17:24

最近呢，项目中用到了JQuery树形控件，觉得挺神奇，在这里记录一下，以便于下次再用到了方便温习。

JQuery各种树形插件的简介见文章末尾的附录，这里首先讲一个简单实际的例子。

1,View层

需要加载的各种js，css

<!-- 加载jquery --><script src="${basePath}/resources/dynatree/jquery/jquery.min.js" type="text/javascript" ></script><script src='${basePath}/resources/dynatree/jquery/jquery.cookie.js' type="text/javascript"></script><script src='${basePath}/resources/dynatree/jquery/jquery.contextMenu-custom.js' type="text/javascript"></script><script src='${basePath}/resources/dynatree/jquery/jquery-ui.custom.js' type="text/javascript"></script><script src='${basePath}/resources/dynatree/src/jquery.dynatree.js' type="text/javascript"></script><link rel='stylesheet' type='text/css' href='${basePath}/resources/dynatree/jquery/jquery-ui-1.10.0.custom.min.css' /><link rel='stylesheet' type='text/css' href='${basePath}/resources/dynatree/jquery/jquery.contextMenu.css' /><link rel='stylesheet' type='text/css' href='${basePath}/resources/dynatree/src/skin-vista/ui.dynatree.css' /><script src="${basePath}/resources/js/organList.js" type="text/javascript"></script>

树的切入点

2 js

//-----调用dynatree，实现分类树    $("#tree").dynatree({    title: "机构树管理",    fx: { height: "toggle", duration: 1000 },autoFocus: false, // Set focus to first child, when expanding or lazy-loading.// --- 初始化树<根节点>initAjax: {url: "getRootAsJson",        data: { mode: "funnyMode" }},onClick: function(node, event) {// Close menu on click        if( $(".contextMenu:visible").length > 0 ){          $(".contextMenu").hide();//          return false;        }},/*Bind context menu for every node when it's DOM element is created.    We do it here, so we can also bind to lazy nodes, which do not    exist at load-time. (abeautifulsite.net menu control does not    support event delegation)*/    onCreate: function(node, span){      bindContextMenu(span);    },        //--- 延迟加载子节点    onLazyRead: function(node){    node.appendAjax({    url: "getSonAsJson",    data: {    key: node.data.key    }    });    }    });          //通过路径 展开/选中 节点    $("#btnLoadKeyPath").click(function(){      var tree = $("#tree").dynatree("getTree");      // Make sure that node #_27 is loaded, by traversing the parents.      // The callback is executed for every node as we go:      tree.loadKeyPath("/000015/000015004/", function(node, status){        if(status == "loaded") {          // 'node' is a parent that was just traversed.          // If we call expand() here, then all nodes will be expanded          // as we go          node.expand();        }else if(status == "ok") {          // 'node' is the end node of our path.          // If we call activate() or makeVisible() here, then the          // whole branch will be exoanded now          node.activate();        }      });     });  });

3 控制层 Controller类

/** * 获取祖先<根>节点 * @throws Exception */@RequestMapping(value={"/getRootAsJson"})public String getRootAsJson() throws Exception{System.out.println("--------getRootAsJson() start-----");try{List<Map<String,Object>> menuList = new ArrayList<Map<String,Object>>();Map<String,Object> element = new LinkedHashMap<String,Object>();organizationList = organizationService.searchRootList();for(Organization org : organizationList){element.put("key", org.getId());element.put("title", org.getName());element.put("isFolder","true");element.put("isLazy", "true");element.put("description", org.getDescription());menuList.add(element);element = new LinkedHashMap<String,Object>();}sendAjaxResponse(menuList);return null;}catch(Exception e){e.printStackTrace();throw e;}finally{System.out.println("--------getRootAsJson() end-----");}}/** * 加载子节点 * @throws Exception */@RequestMapping(value={"/getSonAsJson"})public void getSonAsJson() throws Exception{System.out.println("--------getSonAsJson() start-----");try{List<Map<String,Object>> sonList = new ArrayList<Map<String,Object>>();Map<String,Object> element = new LinkedHashMap<String,Object>();long parentId = Long.parseLong(request.getParameter("key"));String noLazy = request.getParameter("noLazy");if("1".equals(noLazy)){return;}organizationList = organizationService.searchSonList(parentId);for(Organization org : organizationList){element.put("key", org.getId());element.put("title", org.getName());element.put("isFolder","true");element.put("isLazy", "true");element.put("description", org.getDescription());sonList.add(element);element = new LinkedHashMap<String,Object>();}sendAjaxResponse(sonList);}catch(Exception e){e.printStackTrace();throw e;}finally{System.out.println("--------getSonAsJson() end-----");}}

4 service层

@Servicepublic class OrganizationServiceImpl implements IOrganizationService {@Autowiredprivate OrganizationDao organizationDao;@Overridepublic Organization searchOrg(Organization organization) throws Exception {// TODO Auto-generated method stubreturn organizationDao.searchOrg(organization);}@Overridepublic List<Organization> searchOrgList(Organization organization) throws Exception {// TODO Auto-generated method stubreturn organizationDao.searchOrgList(organization);}@Overridepublic List<Organization> searchRootList() throws Exception {// TODO Auto-generated method stubreturn organizationDao.searchRootList();}@Overridepublic List<Organization> searchSonList(Long parentId) throws Exception {// TODO Auto-generated method stubreturn organizationDao.searchSonList(parentId);}}

5 Dao层

略

6.效果图

7 附录

附录是引用别人的内容,原贴地址：

http://www.cnblogs.com/eczhou/archive/2012/12/18/2823515.html

Jquery之树形插件

1、DynaTree (推荐使用，说明文档以及样例在下载的压缩包里\doc\samples.html)

DynaTree 是一个优化的动态jQuery树查看插件，它只在需要时才创建DOM元素。支持checkbox、层级选择以及拖放功能。并且支持ajax和延迟加载。开源协议：MIT和GPL。

Demo：http://wwwendt.de/tech/dynatree/doc/samples.html

下载地址：http://code.google.com/p/dynatree/

文档：http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

2、jsTree

JsTree是一个基于jQuery的Tree控件。支持HTML、JSON和XML等多种数据源。jsTree是所有jQuery树插件中功能最完善的。支持拖放、复制、删除、快捷键、多选、自定义节点图标、自定义右键菜单、跨页面保持状态等等。此外，它还支持主题功能，并自带有主题包。jsTree是完全免费的，遵循GNU许可。

Demo：http://www.jstree.com/demo

下载地址：http://www.jstree.com/

文档：http://www.jstree.com/documentation

Treeview

Treeview是另一个好用的轻量级jQuery树插件，该插件能够将无序列表转换成可展开与收缩的Tree，支持无限制扩展及动态添加菜单项。Treeview在MIT和GPL协议下开源。

Demo：http://jquery.bassistance.de/treeview/demo/

下载地址：http://github.com/jzaefferer/jquery-treeview

文档：http://docs.jquery.com/Plugins/Treeview

8.结束语：

谢谢大家，希望大家看完以后能有一个相对完整的思路！

0 0