精华内容
下载资源
问答
  • js获取layui tree选中的id

    千次阅读 2020-05-04 12:57:08
    1.框架layui 2.目标:获取tree选中的所有节点id 实现函数如下 function getChildNodes(treeNode, result) { for (var i in treeNode) { result.push(treeNode[i].id); resul...

    1.框架layui
    2.目标:获取tree选中的所有节点id
    实现函数如下

    
                
     function getChildNodes(treeNode, result) {
                for (var i in treeNode) {
                    result.push(treeNode[i].id);
                    result = getChildNodes(treeNode[i].children, result);
                }
                return result;
            }
    

    调用方法

    var checkedData = tree.getChecked('roletree'); //获取选中节点的数据
     var role = getChildNodes(checkedData,[]);
    
    展开全文
  • 最近在做项目的过程中需要用到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定制化(自定义增删改操作、选中变色)一、自定义增删改操作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

    }

    展开全文
  • 废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下layui.use([ 'tree' ], function() {$ = layui.jquery;form = layui.form;//获取节点数据getTreeData();});function getTreeData(){$.ajax({url : path+"/...

    废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下

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

    $ = layui.jquery;

    form = layui.form;

    //获取节点数据

    getTreeData();

    });

    function getTreeData()

    {

    $.ajax({

    url : path+"/RoleController/getResourceTree.do",

    type : "post",

    dataType : "json",

    data :{

    "roleId":roleId,

    "id":null,

    "t":Math.random()

    } ,

    error : function() {

    },

    success : function(data) {

    treeData = JSON.stringify(data);

    initMenuTree();

    }

    });

    }

    // 加载列表

    function initMenuTree() {

    //json数姐转换成对象

    treeData = eval( "(" + treeData + ")" );

    //console.log(treeData);

    // 执行渲染

    treeIns = layui.tree({

    elem: '#demo', //指定元素,生成的树放到哪个元素上

    check: 'checkbox', //勾选风格

    skin: 'as', //设定皮肤

    drag: true,//点击每一项时是否生成提示信息

    checkboxName: 'aa[]',//复选框的name属性值

    checkboxStyle: "",//设置复选框的样式,必须为字符串,css样式怎么写就怎么写

    click: function(item) { //点击节点回调

    //alert(item);

    },

    change: function (item){//当当前input发生变化后所执行的回调

    //console.log(item);

    resourceIds=item;

    },

    data: {//为元素添加额外数据,即在元素上添加data-xxx="yyy",可选

    hasChild: true

    },

    nodes:treeData

    });

    return treeIns;

    }

    以上这篇layui实现checkbox的目录树tree的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:Layui Table js 模拟选中checkbox的例子

    layui之table checkbox初始化时选中对应选项的方法

    解决layui checkbox 提交多个值的问题

    LayUI动态设置checkbox不显示的解决方法

    layui checkbox默认选中,获取选中值,清空所有选中项的例子

    解决Layui数据表格中checkbox位置不居中的方法

    解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    layui的table单击行勾选checkbox功能方法

    layui表格checkbox选择全选样式及功能的实例

    展开全文
  • 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 递归获取的选中节点

    千次阅读 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-03-24 21:10:19
    解决思路,在点击选中后,获取当前点击的元素,然后给这个... .tree-txt-active{ color :red; } </style> <script> // 多选 $(document).click(function(e) { // 在页面任意位置点击而触发此事件 ...
  • layui tree 动态赋值勾选的时候发现 勾选父级 所有子级默认都是勾选状态 与需求不合 解决: 修改如下: 断点执行 发现勾选节点的操作是在tree.js内处理的 在tree.js 92行处加入一个参数: checkChild: true ...
  • layui版本2.5.5 项目需要 需要获取已勾选Tree节点的ID layui提供的方法是一个迭代后的 父子级关系数据结构 如果不... //得到选中节点 Class.prototype.getCheckedId = function(){ var that = this ,checkI...
  • 在做权限管理时用了layui tree 组件,编辑功能回显出现问题:只要父级被选中那么子级同样也会被选中 如下图所示,本来保存数据的时候只勾中了父级下的某个子级,但是在编辑的时候回显数据就会被全选 解决方案1 ...
  • 项目中 选中用户需要勾选展示该用户部门 如果用layui已有方法需要使用tree.render()重载 会进入后台重新请求 不想这么麻烦 也可以减少后台压力 在tree.js中添加如下方法 //设置取消选中 Class.prototype....
  • 最近做权限管理后台,用了layui tree 组件,发现选中了父节点后,自动选中了子节点。不满足现实业务需求。所以微调了下源代码。 准备工作: 1.下载 layui 组件源码(layui-v2.5.6) 2.准备好tree demo 示例 ...
  • layui Tree勾选控制 唯一选中

    千次阅读 2020-06-17 15:34:18
    关于layui Tree控制只能单选的需求,附带解决展开节点时三角号无法正确切换的问题。 话不多说 直接上demo! 注意:代码中的 _.xx方法 使用的lodash.js 的函数 .transform-r90:after { transform: rotate(90deg); } ...
  • 变饼档是一款由Django + vue.js + layui开发的博客,具体源码托放在gitee上。开发的初衷源于python学习者的诉求,可以将源码下载下来进行学习。官网上有pycharm部署的文档,也可以在PC端访问在线的dome。感兴趣的...
  • 推荐阅读:设计模式入门 菜单管理 菜单管理是一棵layuiTree 增删改 权限管理 增删改查 动态权限加载 权限的加载并不是写死在代码,而是动态从数据库读取,每次调用save方法时更新权限集合 1、妲己是ROLE_USER权限...
  • layui tree 获取复选框选中节点的id

    千次阅读 2020-04-11 15:48:14
    目录说明Code效果图 说明 官方文档提供的代码只能获取到根节点的id,没有进行树遍历,无法获取到子树的id. Code 官方文档提供的 ...//获得选中的节点 var checkData = tree.getChecked('demoId'); ...
  • layui 树形选 ,选中后确定, 再次选择后,把选中的值赋予树形框, 附带问题, 选择取消下级后 怎么把上级的选择状态取消掉。 ![图片说明](https://img-ask.csdn.net/upload/202007/12/1594487969_329736.png)
  • 有时候开发树形菜单权限管理,选择父节点不想子节点全部选中,经过我的修改现在可以做到。你可以试试。只需要覆盖项目 tree.js就可以。 layui2.5.4版本
  • 官方文档提供的代码...//获得选中的节点 var checkData = tree.getChecked('demoId'); 这个获取的是嵌套的,但业务往往是需要一个复选框集合 需要自己写一个方法迭代翻出来 var treecheckdata = tree.getCheck.
  • 描述 最近在写一个Java项目,因为用的是Layui框架,在做权限的时候用到了lyui的树形组件,结果在回显的时候发现明明选中了一个子集,但是却把所有的子集菜单都实例成了选中状态。如下图所示 ...
  • 由于项目树形节点比较多需要增加节点搜索功能,所以研究了一下加上社区伙伴的支持,目前...获取选中节点数据</button> <button class=layui-btn layui-btn-sm type=button lay-demo=setChecked>勾选指定
  • layui树(tree)获取所有选中的节点id

    千次阅读 2020-08-03 23:13:28
    div class="layui-container" id="roleTreeAll"> <div id="roleTree"></div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-...
  • layui树 获取所有选中的节点

    千次阅读 热门讨论 2019-07-29 12:05:37
    layui树 获取所有选中的节点 看文档太马虎了,搞好之后记录一下 layui.use('tree', function(){ var tree = layui.tree; //渲染 写法一 tree.render({ elem: '#trees', //绑定元素 showCheckbox:true, id....
  • tree.render({ elem: '#test1', data: data1, id: 'field', click: function(obj) { }, //关键就在这个oncheck,直接写在里面就行了 oncheck

空空如也

空空如也

1 2 3
收藏数 54
精华内容 21
关键字:

layuitree选中的