表单页的树控件

创建数据传输对象

package com.ooqiu.gaming.server.web.admin.dto;

import lombok.Data;

import java.io.Serializable;

/**
 * 前端树控件
 * <p>Title: TreeView</p>
 * <p>Description: </p>
 *
 * @author Lusifer
 * @version 1.0.0
 * @date 2018/3/2 3:48
 */
@Data
public class TreeView implements Serializable {
    private String id;
    private String icon;
    private String text;
    private boolean children;
}

定义数据查询接口

/**
 * 根据父 ID 查询子类目
 * @param pid
 * @return
 */
public List<Channel> selectByPid(Long pid);

实现数据查询接口

@Override
public List<Channel> selectByPid(Long pid) {
    if (pid == null) {
        pid = 0L;
    }

    Example example = new Example(Channel.class);
    example.createCriteria().andEqualTo("pid", pid);

    return channelMapper.selectByExample(example);
}

控制器代码

/**
 * 获取频道树结构
 *
 * @param pid
 * @return
 */
@ResponseBody
@RequestMapping(value = "tree", method = RequestMethod.GET)
public List<TreeView> tree(String pid) {
    List<TreeView> list = Lists.newArrayList();

    if (StringUtils.isBlank(pid) || "#".equals(pid)) {
        pid = "0";
    }

    List<Channel> channels = channelService.selectByPid(Long.parseLong(pid));
    for (Channel channel : channels) {
        TreeView treeView = new TreeView();
        treeView.setId(String.valueOf(channel.getId()));
        treeView.setIcon("");
        treeView.setText(channel.getName());
        treeView.setChildren(channel.getIsParent().equals("0"));
        list.add(treeView);
    }

    return list;
}

JS 代码

var TreeView = function () {

    /**
     * 初始化树
     * @param id 树节点 ID
     * @param url 远程树结构请求地址
     */
    var handlerInitTree = function (id, url) {
        $("#" + id).jstree({
            "core": {
                "themes": {
                    "responsive": false
                },
                "check_callback": true,
                'data': {
                    'url': function (node) {
                        return url;
                    },
                    'data': function (node) {
                        return {"pid" : node.id};
                    }
                }
            },
            "types": {
                "default": {
                    "icon": "fa fa-folder m--font-brand"
                },
                "file": {
                    "icon": "fa fa-file  m--font-brand"
                }
            },
            "plugins": ["dnd", "state", "types"]
        });

        $('#' + id).bind("activate_node.jstree", function (obj, e) {
            var currentNode = e.node;

            $("#pid").val(currentNode.id);
            $("#pidText").val(currentNode.text);
        });
    };

    return {
        init: function (id, url) {
            handlerInitTree(id, url);
        }
    }
}();

JS 调用

<script>
    $(function () {
       TreeView.init("m_tree_1", "/channel/tree");
    });
</script>

对应的 HTML 节点

<div id="m_tree_1" class="tree-demo"></div>

效果图