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

所属分类:导航-文件树

 34190  144  查看评论 (112)
带有复选框可折叠的树形结构 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>


相关插件-文件树

jQuery文件树插件SimpleTree.js

jQuery文件树插件SimpleTree.js,代码少使用方便。
  文件树
 16105  45

jQuery树形下拉菜单

jQuery树形下拉菜单 支持Ajax异步加载jquery ajax tree menu
  文件树
 41380  126

js动态树插件DynamicTree

简单好用的 tree ,纯 js ,可编辑 Tree,并能导出为 html sql php
  文件树
 1583  4

纯手写完成“移动端权限树”插件

实现移动端权限树的全选,半选,以及不选的递归功能
  文件树
 20625  95

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

    红叶?? 0
    2018/1/20 11:54:57

    tree.js和layui.js是官方的,还是改过的

    回复
    ┵寄於~酝彦” 0
    2018/1/5 17:15:34

    好用吗?能实现吗

    回复
    ?? 0
    2017/12/18 11:25:10

    为什么 弄进 layui框架了  复选框不能用了  layui版本问题么?

        ┈┾??那份?`╃☆0
        2017/12/22 17:05:34

        没问题

        红叶??0
        2018/1/20 10:16:24

        我也遇到这个问题了,有什么好的解决办法

    回复
    luoqingsong 0
    2017/12/13 11:25:44

    什么时候发布一个兼容layui2.0的?

    回复
    0
    2017/12/11 15:38:06

    怎么获取复选框选中的值

    回复
    heart灵音指落 0
    2017/12/8 0:33:10

    怎么动态添加和删除节点?

        xta fnhc tewq0
        2017/12/8 9:53:14

        这个功能还没有哦

    回复
    CRayFish07 0
    2017/12/3 0:04:28
    luoqingsong 0
    2017/11/24 9:56:56

    用了你这个tree,其他的layerui组件没法在一个页面引用了。你说我怎么办

    回复
    luoqingsong 0
    2017/11/24 9:04:28

    再说一下,楼主虽然做了扩展,但是如果我和最新版本的layui一起引用,那么就需要引用两个版本的文件,很乱。非常不好

        西瓜0
        2017/11/25 16:28:34

        不是有js格式化工具吗,点一下的事。

        红叶??0
        2018/1/20 11:54:06

        也不好合并

    回复
    luoqingsong 0
    2017/11/24 9:03:36

    为什么初始化那么多的console日志也不关掉?还有下载过来的js文件是压缩过的。很不友好

        xta fnhc tewq0
        2017/11/25 15:17:11

        layer免费版是不开源的

    回复
取消回复