精华内容
下载资源
问答
  • layui tree

    2021-05-18 10:14:02
    <!... <... <head>...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewp.
    <!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="static/layui/css/layui.css"  media="all">
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>基本演示</legend>
    </fieldset>
    <div class="layui-btn-container">
      <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
      <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
      <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
    </div>
     
    <div id="test12" class="demo-tree-more"></div>
             
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>常规用法</legend>
    </fieldset>
     
    <div id="test1" class="demo-tree demo-tree-box"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>无连接线风格</legend>
    </fieldset>
    <div id="test13" class="demo-tree-more"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>仅节点左侧图标控制收缩</legend>
    </fieldset>
     
    <div id="test2" class="demo-tree"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>手风琴模式</legend>
    </fieldset>
     
    <div id="test4" class="demo-tree"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>点击节点新窗口跳转</legend>
    </fieldset>
     
    <div id="test5" class="demo-tree"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>开启复选框</legend>
    </fieldset>
     
    <div id="test7" class="demo-tree"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>开启节点操作图标</legend>
    </fieldset>
     
    <div id="test9" class="demo-tree demo-tree-box" style="width: 200px; height: 300px; overflow: scroll;"></div>
            
    <script src="static/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
    <script>
    layui.use(['tree', 'util'], function(){
      var tree = layui.tree
      ,layer = layui.layer
      ,util = layui.util
      
      //模拟数据
      ,data = [{
        title: '一级1'
        ,id: 1
        ,field: 'name1'
        ,checked: true
        ,spread: true
        ,children: [{
          title: '二级1-1 可允许跳转'
          ,id: 3
          ,field: 'name11'
          ,href: 'https://www.layui.com/'
          ,children: [{
            title: '三级1-1-3'
            ,id: 23
            ,field: ''
            ,children: [{
              title: '四级1-1-3-1'
              ,id: 24
              ,field: ''
              ,children: [{
                title: '五级1-1-3-1-1'
                ,id: 30
                ,field: ''
              },{
                title: '五级1-1-3-1-2'
                ,id: 31
                ,field: ''
              }]
            }]
          },{
            title: '三级1-1-1'
            ,id: 7
            ,field: ''
            ,children: [{
              title: '四级1-1-1-1 可允许跳转'
              ,id: 15
              ,field: ''
              ,href: 'https://www.layui.com/doc/'
            }]
          },{
            title: '三级1-1-2'
            ,id: 8
            ,field: ''
            ,children: [{
              title: '四级1-1-2-1'
              ,id: 32
              ,field: ''
            }]
          }]
        },{
          title: '二级1-2'
          ,id: 4
          ,spread: true
          ,children: [{
            title: '三级1-2-1'
            ,id: 9
            ,field: ''
            ,disabled: true
          },{
            title: '三级1-2-2'
            ,id: 10
            ,field: ''
          }]
        },{
          title: '二级1-3'
          ,id: 20
          ,field: ''
          ,children: [{
            title: '三级1-3-1'
            ,id: 21
            ,field: ''
          },{
            title: '三级1-3-2'
            ,id: 22
            ,field: ''
          }]
        }]
      },{
        title: '一级2'
        ,id: 2
        ,field: ''
        ,spread: true
        ,children: [{
          title: '二级2-1'
          ,id: 5
          ,field: ''
          ,spread: true
          ,children: [{
            title: '三级2-1-1'
            ,id: 11
            ,field: ''
          },{
            title: '三级2-1-2'
            ,id: 12
            ,field: ''
          }]
        },{
          title: '二级2-2'
          ,id: 6
          ,field: ''
          ,children: [{
            title: '三级2-2-1'
            ,id: 13
            ,field: ''
          },{
            title: '三级2-2-2'
            ,id: 14
            ,field: ''
            ,disabled: true
          }]
        }]
      },{
        title: '一级3'
        ,id: 16
        ,field: ''
        ,children: [{
          title: '二级3-1'
          ,id: 17
          ,field: ''
          ,fixed: true
          ,children: [{
            title: '三级3-1-1'
            ,id: 18
            ,field: ''
          },{
            title: '三级3-1-2'
            ,id: 19
            ,field: ''
          }]
        },{
          title: '二级3-2'
          ,id: 27
          ,field: ''
          ,children: [{
            title: '三级3-2-1'
            ,id: 28
            ,field: ''
          },{
            title: '三级3-2-2'
            ,id: 29
            ,field: ''
          }]
        }]
      }]
      
      //模拟数据1
      ,data1 = [{
        title: '江西'
        ,id: 1
        ,children: [{
          title: '南昌'
          ,id: 1000
          ,children: [{
            title: '青山湖区'
            ,id: 10001
          },{
            title: '高新区'
            ,id: 10002
          }]
        },{
          title: '九江'
          ,id: 1001
        },{
          title: '赣州'
          ,id: 1002
        }]
      },{
        title: '广西'
        ,id: 2
        ,children: [{
          title: '南宁'
          ,id: 2000
        },{
          title: '桂林'
          ,id: 2001
        }]
      },{
        title: '陕西'
        ,id: 3
        ,children: [{
          title: '西安'
          ,id: 3000
        },{
          title: '延安'
          ,id: 3001
        }]
      }]
      
      //模拟数据2
      ,data2 = [{
        title: '早餐'
        ,id: 1
        ,children: [{
          title: '油条'
          ,id: 5
        },{
          title: '包子'
          ,id: 6
        },{
          title: '豆浆'
          ,id: 7
        }]
      },{
        title: '午餐'
        ,id: 2
        ,checked: true
        ,children: [{
          title: '藜蒿炒腊肉'
          ,id: 8
        },{
          title: '西湖醋鱼'
          ,id: 9
        },{
          title: '小白菜'
          ,id: 10
        },{
          title: '海带排骨汤'
          ,id: 11
        }]
      },{
        title: '晚餐'
        ,id: 3
        ,children: [{
          title: '红烧肉'
          ,id: 12
          ,fixed: true
        },{
          title: '番茄炒蛋'
          ,id: 13
        }]
      },{
        title: '夜宵'
        ,id: 4
        ,children: [{
          title: '小龙虾'
          ,id: 14
          ,checked: true
        },{
          title: '香辣蟹'
          ,id: 15
          ,disabled: true
        },{
          title: '烤鱿鱼'
          ,id: 16
        }]
      }];
     
      //基本演示
      tree.render({
        elem: '#test12'
        ,data: data
        ,showCheckbox: true  //是否显示复选框
        ,id: 'demoId1'
        ,isJump: true //是否允许点击节点时弹出新窗口跳转
        ,click: function(obj){
          var data = obj.data;  //获取当前点击的节点数据
          layer.msg('状态:'+ obj.state + '<br>节点数据:' + JSON.stringify(data));
        }
      });
      
      //按钮事件
      util.event('lay-demo', {
        getChecked: function(othis){
          var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
          
          layer.alert(JSON.stringify(checkedData), {shade:0});
          console.log(checkedData);
        }
        ,setChecked: function(){
          tree.setChecked('demoId1', [12, 16]); //勾选指定节点
        }
        ,reload: function(){
          //重载实例
          tree.reload('demoId1', {
            
          });
          
        }
      });
     
      //常规用法
      tree.render({
        elem: '#test1' //默认是点击节点可进行收缩
        ,data: data1
      });
      
      //无连接线风格
      tree.render({
        elem: '#test13'
        ,data: data1
        ,showLine: false  //是否开启连接线
      });
     
      //仅节点左侧图标控制收缩
      tree.render({
        elem: '#test2'
        ,data: data1
        ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
        ,click: function(obj){
          layer.msg(JSON.stringify(obj.data));
        }
      });
      //手风琴模式
      tree.render({
        elem: '#test4'
        ,data: [{
          title: '优秀'
          ,children: [{
            title: '80 ~ 90'
          },{
            title: '90 ~ 100'
          }]
        },{
          title: '良好'
          ,children: [{
            title: '70 ~ 80'
          },{
            title: '60 ~ 70'
          }]
        },{
          title: '要努力奥'
          ,children: [{
            title: '0 ~ 60'
          }]
        }]
        ,accordion: true 
      });
     
      //点击节点新窗口跳转
      tree.render({
        elem: '#test5'
        ,data: data
        ,isJump: true  //link 为参数匹配
      });
     
      //开启复选框
      tree.render({
        elem: '#test7'
        ,data: data2
        ,showCheckbox: true
      });
     
      //开启节点操作图标
      tree.render({
        elem: '#test9'
        ,data: data1
        ,edit: ['add', 'update', 'del'] //操作节点的图标
        ,click: function(obj){
          layer.msg(JSON.stringify(obj.data));
        }
      });
    });
    </script>
    
    </body>
    </html>

     

    展开全文
  • Layui tree定制化(自定义增删改操作、选中变色)一、自定义增删改操作Layui tree自带的增删改操作,太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。1.添加自定义属性customOperate,需要修改源码。...

    Layui tree定制化(自定义增删改操作、选中变色)

    一、自定义增删改操作

    Layui tree自带的增删改操作,太鸡肋不太符合我们的要求。新增修改弹框操作、删除提示确实框。

    1.添加自定义属性customOperate,需要修改源码。

    tree.render({

    elem: '#test1'

    ,data: data

    ,onlyIconControl: true

    ,edit: ['add', 'update', 'del']

    ,click: function(obj){

    var data = obj.data;

    layer.msg('状态:'+ obj.state + '
    节点数据:' + JSON.stringify(data));

    }

    ,customOperate: true //自定义属性

    ,operate: function (obj) {

    //省略。。

    }

    });

    2.修改tree.js源码

    如果是压缩版先格式化,搜索prototype.operate或者if ("add" == f),修改源码在原先的if判断最外层再加上我们自定义属性的判断。

    b.prototype.operate = function(e, a) {

    var t = this,

    r = t.config,

    l = e.children("." + p),

    d = l.children("." + f);

    l.children(".layui-tree-btnGroup").on("click", ".layui-icon",

    function(l) {

    layui.stope(l);

    var f = i(this).data("type"),

    b = e.children("." + v),

    g = {

    data: a,

    type: f,

    elem: e

    };

    //注意这里的r 对应着上面的r = t.config的变量 有可能你的不叫r,修改成自己的变量名称

    if (r.customOperate) {

    console.log("修改源码。。。");

    //注意这里的g 对应着上面的g = {data: a, type: f, elem: e}的变量 有可能你的不叫g,修改成自己的变量名称

    r.operate && r.operate(g);

    } else {

    //注意要把下面整个if else if 到粘过来

    //省略。。。

    }

    })

    },

    3.增加自定义操作

    修改完源码后,再次点击增删改按钮就不会执行默认的方法了。我们就可以在operate下添加我们自定义的一些操作了。

    var index0pen;

    var $ = layui.$;

    //基本演示

    tree.render({

    elem: '#test1'

    ,data: data

    ,onlyIconControl: true

    ,edit: ['add', 'update', 'del']

    ,click: function(obj){

    var data = obj.data;

    layer.msg('状态:'+ obj.state + '
    节点数据:' + JSON.stringify(data));

    }

    ,customOperate: true

    , operate: function (obj) {

    var type = obj.type; //得到操作类型:add、edit、del

    var data = obj.data; //得到当前节点的数据

    var elem = obj.elem; //得到当前节点元素

    //Ajax 操作

    var id = data.id; //得到节点索引

    if (type === 'add') { //增加节点

    $("#add-form input[name='parentId']").val(id);

    $("#add-form input[name='title']").val('');

    index0pen = layer.open({

    type: 1,

    title: "新增",

    area: ['500px', '200px'],

    content: $("#add-node")

    });

    } else if (type === 'update') { //修改节点

    $("#update-form input[name='deptId']").val(id);

    $("#update-form input[name='parentId']").val(data.parentId);

    $("#update-form input[name='title']").val(data.title);

    index0pen = layer.open({

    type: 1,

    title: "修改",

    area: ['500px', '200px'],

    content: $("#update-node")

    });

    } else if (type === 'del') { //删除节点

    $.ajax({

    url: '/admin/dept/delete/' + id,

    type: 'get',

    dataType: 'json',

    success: function (data) {

    if (data.code == 0) {

    //关闭

    layer.close(index0pen);

    layer.msg('删除成功!', {icon: 1});

    setTimeout(function () {

    window.location.reload();

    }, 500);

    } else {

    layer.msg(data.msg, {icon: 2});

    }

    }

    });

    }

    }

    });

    弹框代码

    部门名称

    保存

    部门名称

    保存

    二、选中变色

    1.修改tree.js源码

    搜索prototype.spread或者"open": "close"。

    b.prototype.spread = function(e, a) {

    var n = this,

    t = n.config,

    r = e.children("." + p),

    l = r.children("." + f),

    c = r.find("." + o),

    k = r.find("." + y),

    m = t.onlyIconControl ? c: l,

    x = "";

    m.on("click",

    function(i) {

    var a = e.children("." + v),

    n = m.children(".layui-icon")[0] ? m.children(".layui-icon") : m.find(".layui-tree-icon").children(".layui-icon");

    if (a[0]) {

    if (e.hasClass(C)) e.removeClass(C),

    a.slideUp(200),

    n.removeClass(u).addClass(h);

    else if (e.addClass(C), a.slideDown(200), n.addClass(u).removeClass(h), t.accordion) {

    var r = e.siblings("." + s);

    r.removeClass(C),

    r.children("." + v).slideUp(200),

    r.find(".layui-tree-icon").children(".layui-icon").removeClass(u).addClass(h)

    }

    } else x = "normal"

    }),

    k.on("click",

    function() {

    //修改源码点击选中变色

    layui.$("." + p).removeClass("custom-tree-item-clicked");

    //注意这里的k 对应着上面的k.on("click",的变量 有可能你的不叫k,修改成自己的变量名称

    k.addClass("custom-tree-item-clicked");

    var n = i(this);

    n.hasClass(d) || (x = e.hasClass(C) ? t.onlyIconControl ? "open": "close": t.onlyIconControl ? "close": "open", t.click && t.click({

    elem: e,

    state: x,

    data: a

    }))

    })

    }

    添加css样式

    /*修改源码点击选中变色*/

    .custom-tree-item-clicked {

    color: #ff5722

    }

    展开全文
  • 最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUITree样式比较好看,所以开始搞!1.Layui部分1.1 首先引用文件是必不可少的:(依赖于Jquery)1.2 Js部分function SetTree() {layui.use('tree', ...

    最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUI的Tree样式比较好看,所以开始搞!

    1.Layui部分

    1.1 首先引用文件是必不可少的:(依赖于Jquery)

    1.2 Js部分function SetTree() {

    layui.use('tree', function () {

    var tree = layui.tree;

    $.ajax({

    type: "POST",

    url: "/CmdSite/GetTreeEntity",

    data: {},

    success: function (result) {

    var inst1 = tree.render({

    elem: '#menuTree',

    id: 'tree',

    data: JSON.parse(result),

    isJump: true,//以下配置项参考Layui Tree 官方文档

    showLine: true,

    onlyIconControl: true,

    accordion:false,

    click: function (obj) {

    var data = JSON.stringify(obj.data);//这里是点击获得数据

    var jsonData = JSON.parse(data);

    }

    });

    },

    error: function (e) {

    console.log(e.status);

    console.log(e.responseText);

    }

    });

    });

    }

    1.3 Html部分

    这就很省事了!

    2. .Net部分

    2.1 你得有个实体类//这里面字段最好对应文档里面的

    public class treeEntity

    {

    ///

    /// 主键ID

    ///

    public int id { get; set; }

    ///

    /// 父ID

    ///

    public string pid { get; set; }

    ///

    /// 名称

    ///

    public string title { get; set; }

    ///

    /// 图标

    ///

    public string icon { get; set; }

    ///

    /// 链接

    ///

    public string url { get; set; }

    ///

    /// 排序

    ///

    public string sort { get; set; }

    ///

    /// 是否展开

    ///

    public bool spread { get;set;}

    ///

    /// 子节点

    ///

    public List children { get; set; }

    }

    2.2 遍历拼接///

    /// 获得Tree实体(我只做了二级的 有需要的可以自己改成递归)

    ///

    ///

    public static string GetTreeEntityJson()

    {

    var CategoryList = Dao.BLL.MenuCategory.QueryListByFMcid(0);

    var menuList = new List();

    foreach (var item in CategoryList)

    {

    treeEntity tree = new treeEntity

    {

    icon = item.icon,

    id = item.mcid,

    title = item.name,

    sort = item.sort.ToString(),

    pid = "0",

    url = "",

    spread=true,

    };

    var menuEntityList = Dao.BLL.Menu.QueryListByMcid(item.mcid);

    var childrenList = new List();

    foreach (var ChildItem in menuEntityList)

    {

    treeEntity ChindrenTree = new treeEntity

    {

    icon = "fa fa-diamond",

    id = (int)ChildItem.menu,

    title = ChildItem.name,

    sort = ChildItem.sort.ToString(),

    pid = ChildItem.mcid.ToString(),

    url = "",

    children=null,

    spread = true,

    };

    childrenList.Add(ChindrenTree);

    }

    tree.children = childrenList;

    menuList.Add(tree);

    }

    var menuJson = Newtonsoft.Json.JsonConvert.SerializeObject(menuList);

    return menuJson;

    2.3 返回Jsonpublic string GetTreeEntity()

    {

    return JQLY.Helper.MenuHelper.GetTreeEntityJson();

    }

    这样就搞定了!

    LayUI地址:https://www.layui.com来源:https://www.icode9.com/content-4-360651.html

    展开全文
  • layui tree树结构源码

    2020-12-21 10:54:01
    layui tree树结构源码
  • 针对数据量大时的layui tree懒加载处理
  • 今天小编就为大家分享一篇Layui tree 下拉菜单树的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui tree取消父子联动

    2021-04-22 17:26:45
    索性将layui最新版本的tree.js源代码才gitee上copy下来进行修改。 tree.js变更点 setCheckbox方法变更位置: getChecked方法变更位置: 不加此处逻辑,当获取选中状态时,无法获取子级 修改后的代码已上传到github ...

    最近改动一个老系统,发现原始layui tree当点击子级时,父级也会选中。因业务需要,需要将父子联动取消掉。因老版本的源代码未找到。索性将layui最新版本的tree.js源代码从gitee上copy下来进行修改。

    tree.js变更点

    setCheckbox方法变更位置:
    在这里插入图片描述在这里插入图片描述getChecked方法变更位置:
    不加此处逻辑,当获取选中状态时,无法获取子级

    修改后的代码已上传到github

    使用

    前台:

    var tree = layui.tree;
    window.orgTreeList = function(){
    	$.ajax({
    		type: 'POST',
    		url: '/plugin/admin/organ/queryAllOrganTree',
    		data : {},
    		success:function(data){
    			tree.render({
    				elem: '#organTree',
    				data: data,
    				showCheckbox: true,
    				checkChirld: false,
    				id: 'id'
    			});
    			//设置初始化选中
    			var selectedOrg = $("#orgIds").val();
    			tree.setChecked('id', selectedOrg.split(","));
    		}
    	});
    }
    

    后台递归:

    public Object queryAllOrganTree() {
    	UsualReturnDTO dto = new UsualReturnDTO();
    	dto.setCode(0);
    	
    	List<ZtreeNodeBo> organs = organService.findAllOrgan();
    	
    	List<ZtreeNodeBo> orgTree = this.eachList(organs);
    	
    	return orgTree;
    }
    
    private List<ZtreeNodeBo> eachList(List<ZtreeNodeBo> allOrgs) {
    	List<ZtreeNodeBo> orgTree = new ArrayList<ZtreeNodeBo>();
    	for(ZtreeNodeBo org : allOrgs) {
    		if (StringUtils.isEmpty(org.getpId())) {
    			org = bulidTree(allOrgs,org);
    			orgTree.add(org);
    		}
    	}
    	return orgTree;
    }
    
    private ZtreeNodeBo bulidTree(List<ZtreeNodeBo> allOrgs,ZtreeNodeBo node) {
    	List<ZtreeNodeBo> children = new ArrayList<ZtreeNodeBo>();
    	for(int i=0;i < allOrgs.size()-1; i++) {
    		if(node.getId().equals(allOrgs.get(i).getpId())){
    			children.add(bulidTree(allOrgs,allOrgs.get(i)));
    		}
    	}
    	node.setChildren(children);
    	return node;
    }
    
    /**
     * ztree 节点
     */
    public class ZtreeNodeBo {
    	
    	private String id;
    	
    	private String pId;
    	
    	private String name;
    	
    	private String title;
    
    	private String open;
    	
    	private String checked;
    	
    	private List<ZtreeNodeBo> children;
    }
    
    展开全文
  • LayUi tree 树形组件tree.reload实例重载解决方案,我这里研究了2种方案,希望对你有帮助。
  • } layui.use('tree', function(){ var tree = layui.tree({ elem: '#demo' //指定元素 //,check: 'checkbox' //勾选风格 ,skin: 'as' //设定皮肤 ,target: '_blank' //是否新选项卡打开(比如节点返回href才有效) ,...
  • layui tree 递归获取的选中节点

    千次阅读 2020-05-16 19:26:26
    使用layui tree 获取已选中的数据的id /** * 获取layui tree模块的选中的所有id * @param arr 选中数据,树结构 * @returns {string|*} */ function getLayuiTreeIds(arr, list) { if (!list) list = []; for ...
  • layui Tree勾选控制 唯一选中。

    千次阅读 2020-06-17 15:34:18
    关于layui Tree控制只能单选的需求,附带解决展开节点时三角号无法正确切换的问题。 话不多说 直接上demo! 注意:代码中的 _.xx方法 使用的lodash.js 的函数 .transform-r90:after { transform: rotate(90deg); } ...
  • layui tree动态加载 利用CAReplicatorLayer实现的加载动画发布时间:2017-04-12来源:服务器之家在上一篇中,笔者简要介绍了CAReplicatorLayer,在本篇中,将介绍具体的实用价值。实用CAReplicatorLayer作为核心技术...
  • layui tree 动态赋值勾选的时候发现 勾选父级 所有子级默认都是勾选状态 与需求不合 解决: 修改如下: 断点执行 发现勾选节点的操作是在tree.js内处理的 在tree.js 92行处加入一个参数: checkChild: true ...
  • 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 tree 组件 提供了可以直接在节点操作的功能,但是不能让无权限用户操作菜单,我们需要根据权限判断用户是否有操作其中某个或者某些功能的资格,如果没有直接隐藏这个小图标,关于权限的管理我用的是shiro+...
  • 最近做权限管理后台,用了layui tree 组件,发现选中了父节点后,自动选中了子节点。不满足现实业务需求。所以微调了下源代码。 准备工作: 1.下载 layui 组件源码(layui-v2.5.6) 2.准备好tree demo 示例 ...
  • 众所周知,layui.tree的树形控件,在渲染树节点时,需要后台准备好整个组织树的数据;如果组织树的数据量特别大,页面渲染就特别慢。最近在狐小E智慧办公平台中,展示企业部门树时,就遇到这种问题;当时产品要求,...
  • layui tree支持搜索

    2019-12-09 19:30:25
    本人用的layui 2.x ,该版本的tree是直接支持搜索的,只需要开启 showSearch: true,甚至可以不用写搜索框 代码如下: <script> layui.use(['tree', 'layer'], function () { var layer = layui.layer , $...
  • layui tree脚本方法里面添加了参数herf:"xxx",实现的默认效果是在新的页面打开,但是我想要将它放到指定的iframe里面,很简单 下面是我的做法 1.在指定iframe打开页面的标签里面添加name="iframe" <div ...
  • 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 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" ...
  • 有时候开发树形菜单权限管理,选择父节点不想子节点全部选中,经过我的修改现在可以做到。你可以试试。只需要覆盖项目 tree.js就可以。 layui2.5.4版本
  • 最近几天,因为项目需要,所以自学了下layui,在使用之前就对其比较感兴趣,毕竟封装的东西也不错(个人见解),在接触到layui之后,现在有个需要就是将部门做成tree的样子,开始觉得不怎么难,毕竟都框架都封装的很好...
  • 在做权限管理时用了layui tree 组件,编辑功能回显出现问题:只要父级被选中那么子级同样也会被选中 如下图所示,本来保存数据的时候只勾中了父级下的某个子级,但是在编辑的时候回显数据就会被全选 解决方案1 ...
  • 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.use([ 'tree' ], function() {$ = layui.jquery;form = layui.form;//获取节点数据getTreeData();});function getTreeData(){$.ajax({url : path+"/...
  • layui.use(['form','jquery','tree'],function() {varform=layui.form;$=layui.jquery;tree=layui.tree;data=[{title:'一级1',id:1,field:'name1',checked:false,spread:true,children: [{title:'二级1-1 可允许跳转...
  • layui tree下拉框选择

    千次阅读 2019-01-22 09:29:30
    参考网址:https://www.cnblogs.com/yysbolg/p/8968992.html html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...layui&lt;/title&gt; &lt;meta n

空空如也

空空如也

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

layuitree