Jquery插件 之 zTree树加载

原文链接：https://blog.csdn.net/jiaqu2177/article/details/80626730

zTree树加载

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

在做项目的时候，我们经常能用到zTree，但是，有的时候，因为树数据过多，而导致树加载很慢，测试超过10000条数据就要加载3秒左右，如果有更多的数据，那用户的体验会是一个什么样子？

今天也是在做项目的时候遇到这个问题，也就来做下笔记！

1、查询数据

@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>