精华内容
下载资源
问答
  • 针对数据量大时的layui tree加载处理
  • Layui实现动态加载Tree

    千次阅读 2020-07-01 15:02:06
    目录前言基本使用尾言 前言 有空研究了一下Layui,感觉相对于EasyUI来说,美观了不少,接...Layui官方文档是说有两种加载方式的,也就是:非模块化方式和模块化方式 两者区别就是: 非模块化方式所有模块一次性加载

    前言

    有空研究了一下Layui,感觉相对于EasyUI来说,美观了不少,结合后台加载动态Tree带大家初步了解一下这个框架

    实现步骤

    初步准备

    Layui官网
    去官网下载好Layui,里面有示例和css、js等文件
    在这里插入图片描述
    具体使用步骤:
    要使用Layui,必须引入css文件和js文件:

    <link rel="stylesheet" href="css/layui.css" />
    

    在这里插入图片描述
    Layui官方文档是说有两种加载方式的,也就是:非模块化方式和模块化方式
    两者区别就是:
    非模块化方式所有模块一次性加载,而模块化方式加载指定的模块:例如引用tree的模块…

    <script>
    layui.use('tree', function(){});
    </script>
    

    有一点注意:官方说的是使用非模块化方式加载引入的是layui.all.js文件,但是使用模块化加载时,引入layui.all.js才有样式效果,具体原因不太清楚(layui官方对tree组件可能做了更新,但是具体的更新日至稳定没见着)

    构建data数据源

    一起来看官方文档中对Tree组件的结构要求和参数介绍:
    在这里插入图片描述在这里插入图片描述为了追求简单实现效果,就不弄花里胡哨的了,直接拿最主要的属性:

            <script>
    			//由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    			;
    			! function() {
    				var layer = layui.layer,
    					form = layui.form,
    					tree = layui.tree;
    					//渲染
    					tree.render({
    						elem: '#test1' //绑定元素
    							,
    						data: [//后台传入指定格式json对象数组]
    					});
    			}();
    		</script>
    

    后台构建对应节点:
    在这里插入图片描述TreeVo节点实体类:

    package com.xiaoyang.vo;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Map;
    
    public class TreeVo<T> {
    	/**
    	 * 节点ID索引
    	 */
    	private String id;
    	/**
    	 * 显示节点标题
    	 */
    	private String title;
    	/**
    	 * 节点的子节点
    	 */
    	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
    
    	/**
    	 * 父ID
    	 */
    	private String parentId;
    
    	public String getId() {
    		return id;
    	}
    
    	public void setId(String id) {
    		this.id = id;
    	}
    
    	public List<TreeVo<T>> getChildren() {
    		return children;
    	}
    
    	public void setChildren(List<TreeVo<T>> children) {
    		this.children = children;
    	}
    
    	public String getParentId() {
    		return parentId;
    	}
    
    	public void setParentId(String parentId) {
    		this.parentId = parentId;
    	}
    
    	public String getTitle() {
    		return title;
    	}
    
    	public void setTitle(String title) {
    		this.title = title;
    	}
    
    	public TreeVo(String id, String title, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
    			List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    		super();
    		this.id = id;
    		this.title = title;
    		this.children = children;
    		this.parentId = parentID;
    	}
    
    	public TreeVo() {
    		super();
    	}
    
    }
    

    这里比较奇怪一点就是,明明官方文档写的指定数据源格式没有parentId等选项,我构建和EasyUI一样的数据源都能ok,感觉layui的文档完整性不太好…

    BuildTree构建节点结构方法类:

    package com.xiaoyang.util;
    import com.xiaoyang.vo.TreeVo;
    import java.util.ArrayList;
    import java.util.Collection;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    public class BuildTree {
    	/**
    	 * 指定idparam为顶级节点
    	 * @param nodes
    	 * @param idParam
    	 * @param <T>
    	 * @return
    	 */
    	public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
    		if (nodes == null) {
    			return null;
    		}
    		List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
    		for (TreeVo<T> children : nodes) {
    			String pid = children.getParentId();
    			if (pid == null || idParam.equals(pid)) {
    				topNodes.add(children);
    				continue;
    			}
    			for (TreeVo<T> parent : nodes) {
    				String id = parent.getId();
    				if (id != null && id.equals(pid)) {
    					parent.getChildren().add(children);
    					continue;
    				}
    			}
    		}
    		return topNodes;
    	}
    }
    

    后台方法构建好后,只需将数据源进行Json解析后,进行后台获取输出到页面即可:

           /**
    		 * 封装节点方法
    		 * @param menu
    		 * @param pageBean
    		 * @return
    		 * @throws SQLException 
    		 * @throws IllegalAccessException 
    		 * @throws InstantiationException 
    		 */
    		public List<TreeVo<Permission>> topNode(Permission permission,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
    			List<Permission> list = this.list(permission, pageBean);
    			List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
    			TreeVo treevo = null;
    			for (Permission m : list) {
    				treevo = new TreeVo<>();
    				treevo.setId(m.getId()+"");//设置节点id
    				treevo.setTitle(m.getName()+"");//设置节点文本
    				treevo.setParentId(m.getPid()+"");//设置父节点
    				nodes.add(treevo);
    			}
    			return BuildTree.buildList(nodes,"0");//返回构建好的节点树结构
    		}
    
       /**
    	 * 对传入节点进行Json解析,并输出到页面
    	 * @param response
    	 * @param o
    	 * @throws Exception
    	 */
    	public static void writeJson(HttpServletResponse response,Object o)throws Exception{
    		response.setContentType("text/html;charset=utf-8");
    		ObjectMapper om=new ObjectMapper();
    		String jsonStr = om.writeValueAsString(o);
    		PrintWriter out=response.getWriter();
    		System.out.println(jsonStr.toString());
    		out.println(jsonStr.toString());
    		out.flush();
    		out.close();
    	}
    

    到这里,后台已经搞定,重要的部分来了:由于官方文档并没有看到Tree结构后台动态加载,也没有提供类似于url的跳转路径参数,所以博主结合ajax跳转后台获取数据源:

    //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可:
    ;
    !function() {
    	var id = "";
    	var atitle = "";
    	var layer = layui.layer, form = layui.form, tree = layui.tree, element = layui.element;
    	// 渲染
    	tree.render({
    		elem : '#test1' // 绑定元素
    		,
    		data :eval('(' + getData() + ')'),
    	});
    }();
    function getData(){
    	var ctx=$("#ctx").val();
    	var data ;
    	$.ajax({
    		url:ctx+"/permission.action?opt=PermissionTree",
    		type:"post",
    		async:false,
    		success:function(result){
    			data=result;
    		}
    	});
    	return data;
    }
    
    

    这里一定要注意一点:一定要将获取到的数据源进行eval()函数的转换,否则所有节点都是未定义,
    取到的getData()是一个字符串而不是一个对象,所以下面取不到对象的属性,类似于:

             <script>
    				var jsonData = [{
    					"id": "1",
    					"title": "书籍管理",
    					"state": null,
    					"checked": false,
    					"attributes": null,
    					"children": [],
    					"parentId": "0",
    					"hasParent": false,
    					"hasChildren": false
    				}];
    			   console.log(jsonData.id);
    		</script>
    
    undefined
    

    数据库表结构:
    在这里插入图片描述
    最后附上效果图:
    在这里插入图片描述

    展开全文
  • 在使用layui框架开发项目过程中遇到一个棘手问题,当使用layui.tree来展示子级关系时,layui.tree自带非常简便易用的add和del操作,但子级又可以添加子级,子级又添加子级……这可是我承受不了的。因此就需要限制...

    在使用layui框架开发项目过程中遇到一个棘手问题,当使用layui.tree来展示子级关系时,layui.tree自带非常简便易用的add和del操作,但子级又可以添加子级,子级又添加子级……这可是我承受不了的。因此就需要限制子级的权限(孙子不能生重孙),但layui当前版本并不支持我的需求,所以只能自己对它下手了(滑稽)。

    先看一下我遇到的问题,我添加了五级目录,如果根节点是父级,那么,现在重孙的……(泛滥)

    我需要限制只能添加三级目录,不允许用户无限增加。
    在这里插入图片描述
    首先看一下源码(tree.js)

    我们需要在属性里增加两条属性,注意是增加,tree中原本是没有该属性的。

    limitNodeAddLevel: 0, 
    limitNodeDelLevel: 0,
    

    在这里插入图片描述

    然后找到操作图标这里加上判断条件,分别为

    1、当节点的层级达到limitNodeAddLevel级后不允许增加操作。

    2、当节点的层级等于limitNodeDelLevel级后不允许删除操作。

    if (t.limitNodeAddLevel > 0 && r.rank >= t.limitNodeAddLevel) {
        var e = {
            update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>',
            del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>'
        }, i = ['<div class="layui-btn-group layui-tree-btnGroup">'];
    }
    
    
    if (t.limitNodeDelLevel > 0 && r.rank == t.limitNodeDelLevel) {
        var e = {
            add: '<i class="layui-icon layui-icon-add-1"  data-type="add"></i>',
            update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>'
        }, i = ['<div class="layui-btn-group layui-tree-btnGroup">'];
    }
    

    在这里插入图片描述

    需要注意,这个r.rank的rank属性是树的数据结构里我们后台传过来的,表示节点的等级是几级节点,这样可以自定义自己需要的树操作限制。(r是树的完整数据结构)

    以上两处修改完成后,就可以使用我们自定义的属性对layui.tree进行修饰了。
    在这里插入图片描述
    为了方便演示,这里1级菜单是在初始化tree的时候默认加上的,可见 data中有属性:“rank:1”,而children中的treeData则是在后台进行组织的,每一级分别给与不同的rank。

    上效果:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    本文修改tree.js是精简版,与源码在命名上有些许不同,例如:

    (1)r:item

    (2)t:options

    (3)e:editIcon

    更多关于Layui相关,请访问layui官网。

    展开全文
  • 搜索i class="layui-icon layui-icon-file"改为i class="'+ (r.icon || "layui-icon layui-icon-file") + '" 再然后,渲染树组件一定要开启手风琴模式accordion:true或者开启连线showLine:true。showLine如果为...

    先上效果图:

     layui版本2.6.5,使用layui自带的树组件。

    首先,打开layui.js。搜索i class="layui-icon layui-icon-file" 改为i class="' + (r.icon || "layui-icon layui-icon-file") + '"

    再然后,渲染树组件一定要开启手风琴模式accordion:true或者开启连线showLine:true。showLine如果为false会导致渲染不出来图标。

    最后,修改自己的渲染数据,给配置icon选项,前面记得加layui-icon

    
    if(res[item].types === "2") {
         res[item].icon = "layui-icon layui-icon-friends"
    } else {
        // res[item].icon = "layui-icon layui-icon-cols"
        res[item].icon = "layui-icon"
    }

    图标想要啥样的自己去官网找:字体图标 - 页面元素 - Layui

    以上就是最简单的给末级节点加图标的方式。如果有些特殊节点不想加图标,或者显示其他图标,可参照else中的写法。

    展开全文
  • layui Tree修改

    2018-01-04 16:00:00
    /** layui-v2.2.45 MIT License By http://www.layui.com */ ; layui.define("jquery", function(e) { "use strict";... var o = layui.$, ... a = layui.hint(), ... i = "layui-tree-enter", r...
    /** layui-v2.2.45 MIT License By http://www.layui.com */
    ;
    layui.define("jquery",
    function(e) {
        "use strict";
        var o = layui.$,
        a = layui.hint(),
        i = "layui-tree-enter",
        r = function(e) {
            this.options = e
        },
        t = {
            arrow: ["&#xe623;", "&#xe625;"],
            checkbox: ["&#xe626;", "&#xe627;"],
            radio: ["&#xe62b;", "&#xe62a;"],
            branch: ["&#xe622;", "&#xe624;"],
            leaf: "&#xe621;"
        };
        r.prototype.init = function(e) {
            var o = this;
            e.addClass("layui-box layui-tree"),
            o.options.skin && e.addClass("layui-tree-skin-" + o.options.skin),
            o.tree(e),
            o.on(e)
        },
        r.prototype.tree = function(e, a) {
            var i = this,
            r = i.options,
            n = a || r.nodes;
            layui.each(n,
            function(a, n) {
                var l = n.children && n.children.length > 0,
                c = o('<ul class="' + (n.spread ? "layui-show": "") + '"></ul>'),
                s = o(["<li " + (n.spread ? 'data-spread="' + n.spread + '"': "") + ">",
                function() {
                    return l ? '<i class="layui-icon layui-tree-spread">' + (n.spread ? t.arrow[1] : t.arrow[0]) + "</i>": ""
                } (),
                function() {
                    return r.check ? '<i class="layui-icon layui-tree-check">' + ("checkbox" === r.check ? t.checkbox[0] : "radio" === r.check ? t.radio[0] : "") + "</i>": ""
                } (),
                function() {
                    var treeIds=n.id
                    var iscurrent=checkNull(n.current)=="1"?"current":"0";
                    return '<a class="'+iscurrent+'" data-current="'+iscurrent+'" href="' + (n.href || "javascript:;") + '" ' + (r.target && n.href ? 'target="' + r.target + '"': "") + ">" + ('<i class="layui-icon layui-tree-' + (l ? "branch": "leaf") + '">' + (l ? n.spread ? t.branch[1] : t.branch[0] : t.leaf) + "</i>") + ("<cite class='ellipses' id='cite_"+treeIds+"' title='"+n.name+"'>" + (n.name || "未命名") + "</cite></a>")
                } (), "</li>"].join(""));
                l && (s.append(c), i.tree(c, n.children)),
                e.append(s),
                "function" == typeof r.click && i.click(s, n),
                i.spread(s, n),
                r.drag && i.drag(s, n)
            })
        },
        r.prototype.click = function(e, o) {
            var a = this,
            i = a.options;
            e.children("a").on("click",
            function(e) {
                layui.stope(e),
                switchTab(o,$(this),i) //添加当前选择状态
                i.click(o)
            })
        },
        r.prototype.spread = function(e, o) {
            var a = this,
            i = (a.options, e.children(".layui-tree-spread")),
            r = e.children("ul"),
            n = e.children("a"),
            l = function() {
                e.data("spread") ? (e.data("spread", null), r.removeClass("layui-show"), i.html(t.arrow[0]), n.find(".layui-icon").html(t.branch[0])) : (e.data("spread", !0), r.addClass("layui-show"), i.html(t.arrow[1]), n.find(".layui-icon").html(t.branch[1]))
            };
            r[0] && (i.on("click", l), n.on("dblclick", l))
        },
        r.prototype.on = function(e) {
            var a = this,
            r = a.options,
            t = "layui-tree-drag";
            e.find("i").on("selectstart",
            function(e) {
                return ! 1
            }),
            r.drag && o(document).on("mousemove",
            function(e) {
                var i = a.move;
                if (i.from) {
                    var r = (i.to, o('<div class="layui-box ' + t + '"></div>'));
                    e.preventDefault(),
                    o("." + t)[0] || o("body").append(r);
                    var n = o("." + t)[0] ? o("." + t) : r;
                    n.addClass("layui-show").html(i.from.elem.children("a").html()),
                    n.css({
                        left: e.pageX + 10,
                        top: e.pageY + 10
                    })
                }
            }).on("mouseup",
            function() {
                var e = a.move;
                e.from && (e.from.elem.children("a").removeClass(i), e.to && e.to.elem.children("a").removeClass(i), a.move = {},
                o("." + t).remove())
            })
        },
        r.prototype.move = {},
        r.prototype.drag = function(e, a) {
            var r = this,
            t = (r.options, e.children("a")),
            n = function() {
                var t = o(this),
                n = r.move;
                n.from && (n.to = {
                    item: a,
                    elem: e
                },
                t.addClass(i))
            };
            t.on("mousedown",
            function() {
                var o = r.move;
                o.from = {
                    item: a,
                    elem: e
                }
            }),
            t.on("mouseenter", n).on("mousemove", n).on("mouseleave",
            function() {
                var e = o(this),
                a = r.move;
                a.from && (delete a.to, e.removeClass(i))
            })
        },
        e("tree",
        function(e) {
            var i = new r(e = e || {}),
            t = o(e.elem);
            return t[0] ? void i.init(t) : a.error("layui.tree 没有找到" + e.elem + "元素")
        })
        /* 切换添加默认选择样式 */
        function switchTab(obj,a,i){
            var disableParents=checkNull(i.disableParent)==""?false:i.disableParent;
            console.log(disableParents)
            var treeId=a.closest(".layui-tree").attr("id");
            var id=obj.id;
            if(disableParents){
                if(checkNull(obj.children)==""){
                    $("#"+treeId+" cite").each(function(){
                        $(this).removeClass("current");
                    })
                    $("#"+treeId+" #cite_"+id).addClass("current");
                }
            }else{
                $("#"+treeId+" cite").each(function(){
                    $(this).removeClass("current");
                })
                $("#"+treeId+" #cite_"+id).addClass("current");
            }
        }
        /*去除""或undefind null*/
        function checkNull(obj) {
            if (obj === null || typeof (obj) === "undefined") {
                return "";
            }
            var type = (typeof (obj)).toLowerCase();
            if (type === "string" && (obj.toString()).replace(/(^\s*)|(\s*$)/g, "") === "") {
                return "";
            }
            return obj;
        }
    });

    修改内容

    添加参数:

    disableParent: 父级点击时是否执行操作(添加当前状态及回调操作)
    值: 默认 true
    true :执行操作
    false:不执行

    2、添加当前选择状态(css 添加 current)

    3、点击自动切换当前选择状态

    转载于:https://www.cnblogs.com/webqiand/articles/11250337.html

    展开全文
  • LayUi tree 树形组件tree.reload实例重载解决方案,我这里研究了2种方案,希望对你有帮助。
  • layui.use('tree', function () { var tree = layui.tree; //渲染 stree = tree.render({ elem: '#demo2' //绑定元素 , data: treeService .
  • 思路:①、界面打开则加载Tree数据 和 Table 数据 ②、用户点击某个节点则加载该节点的所有数据、 过程: 1、先加载table数据 // 显示右侧表格数据 var tableIns = table.render({ elem: '#test' ...
  • layUI Tree 的使用

    2018-05-31 14:18:00
    原文作者:小巷而已【[layui-xtree 3.0]依赖layui form模块 复选框tree插件】 原文链接:https://blog.csdn.net/xianglikai1/article/details/79032278 js 代码 : <link href="layui/css/layui.css" ...
  • 由于项目写了一大半需要添加的全局性的东西太多,故封装了这种修改比较小的方式。commonRequest.jslayui.define(['jquery','table'],function(exports){var$=layui.jquery,table=layui.table;varobj={ajax:function...
  • layui Tree勾选控制 唯一选中。

    千次阅读 2020-06-17 15:34:18
    关于layui Tree控制只能单选的需求,附带解决展开节点时三角号无法正确切换的问题。 话不多说 直接上demo! 注意:代码中的 _.xx方法 使用的lodash.js 的函数 .transform-r90:after { transform: rotate(90deg); } ...
  • layui动态加载数据

    千次阅读 2020-07-13 15:57:14
    div id="trees" class="demo-tree demo-tree-box"></div> </div> 前端js代码: //引入包 layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件...
  • 1.找到layuitree.jss(可以搜索 通过搜索b.prototype) $(".layui-tree-txt").css("color","#555"); $(this).css("color","red"); b.prototype.spread = function(e, a) { var n = this, t = n....
  • layui呈现树形: //暂存已经查询到的节点,用于后边数据整合(全局变量) var temp; //暂存已经查询到的节点的id,用于后边节点的展开(全局变量) var arrSwjgDm = []; //树形填充数据 var treeData; //树形图...
  • Springboot + Layui Tree

    2021-02-19 11:40:33
    <script> layui.use(['tree', 'util'], function(){ var tree = layui.tree ,layer = layui.layer ,util = layui.util; $(function() { getData(); }) function getData(){ $.ajax({ type: "get", data: "id=0", url...
  • 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-...
  • 一、定义layui,是一款采用自身模块规范编写的前端 UI 框架,遵循...1、与其他UI对比1.1 layui与easyuieasyui是功能强大但是有很多的组件使用功能是十分强大的,而layui是2016年才出来的前端框架,现在才更新到2.x版...
  • layui tree 对节点进行搜索

    千次阅读 2019-01-22 09:33:41
    参考地址:https://fly.layui.com/jie/46865/ html 代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &...
  • LayUi tree节点增删改

    千次阅读 2019-07-24 09:35:19
    前端: 有待完善 <div class="x-body">...fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>开启节点操作图标</legend> </fields...
  • layui tree 获取已选中节点的ID

    千次阅读 2020-11-24 11:31:32
    layui版本2.5.5 项目需要 需要获取已勾选Tree节点的ID layui提供的方法是一个迭代后的 ...在tree.js中添加如下方法 //得到选中节点 Class.prototype.getCheckedId = function(){ var that = this ,checkI...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,433
精华内容 573
关键字:

layuitree动态加载