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

所属分类:导航-文件树

 15674  78  查看评论 (45)
带有复选框可折叠的树形结构 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树形选择器

根据json字符串格式加载出一个树结构,通过设置可对树结构进行表格化
  文件树
 10501  28

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

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

jQuery树形结构插件ngJsTree

使用ngJsTree可以很方便的通过简单的配置快速实现复杂的树形结构,支持模糊查询、动态加载。
  文件树
 4593  12

jQuery多级列表树插件bootstrap-treeview

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。
  文件树
 33006  84

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

    友人A 0
    2017/6/15 17:03:01

    引入进去为啥没反应啊

        xta fnhc tewq0
        2017/6/19 16:51:41

        要有数据呀

    回复
    天边鱼 0
    2017/6/12 15:38:20

    给你们列举一下这里面的坑:

    1. layui.js 里面还引用了一个 tree.js ; 不仅这样, tree.js 还要必须按照作者那个目录放进项目才行, 那个tree.js必须放在lay/modules/tree.js 

    2. 图标的样式还必须要引用 iconfont.ttf , 如果要改的话, 还得去那个tree.js里面改, 这个js解压缩后的48行修改, 另外, 你还不能改那个 layui-icon layui-tree-spread; 因为那个还是绑定的... 改了就不能点击了... 非要改的话.. 还得去295行修改.......

    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; color: #289c97}

        xta fnhc tewq0
        2017/6/12 22:34:52

        拜托你看下这个插件的描述,是改良后的layer的树形插件,layui底层的东西我也不敢去动,因为它没有开源。

    回复
    ping01 0
    2017/6/12 11:32:43

    请问有谁有吗? 能发我一份吗?

    回复
    飞鸟 0
    2017/6/11 0:28:24

    请问  有谁下载了这个吗  能发我一份吗

    回复
    ingfuqi 0
    2017/6/7 14:43:25
    为什么我的复选框不能勾选那??
        飞鸟0
        2017/6/11 0:27:37

        里面做了修改  你可以查看你的元素  其实你复制下来的不是复选框   只是一个符号   所以选择不了

    回复
    改变自己 0
    2017/6/2 18:44:18

    你好  这样示例能发我一份吗?

    回复
    小卟╀ 0
    2017/6/1 16:38:21

    那个图标可以自己换吗

        xta fnhc tewq0
        2017/6/4 9:00:50

        暂时换不了

    回复
    axiaoli 0
    2017/5/29 0:17:51

    我觉得这个插件改的树形结构的id 有问题了,我传给id的所有值,再取回来全变样子了。。。。。

        xta fnhc tewq1
        2017/5/31 22:07:37
        你好,感谢你提出的问题。这个树形插件中input的ID我是用来确定当前input的唯一性,及用来查找当前input的父级input的。如果你要给当前input添加你自己的数据ID,我建议你在使用该插件的时候给当前节点添加一个data属性,然后它在页面中的展现结构就是data-xxx="xxx",这样你一样可以获取的到你想要的数据
    回复
    DEMON 0
    2017/5/27 15:33:45

    作者大人,我问你个问题,就是跟之前的问题差不多。

    选中之后怎么把选中当前条的ID识别拿出来传送给后台呢?

    不用立即作出响应,就是在执行另一个操作之前能够收集到选中信息,然后我要用这些信息来进行进一步搜索。

    举个实际的例子,

    我做一个综合检索,然后一边是您的树形结构(结构内就是一些分类信息),然后右边有一个搜索按钮,我输入检索信息,然后点击搜索按钮,要在树形结构中选定的分类内用我输入的信息,进行检索。

    我这样说您能明白吗?

        xta fnhc tewq0
        2017/5/31 23:09:33

        你的意思是要拿到所有被选中的复选框,然后再拿它们的值?

    回复
    你们曾经的森林哥~ 0
    2017/5/22 10:04:56
    需要一份,有人下载了吗,可以发我一份吗
        你们曾经的森林哥~0
        2017/5/22 13:07:56

        为什么input框不显示啊

    回复
取消回复