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

所属分类:导航-文件树

 11375  58  查看评论 (20)
带有复选框可折叠的树形结构 ie兼容8
<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>


相关插件-文件树

树形插件

wdTree是一个轻量级jQuery插件用于创建一个带有嵌套Check Boxe的树形控件。
  文件树
 27749  32

jquery.treeview.js树控件

jquery.treeview.js树控件
  文件树
 71021  43

无级别树形菜单插件

通过添加JSON数据页面同步添加菜单
  文件树
 5280  19

纯javript实用多级目录树结构插件

aimaraJS是一款非常实用的纯javript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都
  文件树
 16696  33

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

    …『赵姗姗』 0
    2017/4/26 10:36:40
    选中之后怎么把选中当前条的ID识别拿出来传送给后台呢 回复
    ╪_Μr.J︷. 0
    2017/4/25 18:02:59
    不错,好用,layui自带的tree没有复选框,这个做得好 回复
    玩儿世倍恭 0
    2017/4/14 11:30:02

    请问这款插件能加载json数据吗?

        xta fnhc tewq0
        2017/4/19 10:44:00

        这个插件就是依赖于json数据的呀

    回复
    手机用户2462517041 0
    2017/4/9 10:17:31

    想问下插件下载后应该怎么引到项目中,添加那些js文件以及css样式

        你听我说0
        2017/4/18 14:08:14
        可以到layui官网查看
        ╪_Μr.J︷.0
        2017/4/25 18:06:00

        直接把js代码放进去

    回复
    小乖 0
    2017/4/2 23:24:27

    不错

        phermis0
        2017/4/6 17:21:16

        亲 你下载了嘛  给我发一份吧

        你听我说0
        2017/4/18 12:13:57

        亲,麻烦发我一份,谢谢

    回复
    完美古董少年 0
    2017/3/8 11:56:52

    不管怎么样,你这插件收3JQ币,但是可以让更多的前段新手知道layUi,轻量化前端插件,大家可以去官网下载整套探究使用,这个控制数是作者提炼出来的,加油!

        xta fnhc tewq0
        2017/3/8 13:43:01
        谢谢
    回复
    shenchuan 0
    2017/3/8 10:49:32
    淡如烟岚JS 0
    2017/2/24 14:28:50
    caizl 0
    2017/2/22 10:50:20

    有没有勾选事件啊

    回复
    - Jony.▲ 0
    2017/2/14 15:17:37
取消回复