Jquery树形插件--应用举例

最近呢，项目中用到了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层
@Service
public class OrganizationServiceImpl implements IOrganizationService {
@Autowired
private OrganizationDao organizationDao;

@Override
public Organization searchOrg(Organization organization) throws Exception {
// TODO Auto-generated method stub
return organizationDao.searchOrg(organization);
}

@Override
public List<Organization> searchOrgList(Organization organization) throws Exception {
// TODO Auto-generated method stub
return organizationDao.searchOrgList(organization);
}

@Override
public List<Organization> searchRootList() throws Exception {
// TODO Auto-generated method stub
return organizationDao.searchRootList();
}

@Override
public List<Organization> searchSonList(Long parentId) throws Exception {
// TODO Auto-generated method stub
return 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.结束语：

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