精华内容
下载资源
问答
  • layui树形组件动态渲染
    2021-05-29 11:16:08
    前台页面HTML
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>Layui</title>
    		<meta name="renderer" content="webkit">
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
    		<script type="text/javascript" src="js/global.js"></script>
    		<script src="./layui/layui.js" charset="utf-8"></script>
    		<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    	</head>
    
    	<body>
    		<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
    			<label class="layui-form-label">ID:</label>
    			<div class="layui-input-inline" style="width: 350px">
    				<input type="text" name="id" id="userid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
    			</div>
    		</div>
    		</div>
    		<div id="demo" class="demo-tree-more"></div>
    		<div class="layui-form-item">
    			<div class="layui-input-block" style="margin-left:0;text-align:center;">
    				<button class="layui-btn layui-btn-blue" id="formDemo">确认选择</button>
    			</div>
    		</div>
    		<script>
    			layui.use(['tree'], function() {
    				$ = layui.$;
    				var tree = layui.tree;
    
    				function getReole() {
    					var userid = document.getElementById("userid").value; //当前角色的id
    					$.ajax({
    						url: globalData.server + "./Modules/getAllModulesss", //拿到所有模块
    						type: "post",
    						datatype: "json",
    						async: false,
    						data: {
    							"userId": userid //角色id传到后台
    						},
    						success: function(data1) {
    							tree.render({ //tree.render() 方法指定一个元素,便可快速创建一个 tree 实例
    								elem: '#demo', //传入元素选择器
    								showCheckbox: true, //是否显示复选框
    								data: data1, //获取节点数据
    								id: 'id', //定义索引 
    							});
    						},
    					});
    
    					$("#formDemo").click(function() { //提交
    						var checkData = tree.getChecked('id'); //获得选中的节点
    						if(checkData.length == 0) { //判断复选框是否被选中
    							layer.msg("请至少选择一个节点", {
    								icon: 6
    							});
    							return false;
    						} else {
    							var ids = [];
    							var chil = [];
    							for(var key in checkData) { //循环父节点
    								var node = checkData[key];
    								ids.push(node.id); //在父节点末尾添加一个或多个元素
    								chil = node.children; //获取子节点数组
    								for(var key in chil) { //循环子节点
    									var children = chil[key];
    									ids.push(children.id); //在子节点末尾添加一个或多个元素
    								}
    							}
    							$.ajax({
    								url: globalData.server + './ModulesRoles/addModuleByIdRoles', //根据角色id添加模块
    								type: "POST",
    								datatype: "json",
    								async: false,
    								data: {
    									"roleId": userid,
    									'ids': JSON.stringify(ids),
    								}, //传数据给后台
    								success: function(result) {
    									if(result.count > 0) {
    										layer.msg(result.msg, {
    											icon: 6
    										});
    										setTimeout(function() { //延迟加载
    											var index = parent.layer.getFrameIndex(window.name);
    											parent.layer.close(index); //关闭当前页
    										}, 2000);
    
    									} else {
    										layer.msg(result.msg, {
    											icon: 6
    										});
    									}
    								}
    							});
    						}
    					});
    
    				}
    				setTimeout(function() {//延迟加载
    					getReole();
    				}, 500);
    			});
    		</script>
    
    	</body>
    
    </html>
    
    实体类
    package com.crm.entity;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.crm.entity.Modules;
    
    import lombok.Data;
    
    //模块表
    @Data
    public class Modules {
    	private Integer id;//id
    	private String name;// 模块名称
    	private String title;// 这个字段数库没有 因为我们树形组件里的名称使用的是title,所以在这里建立了一个title,大家建数据库时建议写成title
    	private Boolean checked;// 是否选中 true   这个字段数库也是没有
    	private Integer parentId;//父模块编号
    	private String path;//模块路径
    	private String weight;//权重
    	private String one;// 预留
    	private String two;//预留
    	private List<Modules> children = new ArrayList<>();//用来存放子模块数据
    }
    
    
    服务层实现类代码
    //	树形组件获取所拥有的的菜单信息:,=true 勾选
    	@Override
    	public List<Modules> getAllModulesss(int userId) {
    		// TODO Auto-generated method stub
    		List<Modules> list = new ArrayList<>();
    		List<Modules> listss = new ArrayList<>();
    		list = modulesDao.getAllModulesAlls();// 获取所有
    		for (Modules modules : listss) {//默认checked都是false
    			modules.setChecked(false);
    		}
    		listss = modulesDao.getAllModuless(userId);// 根据用户获取用户拥有的菜单
    		List<Modules> treeNodes = new ArrayList<Modules>();//新建一个数组,用来存放最终数据
    		for (Modules treeNode : list) {// 循环所有菜单
    			for (Modules item : listss) {// 根据用户获取用户拥有的菜单
    				if (treeNode.getId() == item.getId()) {//相等证明被选中checked是true
    					treeNode.setChecked(true);// 根据用户获取用户拥有的菜单 去添加
    				}
    			}	
    		}
    		for (Modules treeNode : list) {// 循环菜单转换成菜单树
    			if (treeNode.getParentId() == 0 || treeNode.getParentId() == null) {//treeNode父级id=0或空证明是父模块
    				treeNodes.add(findChildren(treeNode, list));//把子模块添加到父模块中
    			}
    
    		}
    		for (Modules modules : treeNodes) {// 循环所有菜单
    			if (modules != null && modules.getChildren() != null && modules.getChildren().size() > 0) {
    				int i = 0;
    				for (Modules modules2 : modules.getChildren()) {// 循环选中的子模块判断是否被选中
    					if (modules2.getChecked() != null && modules2.getChecked() == true) {// 子模块被选中 i+1
    						i += 1;
    					}
    				}
    				if (i != modules.getChildren().size()) {// 判断是否和子模块是否全部选中
    					modules.setChecked(false);
    				}
    				i = 0;//i初始化
    			}
    
    		}
    		return treeNodes;
    	}
    	// 给父级菜单设置子级
    	public Modules findChildren(Modules treeNode, List<Modules> treeList) {
    		for (Modules item : treeList) {//对treeList进行循环
    			if (treeNode.getId() == item.getParentId()) {//判断treeNode中的id与item中的父级模块id是否相同,相等,判断treeNode子模块是否为空
    				if (treeNode.getChildren() == null) {
    				//为空把数据添加到子模块数组里
    					treeNode.setChildren(new ArrayList<Modules>());
    				}
    				treeNode.getChildren().add(findChildren(item, treeList));// 递推赋值
    			}
    		}
    		return treeNode;// 返回菜单树
    	}
    
    更多相关内容
  • layui树形组件渲染

    2022-05-18 20:33:17
    在我们做项目的时候常常都会遇到一些新的知识,老师也没讲过的一些知识,那这些知识就需要我们自己去寻找,今天,我要讲的就是在做项目的时候会出现的一个东西:树形组件 如下图所示: 这个组件如何实现呢? ...

    在我们做项目的时候常常都会遇到一些新的知识,老师也没讲过的一些知识,那这些知识就需要我们自己去寻找,今天,我要讲的就是在做项目的时候会出现的一个东西:树形组件

    如下图所示:

    这个组件如何实现呢?

    网上找?

    很正确!

    • 在网上找一个Layui官网,打开:

    里面就有我们想要的,但是也不完全是我们想要的( ̄. ̄)

    它只有一个简单的渲染:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>树组件</title>
    <link rel="stylesheet" href="../src/css/layui.css">
    </head>
    <body>
    <div id="test1"></div>
    <script src="../src/layui.js"></script>
    <script>
    layui.use('tree', function(){
    var tree = layui.tree;
    
    //渲染
    var inst1 = tree.render({
    elem: '#test1' //绑定元素
    ,data: [{
    title: '江西' //一级菜单
    ,children: [{
    title: '南昌' //二级菜单
    ,children: [{
    title: '高新区' //三级菜单
    //…… //以此类推,可无限层级
    }]
    }]
    },{
    title: '陕西' //一级菜单
    ,children: [{
    title: '西安' //二级菜单
    }]
    }]
    });
    });
    </script>
    </body>
    </html>

    我们要做的是一个连接数据库的树形渲染(•ω•)✧

    接下来就用我正在做的项目为你们讲解:

    二.首先创建一个关联的数据库:

    这是我的项目里面的数据库,做树形其实不用四个表,三个表足够了,只是我的项目还有一些功能要实现,正常来说下面几个表就可以了:

    三.数据库构建完成了,现在进入页面,在页面引入Layui的插件:

     

    一个是css插件,一个是js插件。

    四.插件引入完成,用一个div来接收渲染的树形:

    五.在<script>里面调用tree组件:

    //调用tree组件
    
    layui.use( 'tree', function () {
    
          tree = layui.tree;//组件赋值给变量
    
          $.post("selectPermissions", function (data) {//请求数据
    
                 //渲染
    
                 tree.render({
    
                      elem: '#InspectionItemTree',  //绑定元素
    
                      data: data,//返回的数据
    
                      accordion: true,//手风琴模式
    
                      onlyIconControl: true, //点击后不收缩
    
                      click: function (obj) {
    
                            console.log(obj.data); //得到当前点击的节点数据
    
                       }
    
                  });
    
           });
    
    });

    六.重点来了:下面就是控制器从数据库里面拿数据的代码:

     

    代码如下:

     

    #region 树形
    
            public ActionResult selectPermissions()
    
            {
    
                //调用获取数据方法从0(上级id)开始
    
                List<Dictionary<string, object>> data = GetTree(0);
    
                return Json(data, JsonRequestBehavior.AllowGet);
    
    
    
            }
    
            public List<Dictionary<string, object>> GetTree(int id)
    
            {
    
                //创建一个字典集合,第一个
    
                List<Dictionary<string, Object>> jsonoListfon = new List<Dictionary<string, object>>();
    
                //创建一个字
    
                Dictionary<string, object> jsontrue = new Dictionary<string, object>();
    
                jsontrue.Add("title", "住院信息一览表");
    
    
    
                //查询病区表
    
                var treeList = myModel.Ward.Select(m => m).ToList();
    
                //创建一个字典集合,第二个
    
                List<Dictionary<string, Object>> jsonoList = new List<Dictionary<string, object>>();
    
                //循环遍历
    
                foreach (Ward Wat in treeList)
    
                {
    
    
    
                    //创造字典,将所需要的字段和值填进
    
                    Dictionary<string, object> json = new Dictionary<string, object>();
    
    
    
                    json.Add("title", Wat.WardCode +  " "+ "("+ Wat.WardName + ")");//标题 病区名称
    
                    json.Add("id", Wat.WardID);//Id
    
    
    
                    var ade = (from tbAdmissionInformationSheet in myModel.AdmissionInformationSheet
    
                               join tbBedCope in myModel.BedCope on tbAdmissionInformationSheet.BedCopeID equals tbBedCope.BedCopeID
    
                               where tbBedCope.WardID == Wat.WardID
    
                               select tbAdmissionInformationSheet).ToList();
    
    
    
                    //创建一个字典集合,第三个
    
                    List<Dictionary<string, object>> jsonListDe = new List<Dictionary<string, object>>();
    
    
    
                    foreach (AdmissionInformationSheet ed in ade)
    
                    {
    
                        try
    
                        {
    
                            var Live = (from tbAdmissionInformationSheet in myModel.AdmissionInformationSheet
    
                                        join tbSickInformation in myModel.SickInformation on tbAdmissionInformationSheet.SickInformationID equals tbSickInformation.SickInformationID
    
                                        where tbSickInformation.SickInformationID == ed.SickInformationID
    
                                        select tbSickInformation).Single();
    
    
    
                            var Ben = (from tbBedCope in myModel.BedCope
    
                                       where tbBedCope.BedCopeID == ed.BedCopeID
    
                                       select tbBedCope).Single();
    
    
    
                            //创造字典,将所需要的字段和值填进
    
                            Dictionary<string, object> jsonde = new Dictionary<string, object>();
    
                            jsonde.Add("title", Live.PatientName + " (" + Ben.BedCopeNo + ") " +  Live.AdmissionNumber); //病人名称
    
                            jsonde.Add("id", Live.SickInformationID);
    
                            jsonListDe.Add(jsonde);//添加到第三个字典集合
    
                        }
    
                        catch (Exception)
    
                        {
    
                            //创造字典,将所需要的字段和值填进
    
                            Dictionary<string, object> jsonde = new Dictionary<string, object>();
    
                            jsonde.Add("title", "无数据");
    
                            jsonListDe.Add(jsonde);//添加到第三个字典集合
    
                        }
    
                    }
    
                    //把第三个字典集合放入第二个字典
    
                    json.Add("children", jsonListDe);
    
                    //将字典添加进第二个字典集合
    
                    jsonoList.Add(json);
    
                }
    
                jsontrue.Add("children", jsonoList);
    
                jsonoListfon.Add(jsontrue);
    
                return jsonoListfon;//返回字典集合
    
            }
    
            #endregion

    展开全文
  • 引入layui.js文件 ,然后加载 tree树形组件 ,这个需要的还是自行去官网下载 这里我用post提交数据的方式去后台请求数据, 当然,你也可以用其他方法, 能查询出数据就行 页面布局 控制器管理 首先定义一...

    首先得确保layui的版本为 layui 2.5.0 以上的版本 这个可以自行去官网下载

    引入layui.js文件 ,然后加载 tree树形组件 ,这个需要的还是自行去官网下载

    这里我用post提交数据的方式去后台请求数据, 当然,你也可以用其他方法,

    能查询出数据就行

    页面布局

     

    控制器管理

    首先定义一个变量 此变量的数据为layui.tree 组件 可以识别添加 的

    字段名称必须按照 layui 官方提供的来命名 ,当然你也 可以把官方的文件改了

    不推荐这么做,麻烦且不讨好

    1.创建一个新的类(放传递的数据)

    字段名称比需按照这里来写,否则就算后台有数据但也不会识别添加

    2.声明一个需要渲染的表,然后实例化新建的类

    3.用foreach 循环表的同时进行赋值

    二级表也是用这种方法,当然也可以继续渲染下去,用的都是相同的方法

    我这里用的是三级渲染,查询了三张表格进行赋值

    一级菜单的值没有用到渲染,所以我直接进行赋值

     

    这里第一个foreach循环用来循环第二张表 第二个循环第三张表

    由于我这里演示的不需要用到第二张表数据 所以没有进行赋值

    第二张表的作用为关系表 ,将我这里第一张表与第三张表进行关联的

    所有查询的数据必须相关联,查询方法就不多赘述

    控制器完整代码为

     具体使用情况根据 表数据分布情况来灵活变化 

    效果图

     

     

     

     

     

     

    展开全文
  • 今天小编就为大家分享一篇使用layui实现树形结构的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 修改渲染函数中的click点击事件! tree.render({ elem: "#test9", data: data1, edit: ["add", "update", "del"], //操作节点的图标 click: function(obj) { //节点高亮 var nodes = document....

    效果:

    代码:

    修改渲染函数中的click点击事件!

     

            tree.render({
              elem: "#test9",
              data: data1,
              edit: ["add", "update", "del"], //操作节点的图标
              click: function(obj) {
                //节点高亮
                var nodes = document.getElementsByClassName("layui-tree-txt");
                for (var i = 0; i < nodes.length; i++) {
                  if (nodes[i].innerHTML === obj.data.title){
                    nodes[i].style.color = "#006BF9"; 
                    nodes[i].style.fontWeight = "bold"; 
                  } else {
                    nodes[i].style.color = "#555";
                    nodes[i].style.fontWeight = "normal"; 
                  }
                }
              },
            });

     

    展开全文
  • </script> 6、完整 HTML 代码 demo.html <html> <head> <meta charset="utf-8"> <title>PHP递归函数 + Layui树形组件实现无限极分类title> <link rel="stylesheet" href="layui/dist/css/layui.css"> head...
  • Layui树形表格组件的实现

    千次阅读 2020-05-07 11:44:31
    一、Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用。 // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 layui.define(['table', 'util'], function(exports) ...
  • 基于layui封装的多选穿梭框,双列表互选框,树形组件可搜索
  • layui树形组件渲染SQL

    2021-11-08 08:40:34
    效果 2.页面布局 3.基本数据传递 ...*需要传递数据的格式为id、title、children等(SQL渲染数据时的控制器对应这里传递...*树形二级同时也使用foreach遍历分别赋值 6.(动态控制器完整代码为) 7...
  • 标题 如何利用递归来给layui树形组件绑定sqlServer递归表的数据? 上图是我的数据库内容 public ActionResult GetArea() { List<City> rootList = new List<City>(); foreach(var item in context....
  • layui树形组件懒加载实现及相关用法

    千次阅读 2019-11-28 10:58:37
    layui树形组件懒加载实现          工作中需要用到Layui前端框架,但使用过程中发现需要用到树形组件懒加载方式,可惜的是Layui仍未实现树形组件懒加载,网上大神们写了好多文章介绍但总...
  • layui提供了两种初始化节点选中状态的方式 ...layui树形组件此时无法重现用户的节点勾选情况了,怎么办? 这个时候就不能从前台的角度来解决问题了,因为layui树形组件的规则就是这样的。 二 通过数
  • layui 树形组件href在iframe中打开方式

    千次阅读 2019-11-30 12:11:31
    @Layui 快速使用 引入tree模块 ...渲染tree结构 在html中定义一个带有id的div <div id="tree"></div> 通过 tree.render() 方法指定一个元素,便可快速创建一个 tree 实例。 var inst...
  • /** * 跳转树形菜单页面 */ @RequestMapping("/toTree") public ModelAndView toTree(){ ModelAndView modelAndView=new ModelAndView(); modelAndView.setViewName("tree"); return modelAndView; } /** * 获取...
  • 渲染树状图时定义ID 方便获取树状图 我这里在外面加了一个文本框框 将需要查询的数据填写进去 然后点击查询 获取文本框内容 然后重载树形组件 重载的目的 是可以每次查询时就把树形组件收起来先把所有的文本颜色...
  • LayUI树形下拉多选选择器扩展包
  • Layui树形列表,Layui树形菜单列表

    千次阅读 2021-10-06 19:16:18
    Layui树形列表 比较简单请耐心查看 效果图 实现方式 首先引入组件(代码放到最后面了) layui.config({ base: $projectPath+"/js/util/layui-module/" }).extend({ treeSelect: "treeSelect", treeTable: ...
  • 本次重新star了官方最新tree.js源码,在其基础上扩展了子节点懒加载模式方法,data数据参数中增加了... layui.use(['tree'], function () { var tree = layui.tree; //treeid var inst1 = tree.render({ elem: '#.
  • 下面我们讲Layui中的双层树状图是如何动态渲染的,下面以渲染服装类型及明细为例: 首先我们需要引入layui的js插件,准备编写树状图渲染的方法: 我们通常使用div标签作为Layui树状图渲染的操作对象,以下图为例...
  • 基于layui自定义树形组件

    千次阅读 2019-12-10 15:58:43
    基于layui自定义树形组件文档 - layui.sw365tree 简介:针对于自己的需求所自定义的树形组件 模块加载名称:sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素,便可快速...
  • layui树形组件获取复选框选中的id

    千次阅读 2021-05-11 15:10:44
    第一步:先在树形组件渲染函数里面添加两个属性 showCheckbox: self.isShowType, id: "demoId", 第二步:在data里面定义一个存放id的数组 第三步:在你需要获取到复选框选择的id函数里面去拿这些值 注意...
  • 用vue自带的nextTick函数强制执行树形结构 nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数 this.$nextTick(()=>{ this.render(this....
  • Layui树状渲染

    2022-05-19 21:32:25
    我们来讲一下layui的树状图渲染 一、我们要先引入layui的插件,css以及js的插件 如图 二、然后到后台写它的一个请求渲染的方法,这里有是从数据库中取到三个数据库的表,病区表、病人表、病床表,这里给它三个...
  • layui树形表格treeTable,目前看到最牛的龙行web前端2018-10-24252330评论treetable-lay在layui数据表格之上进行扩展实现2.使用方法2.1.引入模块下载module/treetable-lay整个文件夹,放在你的项目里面,然后使用模块...
  • layui tree树组件添加图标

    千次阅读 2021-09-13 10:40:06
    layui版本2.6.5,使用layui自带的树组件。 首先,打开layui.js。搜索i class="layui-icon layui-icon-file"改为i class="'+ (r.icon || "layui-icon layui-icon-file") + '" 再然后,渲染树组件一定要开启手风琴...
  • 第一步:去官网下载layui组件https://www.layui.com/ 下载并解压得到: 第二步:将解压后的上图紫色箭头所指的layui文件夹放入自己vue项目中的static目录下 第三步:在项目中index.html文件中引入 <...
  • 最近写了一个个人博客小项目中用到了LayUI树形结构,之后写了一个小案例整理一下。 官网地址:https://www.layui.com/v1/doc/modules/tree.html 先看一下显示的效果图。 点击节点右面会显示对应部门的详情...
  • layui创建一个树形下拉框
  • layui 树形table分页并动态渲染复选框

    千次阅读 2019-10-22 11:41:19
    废话不说,这个是根据网上的一个树形表格修改的(出处忘了),(本来没有分页的,还有点击事件不是我想要的),所以修改了 弊端:分页后其剩下的子节点没有属于父节点,看图(而且是把所有数据查出来再分页,而不是点击...
  • layui树形菜单初始化及赋值取值问题

    千次阅读 2020-11-19 19:01:47
    //TreeBuilder类,将数组转换成layui树形菜单组件特定的格式 import java.util.ArrayList; import java.util.List; import com.alibaba.fastjson.JSON; //图层结构 public class TreeBuilder { List&l

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 212
精华内容 84
关键字:

layui树形组件动态渲染