EasyUI-SpringMVC + EasyUI 异步树 (可借鉴)
2015-10-30 13:26
525 查看
关于异步树以前用过:Struct2 + JQuery Ztree,最新项目需要用 SpringMVC + EasyUI 生成异步树,玩了一下,特将解决方法汇报如下:
首先,使用是EasyUI的Tree组件,官网Demo提供的异步树示例是PHP版本的,参考意义不大,
URL为:http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem= ,有兴趣的也可以看下。
下面开始分析业务:
业务场景:
如上,学校下面存在年级、年级下面存在班级,默认加载所有的学校,点击单个学校后,方才异步加载该学校的所有年级,点击年级后,方才加载班级。
js / jsp文件:
[javascript] view plaincopy
<ul id="gcttree" data-options="animate:true,lines:true"></ul>
[html] view plaincopy
$('#gcttree').tree({
//异步树
url: basePath + '/school/list_school_gct,
onBeforeExpand: function(node){
if(node){
// change the url combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;
// currentId: 当前节点id currentType: 当前节点类型
$('#gcttree').tree('options').url = basePath + "/school/list_school_gct?currentId=" + node.id + "currentType=" + node.attributes.type;
}
}
});
(注意:combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;)
这里用到了,Tree组件的onBeforeExpand事件(API:http://www.jeasyui.com/documentation/index.php)
也即每次展开一个节点之前调用该事件,这个和上面的业务分析很契合,点击学校触发异步生成年级树,点击年级触发异步树生成班级树。
controller层:
[java] view plaincopy
/**
* 获取学校、年级、班级列表(异步树)
*
* @param request
* @return json数据
*/
@RequestMapping(value = "/list_school_gct")
@ResponseBody
public List<Map<String, Object>> listSchoolGCT(HttpServletRequest request)
{
List<Map<String, Object>> list = null;
try
{
// 当前节点id
String currentId = request.getParameter("currentId");
// 当前节点类型
String currentType = request.getParameter("currentType");
list = schoolService.treeData(currentId ,currentType);
} catch (Exception e)
{
logger.error(e);
}
return list;
}
service / dao 层:
[java] view plaincopy
/**
* 获取树状数据(组装tree所用 异步树)
*
* @param currentId 当前节点id
* @param currentType 当前节点类型 school=学校 grade=年级 class=班级
*
* @return 学校、年级、班级树
*/
public List<Map<String, Object>> treeData(String currentId, String currentType)
{
List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();
Map<String, String> attr = null;
// 如果当前节点类型为空 则是第一次加载 即需要加载学校json
if(StringUtils.isEmpty(currentType))
{
// 查询所有的学校
list = ischoolDao.treeData();
for (Map<String, Object> school : list)
{
attr = new HashMap<String, String>();
attr.put("type", "school");
school.put("attributes", attr);
//注意此时学校节点要关闭,方能触发onBeforeExpand事件
school.put("state", "closed");
}
}
// 如果当前节点类型为学校 则异步加载年级json
else if(StringUtils.equals("school", currentType))
{
// 根据学校id查询班级
list= igradeDao.listData(currentId);
if(!CollectionUtils.isEmpty(list))
{
for (Map<String, Object> grade : list)
{
attr = new HashMap<String, String>();
attr.put("type", "grade");
grade.put("attributes", attr);
//注意此时年级节点要关闭,方能触发onBeforeExpand事件
grade.put("state", "closed");
}
}
}
// 如果当前节点类型为年级 则异步加载班级json
else if(StringUtils.equals("grade", currentType))
{
// 根据年级id查询班级
list = iclassDao.listData(currentId);
if(!CollectionUtils.isEmpty(list))
{
for (Map<String, Object> classs : list)
{
attr = new HashMap<String, String>();
attr.put("type", "class");
classs.put("attributes", attr);
}
}
}
return list;
}
dao的sql很简单,就是select where语句,不再赘述。
生成的Tree如图:
交互过程(可以看到每次的请求交互以及返回的json):
综上,汇报完毕,核心就是onBeforeExpand事件的运用和service层的业务逻辑处理。
首先,使用是EasyUI的Tree组件,官网Demo提供的异步树示例是PHP版本的,参考意义不大,
URL为:http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem= ,有兴趣的也可以看下。
下面开始分析业务:
业务场景:
如上,学校下面存在年级、年级下面存在班级,默认加载所有的学校,点击单个学校后,方才异步加载该学校的所有年级,点击年级后,方才加载班级。
js / jsp文件:
[javascript] view plaincopy
<ul id="gcttree" data-options="animate:true,lines:true"></ul>
[html] view plaincopy
$('#gcttree').tree({
//异步树
url: basePath + '/school/list_school_gct,
onBeforeExpand: function(node){
if(node){
// change the url combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;
// currentId: 当前节点id currentType: 当前节点类型
$('#gcttree').tree('options').url = basePath + "/school/list_school_gct?currentId=" + node.id + "currentType=" + node.attributes.type;
}
}
});
(注意:combotree请使用 $('#tree').combotree("tree").tree("options").url = newUrl;)
这里用到了,Tree组件的onBeforeExpand事件(API:http://www.jeasyui.com/documentation/index.php)
onBeforeExpand | node | Fires before node is expanded, return false to cancel this expand action. |
controller层:
[java] view plaincopy
/**
* 获取学校、年级、班级列表(异步树)
*
* @param request
* @return json数据
*/
@RequestMapping(value = "/list_school_gct")
@ResponseBody
public List<Map<String, Object>> listSchoolGCT(HttpServletRequest request)
{
List<Map<String, Object>> list = null;
try
{
// 当前节点id
String currentId = request.getParameter("currentId");
// 当前节点类型
String currentType = request.getParameter("currentType");
list = schoolService.treeData(currentId ,currentType);
} catch (Exception e)
{
logger.error(e);
}
return list;
}
service / dao 层:
[java] view plaincopy
/**
* 获取树状数据(组装tree所用 异步树)
*
* @param currentId 当前节点id
* @param currentType 当前节点类型 school=学校 grade=年级 class=班级
*
* @return 学校、年级、班级树
*/
public List<Map<String, Object>> treeData(String currentId, String currentType)
{
List<Map<String, Object>> list = new LinkedList<Map<String, Object>>();
Map<String, String> attr = null;
// 如果当前节点类型为空 则是第一次加载 即需要加载学校json
if(StringUtils.isEmpty(currentType))
{
// 查询所有的学校
list = ischoolDao.treeData();
for (Map<String, Object> school : list)
{
attr = new HashMap<String, String>();
attr.put("type", "school");
school.put("attributes", attr);
//注意此时学校节点要关闭,方能触发onBeforeExpand事件
school.put("state", "closed");
}
}
// 如果当前节点类型为学校 则异步加载年级json
else if(StringUtils.equals("school", currentType))
{
// 根据学校id查询班级
list= igradeDao.listData(currentId);
if(!CollectionUtils.isEmpty(list))
{
for (Map<String, Object> grade : list)
{
attr = new HashMap<String, String>();
attr.put("type", "grade");
grade.put("attributes", attr);
//注意此时年级节点要关闭,方能触发onBeforeExpand事件
grade.put("state", "closed");
}
}
}
// 如果当前节点类型为年级 则异步加载班级json
else if(StringUtils.equals("grade", currentType))
{
// 根据年级id查询班级
list = iclassDao.listData(currentId);
if(!CollectionUtils.isEmpty(list))
{
for (Map<String, Object> classs : list)
{
attr = new HashMap<String, String>();
attr.put("type", "class");
classs.put("attributes", attr);
}
}
}
return list;
}
dao的sql很简单,就是select where语句,不再赘述。
生成的Tree如图:
交互过程(可以看到每次的请求交互以及返回的json):
综上,汇报完毕,核心就是onBeforeExpand事件的运用和service层的业务逻辑处理。
相关文章推荐
- Mybatis中javaType和jdbcType对应和CRUD例子
- Java模板引擎FreeMarker系列之十二freemarker大于,小于 gt,lt 的用法
- Java模板引擎FreeMarker系列之十一list下标、索引、长度、初始元素、最后一个元素的获取及应用
- Java模板引擎FreeMarker系列之九Freemarker的内置函数及用法
- Java模板引擎FreeMarker系列之八FreeMarker模板包含及名称空间
- Java模板引擎FreeMarker系列之七FreeMarker四种变量的用法
- Java模板引擎FreeMarker系列之六FreeMarker自定义指令
- Java模板引擎FreeMarker系列之五FreeMarker集合(List、Map)
- Java模板引擎FreeMarker系列之四FreeMarker基本数据类型
- Java模板引擎FreeMarker系列之三FreeMarker基本标签的使用
- Java模板引擎FreeMarker系列之二helloword
- Java模板引擎FreeMarker系列之一.MyEclipse安装FreeMarker插件
- 20.Struts2中的ModelDriven机制及其运用
- Spring系列之外在化应用参数的配置-context:property-placeholder元素
- Java基础知识系列之范型
- Java设计模式之单例模式
- Java设计模式之代理模式
- Java设计模式系列之访问者模式
- Java设计模式系列之策略模式
- Java设计模式系列之解释器模式