带有复选框可折叠的树形结构

所属分类:导航-文件树

 28398  124  查看评论 (95)
带有复选框可折叠的树形结构 ie兼容8

更新时间:2017-5-31 22:50:33

更新说明:1、给复选框增加了onchange事件,当复选框改变后可以执行传递的回调事件,这样就可以获取每个复选框的属性和值了,更灵活的应用


更新时间:2017/5/4 下午4:54:42

更新说明:

                1、文件体积缩小到了180kb左右

                2、可以给每个复选框添加一些额外数据,即给复选框添加data-xxx="yyy"属性

<ul id="demo">
</ul>
<script>
	layui.use('tree',
	function() {
		var tree = layui.tree({
			elem: '#demo',
			//指定元素,生成的树放到哪个元素上
			check: 'checkbox',
			//勾选风格
			skin: 'as',
			//设定皮肤
			drag: true,
			//点击每一项时是否生成提示信息
			checkboxName: 'aa[]',
			//复选框的name属性值
			checkboxStyle: "",
			//设置复选框的样式,必须为字符串,css样式怎么写就怎么写
			click: function(item) { //点击节点回调
				console.log(item)
			},
			nodes: [ //节点
			{
				name: '常用文件夹',
				//节点名称
				spread: true,
				//是否是展开状态,true为展开状态
				href: "http://www.baidu.com",
				//设置节点跳转的链接,如果不设置则不会跳转
				target: "_self",
				//节点链接打开方式
				alias: 'changyong',
				checkboxValue: 1,
				//复选框的值
				checked: true,
				//复选框默认是否选中
				children: [{
					name: '所有未读',
					alias: 'weidu',
					checked: true,
					checkboxValue: 2
				},
				{
					name: '置顶邮件',
				},
				{
					name: '标签邮件',
					checked: false,
					checkboxValue: 3
				}]
			},
			{
				name: '我的邮箱',
				checked: true,
				spread: true,
				children: [{
					name: 'QQ邮箱',
					checked: true,
					checkboxValue: 4,
					spread: true,
					children: [{
						name: '收件箱',
						checked: false,
						checkboxValue: 5,
						children: [{
							name: '所有未读',
							checked: false,
							checkboxValue: 6,
							children: [{
								name: '一周未读',
								checked: false,
								checkboxValue: 6
							}]
						},
						{
							name: '置顶邮件',
							checked: false,
							checkboxValue: 7
						},
						{
							name: '标签邮件',
							checked: false,
							checkboxValue: 8
						}]
					},
					{
						name: '已发出的邮件',
						checked: false,
						checkboxValue: 9
					},
					{
						name: '垃圾邮件',
						checked: false,
						checkboxValue: 10
					}]
				},
				{
					name: '阿里云邮',
					checked: true,
					checkboxValue: 11,
					children: [{
						name: '收件箱',
						checked: true,
						checkboxValue: 12
					},
					{
						name: '已发出的邮件',
						checked: true,
						checkboxValue: 13
					},
					{
						name: '垃圾邮件',
						checked: true,
						checkboxValue: 14
					}]
				}]
			}]
		});
</script>


相关插件-文件树

bootstrap风格的zTree插件

使用bootstrap的同学,在使用zTree插件时,发现风格很难看,和bootstrap不搭调,现在你们的福利来了,bootstrap风格的zTree插件发布了!
  文件树
 12865  108

文件树编辑插件Treed

文件树编辑插件Treed 可扩展功能强大,简单易用。
  文件树
 45029  109

jQuery目录树插件jtree

jQuery目录树、文件树插件jtree,带搜索功能
  文件树
 11829  63

jquery.treeview.js树控件

jquery.treeview.js树控件
  文件树
 91264  54

讨论这个项目(95)回答他人问题或分享插件使用方法奖励jQ币

    Cc88 0
    2017/11/15 20:52:46

    下载玩插件怎么用啊?

    回复
    夜雨临窗诗意 0
    2017/11/1 17:26:55

    有没有加载完成之后的回调?

        xta fnhc tewq0
        2017/11/9 21:05:15

        目前没有,以后可以加上去

    回复
    丿淡忘 Forgotten 0
    2017/10/14 10:52:31

    或者说怎们获取选中事件  

        xta fnhc tewq1
        2017/10/14 13:10:48
        layui.use('tree', function() {
            var tree = layui.tree({
                elem: '#demo',
                check: 'checkbox',
                skin: 'as',
                drag: true,
                checkboxName: 'aa[]',
                checkboxStyle: "",
                onchange: function() {
                    /*当当前input被点击后会触发此函数,这个this指向当前点击的input元素*/
                    console.log(this);
                },
                nodes: [{ ...
                }]
            });
        });
        丿淡忘 Forgotten0
        2017/10/16 14:54:50

        怎们给复选框添加 额外的属性    用来存值  即给复选框添加data-xxx="yyy"属性   还有获取这个值的方法

        xta fnhc tewq1
        2017/10/17 20:43:05
        data: {//为元素添加额外数据,即在元素上添加data-xxx="yyy",可选
        	nodeName: "常用文件夹",
        	alias: "changyong"
        }

        在节点中添加这个属性

    回复
    丿淡忘 Forgotten 0
    2017/10/14 10:31:53

    选中复选框后 怎们获取选中的值啊

    回复
    977244996 0
    2017/10/13 16:32:08

    为什么  按照你的方法   复选框 选不上啊

        MT0
        2017/11/2 11:33:59

        我也是啊

    回复
    Wiley 0
    2017/10/11 19:34:36
    作者,现在还维护吗?目前我下载下来,复选框怎么是个图?我用的layui 2.0的版本,主要替换了你的tree,jquery 用的2.2.4版本,其余css原有layui自带不变,然后就是复制的你的demo中树形数据。没效果。
        xta fnhc tewq0
        2017/10/13 10:30:32

        我感觉layui你要用我的这个版本

    回复
    那抹???谁藏╀ 0
    2017/9/14 20:10:35

    这个看起来不错

        二,才叫范^0
        2017/9/21 17:59:14

        看起来是不错

    回复
    zzz 0
    2017/9/12 18:54:24
    请问 layUI更新2.0版本以后不兼容,是否有解决办法?
        xta fnhc tewq0
        2017/9/13 22:24:30
        这个目前没有,我没有拿到他的源码
    回复
    ≮想伱越久≯ 0
    2017/9/12 11:06:11
    onchange: function() { //当当前input发生变化后所执行的回调    console.log(this);},

    逗号报错算什么意思

        xta fnhc tewq0
        2017/9/13 22:23:51
        一个小括号被注释掉了,你把注释放到逗号后面就没事了
    回复
    ≮想伱越久≯ 0
    2017/9/12 11:05:21

    逗号报错?????这算啥yisi啊?

    回复
取消回复