<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui.css" />
<style type="text/css">
body {
height: 1200px;
}
#demo {
margin: 30px 100px;
}
.descripttion {
width: 1000px;
margin: 50px;
}
body > ul {
display: inline-block;
width: 400px;
margin: 20px;
}
</style>
</head>
<body>
<ul id="demo"></ul>
<script src="layui.js" charset="utf-8"></script>
<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")
},
data: {//为元素添加额外数据，即在元素上添加data-xxx="yyy"，可选
hasChild: true
},
nodes: [ //节点
{
name: '常用文件夹', //节点名称
// spread: true, //是否是展开状态，true为展开状态
href: "http://www.baidu.com",//设置节点跳转的链接，如果不设置则不会跳转
target: "_self",//节点链接打开方式
alias: 'changyong',
data: {
nodeName: "常用文件夹",
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,
data: {
nodeName: "我的邮箱",
alias: "email"
},
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>
</body>
</html>
layer 下拉树形菜单带有复选框
4星 · 超过85%的资源 需积分: 50 157 浏览量
2017-05-22
10:17:46
上传
评论 1
收藏 483KB ZIP 举报 
layer 下拉树形菜单带有复选框 （105个子文件） 
layui.css 31KB layer.css 14KB laydate.css 8KB layui.mobile.css 8KB code.css 1KB iconfont.eot 52KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 48.gif 3KB 0.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB 35.gif 2KB 15.gif 2KB loading-2.gif 2KB 37.gif 1KB 68.gif 1KB 52.gif 777B loading-1.gif 701B
Layui2.html 6KB layui.all.js 174KB jquery.js 95KB mobile.js 33KB layer.js 21KB tree.js 16KB tree.js 16KB laydate.js 13KB layedit.js 12KB form.js 7KB element.js 7KB layui.js 5KB laypage.js 3KB upload.js 2KB flow.js 2KB laytpl.js 2KB code.js 1KB util.js 1KB
icon.png 11KB共 105 条
- 1
- 2
- 1
- 2
- 3
前往页