ZTree的简单使用

最新推荐文章于 2019-08-27 19:04:09 发布

车轮衮衮

最新推荐文章于 2019-08-27 19:04:09 发布

阅读量444

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_42806764/article/details/86511507

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

zTree的简单使用,示例是基于bootstrap的
需要的数据格式如下,后台传输的时候封装一个VO,格式如下传值的传个List 泛型内的类型就是VO
在这里插入图片描述
ServiceImpl实现

@Override
public List<TreeVO> getTree() {

    //1.查询到所有的
    List<Product> list1=productMapper.findAll();
    //2.新增一个list
    ArrayList<TreeVO> listTreeVO = new ArrayList<>();
    for (Product p1:list1) {
        TreeVO tree=new TreeVO();
        tree.setId(p1.getId());
        tree.setName(p1.getName());
        tree.setPid(p1.getPid());
        if(p1.getId().startsWith("2")){//id为2开始的都是三级节点 没有子节点了 treeVoparent属性改为false  生产中如何根据业务来
            tree.setParent(false);
        }
        listTreeVO.add(tree);
    }
    logger.info("查询成功!");
    //根节点 id为-1

   /* if(1==1){
        logger.error("测试@Controlleradvice用!!!");
        throw new RuntimeException("获取数据失败,你气不气?!");
    } */

    return listTreeVO;
}

Setting设置

var setting = {
    view: {
        selectedMulti: true
    },
    check: {
        enable: true,
    },
    data: {
        simpleData: {            //具体后台传什么格式的数据就看这里是如何定义的了
            enable: true,//是否采用简单数据模式
            idKey: "id",//树节点ID名称
            pIdKey: "pid",//父节点ID名称
            rootPId: -1,//根节点ID
        }
    }
};
$(function () {
  //加载后端构建的ZTree树（节点的数据格式已在后端格式化好了）
  $.ajax({
      url: 'url',
      type: 'get',
      dataType: "json",
      success: function(data) {
          console.log(data.data);
          $.fn.zTree.init($("#tree"), setting, data.data);//渲染节点时，添加同步获取的数据,第一个参数表单内的dom
      },                                                  //元素,第二个加载配置,第三个需要展现为节点的数据
      error: (data) => {
          alert(data.msg);
      }
  });
});

在这里插入图片描述