今天就来写一下异步加载,如何加载出一棵树来,效果图虽然不是原图,但差不多就是这个效果:
我用的是ssm框架写的,dao方法如下:
@ResultMap(value = "sqlStusMap")
public List<Store_management>query4Lists(@Param("paramMap")Map<String,Object> map);
其对应的xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zking.dao.Ztreedao">
<resultMap type="com.zking.entity.Store_management" id="sqlStusMap">
<id property="mstore_sid" column="mstore_sid" />
<result property="mstore_id" column="mstore_id" />
<result property="mstore_name" column="mstore_name"/>
<result property="mstore_url" column="mstore_url" />
</resultMap>
<select id="query4Lists" resultMap="sqlStusMap" parameterType="map">
select * from store_management where 1=1
<foreach collection="paramMap" item="v" index="key">
and ${key} = #{v}
</foreach>
</select>
</mapper>
其次是control层:
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.zking.dao.Ztreedao;
import com.zking.entity.Product_info;
import com.zking.entity.Store_management;
import com.zking.entity.User;
import com.zking.utils.zTreeVo;
import org.springframework.util.StringUtils;
@Controller
@RequestMapping("/front/*")
public class front_tree_controller {
@Autowired
Ztreedao zd;
//加载树
@RequestMapping("loadztree.xhtml")
public @ResponseBody List<zTreeVo> getZtree(HttpServletRequest request){
Map<String, Object> map=new HashMap<String, Object>();
String pid=request.getParameter("id");
if (StringUtils.isEmpty(pid)) {
pid="0";
}
map.put("mstore_sid", pid);
List<Store_management> myls=zd.query4Lists(map);
List<zTreeVo> listtree=new ArrayList<zTreeVo>();
for (Store_management zTree: myls) {
zTreeVo vo=new zTreeVo();
Map<String, Object> maps=new HashMap<String, Object>();
maps.put("mstore_sid",zTree.getMstore_sid());
List<Store_management> mys=zd.query4Lists(maps);
if(mys!=null){
if(mys.size()>0){
vo.setParent(true);
}
vo.setPid(zTree.getMstore_sid());
vo.setFun(zTree.getMstore_url());
vo.setId(zTree.getMstore_id());
vo.setName(zTree.getMstore_name());
//加入集合vo类
listtree.add(vo);
}
}
return listtree;
}
}
注意:加载树需要写个vo类。
jsp:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="/static/js/jquery.ztree.core.js"></script>
<link rel="stylesheet" href="/static/css/zTreeStyle.css"
type="text/css">
<link href="/static/css/MyzTree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="/static/js/left.js"></script>
<script type="text/javascript"
src="/static/js/tabs.js"></script>
</head>
<body style="background: #f0f9fd;">
<div class="lefttop">
<span></span><a href="/front/index.xhtml" target="rightFrame">Hello
Word</a>
</div>
<dl class="leftmenu">
<dd>
<!-- <div class="title" >
<span><img src="/static/images/leftico01.png" /></span>管理信息
</div> -->
<ul class="ztree" id="treeDemo"></ul>
</dd>
</dl>
</body>
</html>
好了,写完了