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

所属分类:导航-文件树

 89632  467  查看评论 (170)
分享到微信朋友圈
X
带有复选框可折叠的树形结构 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树形下拉菜单

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

jQuery文件树插件SimpleTree.js

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

jQuery结构图插件orgchart

jQuery横向组织结构图插件orgchart
  文件树
 19177  177

jQuery树型插件dtree(带搜索)

dtree选择部门或者选择部门下人员复选框单选框插件
  文件树
 62737  381

讨论这个项目(170)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    windsnow 0
    2019/5/21 10:06:37
    ????能用吗
        高志青0
        2020/5/18 17:38:09
        还没下载呢
    回复
    我就想叫小青蛙 0
    2019/3/27 14:42:49
    怎么获取选中的节点没说,坑
        糖妮tw0
        2019/4/1 15:36:17
        我也没看懂
    回复
    『夕』 0
    2019/3/1 16:12:47
    下载不下来,能发下嘛 465596031@qq.com 回复
    0
    2019/1/9 9:26:00
    不错不错
        zhukeqiang0
        2019/2/28 14:01:37
        你用过了?
    回复
    じ空白格 0
    2018/12/20 18:28:10
    怎么把后台给的数据替换进去呢,在线等 挺急的
        xta fnhc tewq0
        2019/1/8 6:47:38
        目前还不支持,待后续继续开发
        zhukeqiang0
        2019/2/28 14:03:13
        循环拼接,可以吧
    回复
    青梅绿茶 0
    2018/12/19 14:48:24
    怎么传值进去
        SoDo0
        2019/5/23 10:49:56
        直接赋值
    回复
    我应在江湖悠悠饮一壶浊酒 0
    2018/12/14 13:23:53
    下载不下来,能发下嘛 511150249@qq.com
        windsnow0
        2019/5/21 10:08:33
        这个好用吗
    回复
    追风 0
    2018/11/7 15:43:24
    不错的插件,我很想用 回复
    timao8023 0
    2018/11/5 11:34:44
    能给分享一下吗 下不下来 1433521857@qq.com
        Persist.0
        2018/11/26 11:09:06
        能给我分享一下吗 741029584@qq.com 谢谢各位大神。。。。。
    回复
    tangpeng 0
    2018/9/25 16:18:52
    现在还没看懂,仔细看看,应该是好东西,主要我水平太低。赞一个
        Survival0
        2018/11/5 12:45:44
        你好 可以分享一下吗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复