mirror of
https://gitee.com/layui/layui.git
synced 2025-10-26 18:59:15 +08:00
发布新版
This commit is contained in:
贤心
@@ -1,147 +1,218 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>树模块 - layui</title>
|
||||
<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">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 50px 100px;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../src/css/layui.css" media="all">
|
||||
|
||||
<style>
|
||||
body{padding: 150px;}
|
||||
#test1,#test2{margin-bottom: 100px; width: 400px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul id="demo"></ul>
|
||||
<div id="test1"></div>
|
||||
<div id="test2"></div>
|
||||
|
||||
<ul id="demo1" style="margin-top: 50px;"></ul>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script src="../dist/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['tree', 'layer'], function(){
|
||||
var tree = layui.tree
|
||||
,$ = layui.$
|
||||
,layer = layui.layer
|
||||
,index = 100;
|
||||
|
||||
//数据源
|
||||
var data1 = [{
|
||||
label: '一级1'
|
||||
,id: 1
|
||||
,children: [{
|
||||
label: '二级1-1'
|
||||
,id: 3
|
||||
,href: 'https://www.layui.com/doc/'
|
||||
,children: [{
|
||||
label: '三级1-1-3'
|
||||
,id: 23
|
||||
,children: [{
|
||||
label: '四级1-1-3-1'
|
||||
,id: 24
|
||||
,children: [{
|
||||
label: '五级1-1-3-1-1'
|
||||
,id: 30
|
||||
},{
|
||||
label: '五级1-1-3-1-2'
|
||||
,id: 31
|
||||
}]
|
||||
}]
|
||||
},{
|
||||
label: '三级1-1-1'
|
||||
,id: 7
|
||||
,children: [{
|
||||
label: '四级1-1-1-1'
|
||||
,id: 15
|
||||
,href: 'https://www.layui.com/doc/base/infrastructure.html'
|
||||
}]
|
||||
},{
|
||||
label: '三级1-1-2'
|
||||
,id: 8
|
||||
,children: [{
|
||||
label: '四级1-1-2-1'
|
||||
,id: 32
|
||||
}]
|
||||
}]
|
||||
},{
|
||||
label: '二级1-2'
|
||||
,id: 4
|
||||
,children: [{
|
||||
label: '三级1-2-1'
|
||||
,id: 9
|
||||
,disabled: true
|
||||
},{
|
||||
label: '三级1-2-2'
|
||||
,id: 10
|
||||
}]
|
||||
},{
|
||||
label: '二级1-3'
|
||||
,id: 20
|
||||
,children: [{
|
||||
label: '三级1-3-1'
|
||||
,id: 21
|
||||
},{
|
||||
label: '三级1-3-2'
|
||||
,id: 22
|
||||
}]
|
||||
}]
|
||||
},{
|
||||
label: '一级2'
|
||||
,id: 2
|
||||
,children: [{
|
||||
label: '二级2-1'
|
||||
,id: 5
|
||||
,children: [{
|
||||
label: '三级2-1-1'
|
||||
,id: 11
|
||||
},{
|
||||
label: '三级2-1-2'
|
||||
,id: 12
|
||||
}]
|
||||
},{
|
||||
label: '二级2-2'
|
||||
,id: 6
|
||||
,children: [{
|
||||
label: '三级2-2-1'
|
||||
,id: 13
|
||||
},{
|
||||
label: '三级2-2-2'
|
||||
,id: 14
|
||||
,disabled: true
|
||||
}]
|
||||
}]
|
||||
},{
|
||||
label: '一级3'
|
||||
,id: 16
|
||||
,children: [{
|
||||
label: '二级3-1'
|
||||
,id: 17
|
||||
,fixed: true
|
||||
,children: [{
|
||||
label: '三级3-1-1'
|
||||
,id: 18
|
||||
},{
|
||||
label: '三级3-1-2'
|
||||
,id: 19
|
||||
}]
|
||||
},{
|
||||
label: '二级3-2'
|
||||
,id: 27
|
||||
,children: [{
|
||||
label: '三级3-2-1'
|
||||
,id: 28
|
||||
},{
|
||||
label: '三级3-2-2'
|
||||
,id: 29
|
||||
}]
|
||||
}]
|
||||
}];
|
||||
|
||||
layui.use('tree', function(){
|
||||
var tree = layui.tree({
|
||||
elem: '#demo' //指定元素
|
||||
//,check: 'checkbox' //勾选风格
|
||||
,skin: 'as' //设定皮肤
|
||||
//,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
|
||||
,drag: true
|
||||
,click: function(item){ //点击节点回调
|
||||
console.log(item)
|
||||
}
|
||||
,nodes: [ //节点
|
||||
{
|
||||
name: '常用文件夹'
|
||||
,id: 1
|
||||
,alias: 'changyong'
|
||||
,children: [
|
||||
{
|
||||
name: '所有未读'
|
||||
,id: 11
|
||||
//,href: 'http://www.layui.com/'
|
||||
,alias: 'weidu'
|
||||
}, {
|
||||
name: '置顶邮件'
|
||||
,id: 12
|
||||
}, {
|
||||
name: '标签邮件'
|
||||
,id: 13
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '我的邮箱'
|
||||
,id: 2
|
||||
,spread: true
|
||||
,children: [
|
||||
{
|
||||
name: 'QQ邮箱'
|
||||
,id: 21
|
||||
,spread: true
|
||||
,children: [
|
||||
{
|
||||
name: '收件箱'
|
||||
,id: 211
|
||||
,children: [
|
||||
{
|
||||
name: '所有未读'
|
||||
,id: 2111
|
||||
}, {
|
||||
name: '置顶邮件'
|
||||
,id: 2112
|
||||
}, {
|
||||
name: '标签邮件'
|
||||
,id: 2113
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '已发出的邮件'
|
||||
,id: 212
|
||||
}, {
|
||||
name: '垃圾邮件'
|
||||
,id: 213
|
||||
}
|
||||
]
|
||||
}, {
|
||||
name: '阿里云邮'
|
||||
,id: 22
|
||||
,children: [
|
||||
{
|
||||
name: '收件箱'
|
||||
,id: 221
|
||||
}, {
|
||||
name: '已发出的邮件'
|
||||
,id: 222
|
||||
}, {
|
||||
name: '垃圾邮件'
|
||||
,id: 223
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
var tree1 = tree.render({
|
||||
elem: '#test1'
|
||||
,data: data1
|
||||
,click: function(obj){
|
||||
layer.msg(JSON.stringify(obj.data))
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
//生成一个模拟树
|
||||
var createTree = function(node, start){
|
||||
node = node || function(){
|
||||
var arr = [];
|
||||
for(var i = 1; i < 10; i++){
|
||||
arr.push({
|
||||
name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||
});
|
||||
,oncheck: function(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
return arr;
|
||||
}();
|
||||
start = start || 1;
|
||||
layui.each(node, function(index, item){
|
||||
if(start < 10 && index < 9){
|
||||
var child = [
|
||||
{
|
||||
name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
|
||||
}
|
||||
];
|
||||
node[index].children = child;
|
||||
createTree(child, index + start + 1);
|
||||
,onsearch:function(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
,operate: function(obj){
|
||||
var type = obj.type;
|
||||
if(type == 'add'){
|
||||
//ajax操作，返回key值
|
||||
return index++;
|
||||
}else if(type == 'edit'){
|
||||
console.log(obj.elem.find('.layui-tree-txt').html());
|
||||
}else if(type == 'del'){
|
||||
console.log(obj);
|
||||
};
|
||||
}
|
||||
,dragend: function(state, obj, target){
|
||||
console.log(state, obj, target);
|
||||
}
|
||||
,showCheckbox: true //是否显示复选框
|
||||
,key: 'id' //自定义唯一标识的字段名
|
||||
,checked: [6, 7, 9] //选中节点(依赖于 showCheckbox 以及 key 参数)
|
||||
,spread: [2, 4, 5] //展开节点(依赖于 key 参数)
|
||||
,accordion: 0 //是否开启手风琴模式
|
||||
,expandClick: true //选择在点击节点(true)/箭头图标(false)的时候展开节点
|
||||
,isJump: 0 //点击文案跳转地址
|
||||
,renderContent: true //增删改
|
||||
,showSearch: true //是否打开节点过滤
|
||||
,draggable: true //是否开启节点拖拽
|
||||
});
|
||||
|
||||
console.log(tree1.getCheck()); //返回当前勾选节点
|
||||
tree1.setCheck([2, 3]); //设置节点勾选
|
||||
|
||||
|
||||
|
||||
|
||||
tree.render({
|
||||
elem: '#test2'
|
||||
,data: data1
|
||||
//,expandClick: false
|
||||
,showLine: false //关闭连接线
|
||||
,click: function(obj, state){
|
||||
console.log(obj[0]);
|
||||
}
|
||||
,oncheck: function(obj, checked, child){
|
||||
if(checked){
|
||||
console.log(obj[0]);
|
||||
}
|
||||
}
|
||||
,onsearch: function(data, num){
|
||||
console.log(num);
|
||||
}
|
||||
,dragstart: function(obj, parent){
|
||||
console.log(obj, parent);
|
||||
}
|
||||
,dragend: function(state, obj, target){
|
||||
console.log(state, obj, target);
|
||||
}
|
||||
});
|
||||
return node;
|
||||
};
|
||||
|
||||
layui.tree({
|
||||
elem: '#demo1' //指定元素
|
||||
,nodes: createTree()
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<pre class="layui-code">
|
||||
# layui.tree-v2 备忘
|
||||
* check参数 - checkbox、radio的支持
|
||||
* 拖拽的支持
|
||||
</pre>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user