主要有基础参数和 数据源属性
layui 官方文档:https://www.layui.com/doc/modules/tree.html
后台获取数据源,方法
调用获取tree需要的数据源:
//查询所有的最顶级菜单 List<Menu> childrenMenus = menuServiceImpl.list(new QueryWrapper<Menu>().isNull("parent_id")); List<JSONObject> jsonObjects = menuServiceImpl.menuData(childrenMenus);
前段layui,js
public List<JSONObject> menuData(List<Menu> rootMenus) { JSONObject jsonObject = new JSONObject(); List<JSONObject> l1 = new ArrayList<>(); for (Menu menu : rootMenus) { jsonObject = new JSONObject(); Integer menuId = menu.getId(); jsonObject.put("id", menuId); jsonObject.put("spread",true);//是否展开。 //jsonObject.put("checked",true);//是否初始为选中状态,默认false jsonObject.put("title", menu.getName()); List<Menu> childrenMenus = list(new QueryWrapper<Menu>().eq("parent_id", menuId)); //jsonObject.put("href", menu.getAttributes().get("href"));//rr.getAttributes() if (!CollectionUtils.isEmpty(childrenMenus)) { List<JSONObject> lss = menuData(childrenMenus); jsonObject.put("children", lss); } l1.add(jsonObject); } return l1; }
/***************************** 分配权限 ***********************************/ layui.use('tree', function(){ var tree = layui.tree; const datas = [[${treeData}]];//这里使用的前端模板是thymeleaf //渲染 var inst1 = tree.render({ elem: '#tree' //绑定元素 ,data:datas //,edit:['add','update', 'del'] ,accordion: false //是否开启手风琴模式,默认 false ,showLine:true //是否开启连接线,默认为true,为false 文件夹左边出现三角符号 ,text: { defaultNodeName: '未命名' //节点默认名称 ,none: '无数据' //数据为空时的提示文本 } ,showCheckbox: true //是否显示复选框 ,click: function(obj){ console.log(obj.data); //得到当前点击的节点数据 console.log(obj.state); //得到当前节点的展开状态:open、close、normal console.log(obj.elem); //得到当前节点元素 console.log(obj.data.children); //当前节点下是否有子节点 } ,oncheck: function(obj){//复选框点击的回调 console.log(obj.data); //得到当前点击的节点数据 console.log(obj.checked); //得到当前节点的展开状态:open、close、normal console.log(obj.elem); //得到当前节点元素 } }); });
扫描二维码关注公众号,回复:
9332939 查看本文章