zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
在做项目的时候，我们经常能用到zTree，但是，有的时候，因为树数据过多，而导致树加载很慢，测试超过10000条数据就要加载3秒左右，如果有更多的数据，那用户的体验会是一个什么样子？
今天也是在做项目的时候遇到这个问题，也就来做下笔记！
第一步当然是去查询我们需要的树数据了，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格式数据。
@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 字符串就拼接出来了，下一步，就是要在页面进行显示！
<!-- 树显示的位置 --> <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>文章来源: zTree树加载慢的解决方法-使用异步加载