zTree树加载
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
在做项目的时候,我们经常能用到zTree,但是,有的时候,因为树数据过多,而导致树加载很慢,测试超过10000条数据就要加载3秒左右,如果有更多的数据,那用户的体验会是一个什么样子?
今天也是在做项目的时候遇到这个问题,也就来做下笔记!
1、查询数据
第一步当然是去查询我们需要的树数据了,SQL的写法如下:
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public List<User> findUserList(String areaCode) {
//这里判断是不是第一次进来,如果是,赋给他顶级节点的ID
if(StringUtils.isEmpty(areaCode)) {
areaCode = "620000";
}
StringBuilder sql = new StringBuilder();
sql.append("SELECT * FROM USER WHERE PART_ID = '" + areaCode + "'");
//判断是否为第一次进来,如果是第一次,则查询顶级节点和下一级节点,如果不是,则只查询当前areaCode的子节点
if("620000".equals(areaCode)) {
sql.append(" OR ID = '620000'");
}
List<User> list = jdbcTemplate.query(sb.toString(), new Object[] {},new BeanPropertyRowMapper<User>(User.class));
return list;
}
根据以上的实现层,我们可以拿到数据的list集合,然后就是去拼接ztree需要的json格式数据。
2、拼接 JSON 字符串
@Autowired
private UserService userService;
//Controller层,推荐使用post
@RequestMapping(value = "/zTree", method = RequestMethod.POST)
public void areaTree(HttpServletRequest request, HttpServletResponse response) {
//获取异步加载的条件ID
String areaCode = request.getParameter("id");
try {
//获取查询到的数据
List<User> list = userService.findUserList(areaCode);
List<Map<String,String>> ztree = new ArrayList<Map<String, String>>();
if (list != null && !list.isEmpty()) {
int a = 0;
//循环list 进行拼接 json 串
for (User user : list) {
a++;
String id = String.valueOf(user.getId());
String pId = String.valueOf(user.getPartId());
Map<String, String> map = new HashMap<String, String>();
map.put("id", id);
map.put("pId",pId);
//这里可以根据自己的业务去筛选那些数据为父节点,那些为子节点
if(id.substring(id.length()-3, id.length()).equals("000")
{
map.put("isParent","true");//父节点
}else {
map.put("isParent","false");//子节点
}
map.put("name", user.getName());
map.put("title", user.getName());
map.put("viewtype", "1");
map.put("regiontype", "1");
if(a==1) {
map.put("open", "true");//是否展开
}else {
map.put("open", "false");
}
ztree.add(map);
}
}
JSONArray array = JSONArray.fromObject(ztree);
String json = array.toString();
} catch (Exception e) {
e.printStackTrace();
}
}
这样,我们需要的 json 字符串就拼接出来了,下一步,就是要在页面进行显示!
3、页面进行展示
<!-- 树显示的位置 -->
<ul id="ztree" class="ztree"></ul>
<!-- 相关js和css引入省略 -->
<script>
$(function() {
//初始化树菜单
zTree = $.fn.zTree.init($("#ztree"), setting);
});
var zTree;
var setting = {
async: {
enable: true,
type:"post",
dataType:'json',
url:"/zTree",//我们之前写的Controller的地址
//此处的id就是节点的id,每次点击之后,会自动根据节点的id去查询节点下的数据,此处写什么,在Controller中获取的name名称就是什么。
//例如 String areaCode = request.getParameter("id");
autoParam:["id"]
},
callback: {
onClick: zTreeOnClick, //树点击事件
onAsyncSuccess: zTreeOnAsyncSuccess //树延迟加载事件
},
view:{
dblClickExpand: false,
showIcon: false, //树菜单的icon图标
},
data: {
simpleData: {
enable: true
}
}
};
var firstAsyncSuccessFlag = 0;
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
var arry = eval(msg);
var sumProject=0;
if (arry.length > 0 && arry[0].res_level=="1") {
for (var i = 0; i < arry.length; i++) {
sumProject += parseInt(arry[i].sumProject);
}
}
if (firstAsyncSuccessFlag == 0) {
try {
//调用默认展开第一个结点
var selectedNode = zTree.getSelectedNodes();
var nodes = zTree.getNodes();
zTree.expandNode(nodes[0], true);
firstAsyncSuccessFlag = 1;
} catch (err) {}
}
}
//点击左侧树
function zTreeOnClick(e, treeId, treeNode){
//点击左侧树的ID
var areaCode = treeNode.id;
//点击左侧树的逻辑处理
}
</script>