mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
6.0 KiB
262 lines
6.0 KiB
|
|
<!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"> |
|
<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" media="all"> |
|
|
|
<style> |
|
body{padding: 100px;} |
|
#test1,#test2{margin-bottom: 100px; width: 400px;} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="layui-btn-container"> |
|
<button type="button" class="layui-btn" lay-demo="getChecked">获取选中数据</button> |
|
<button type="button" class="layui-btn" lay-demo="setChecked">设置节点勾选</button> |
|
<button type="button" class="layui-btn" lay-demo="reload">重载实例</button> |
|
</div> |
|
|
|
<div class="layui-form"> |
|
<div class="layui-form-item"> |
|
<label class="layui-form-label">表单内</label> |
|
<div class="layui-input-block"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div id="test1"></div> |
|
<div id="test2"></div> |
|
|
|
<script src="../src/layui.js"></script> |
|
<script> |
|
layui.use(['tree', 'layer', 'util'], function(){ |
|
var $ = layui.$ |
|
,tree = layui.tree |
|
,layer = layui.layer |
|
,util = layui.util |
|
,index = 100; |
|
|
|
//数据源 |
|
var data1 = [{ |
|
title: '一级1' |
|
,id: 1 |
|
,children: [{ |
|
title: '二级1-1' |
|
,id: 3 |
|
,href: 'https://www.layui.com/doc/' |
|
,children: [{ |
|
title: '三级1-1-3' |
|
,id: 23 |
|
,children: [{ |
|
title: '四级1-1-3-1' |
|
,id: 24 |
|
,children: [{ |
|
title: '五级1-1-3-1-1' |
|
,id: 30 |
|
},{ |
|
title: '五级1-1-3-1-2' |
|
,id: 31 |
|
}] |
|
}] |
|
},{ |
|
title: '三级1-1-1' |
|
,id: 7 |
|
,checked: true |
|
,children: [{ |
|
title: '四级1-1-1-1' |
|
,id: 15 |
|
//,checked: true |
|
,href: 'https://www.layui.com/doc/base/infrastructure.html' |
|
}] |
|
},{ |
|
title: '三级1-1-2' |
|
,id: 8 |
|
,children: [{ |
|
title: '四级1-1-2-1' |
|
,id: 32 |
|
}] |
|
}] |
|
},{ |
|
title: '二级1-2' |
|
,id: 4 |
|
,spread: true |
|
,children: [{ |
|
title: '三级1-2-1' |
|
,id: 9 |
|
,checked: true |
|
,disabled: true |
|
},{ |
|
title: '三级1-2-2' |
|
,id: 10 |
|
}] |
|
},{ |
|
title: '二级1-3' |
|
,id: 20 |
|
,children: [{ |
|
title: '三级1-3-1' |
|
,id: 21 |
|
},{ |
|
title: '三级1-3-2' |
|
,id: 22 |
|
}] |
|
}] |
|
},{ |
|
title: '一级2' |
|
,id: 2 |
|
,spread: true |
|
,children: [{ |
|
title: '二级2-1' |
|
,id: 5 |
|
,spread: true |
|
,children: [{ |
|
title: '三级2-1-1' |
|
,id: 11 |
|
},{ |
|
title: '三级2-1-2' |
|
,id: 12 |
|
}] |
|
},{ |
|
title: '二级2-2' |
|
,id: 6 |
|
,checked: true |
|
,children: [{ |
|
title: '三级2-2-1' |
|
,id: 13 |
|
},{ |
|
title: '三级2-2-2' |
|
,id: 14 |
|
,disabled: true |
|
}] |
|
}] |
|
},{ |
|
title: '一级3' |
|
,id: 16 |
|
,children: [{ |
|
title: '二级3-1' |
|
,id: 17 |
|
,fixed: true |
|
,children: [{ |
|
title: '三级3-1-1' |
|
,id: 18 |
|
},{ |
|
title: '三级3-1-2' |
|
,id: 19 |
|
}] |
|
},{ |
|
title: '二级3-2' |
|
,id: 27 |
|
,children: [{ |
|
title: '三级3-2-1' |
|
,id: 28 |
|
},{ |
|
title: '三级3-2-2' |
|
,id: 29 |
|
}] |
|
}] |
|
}]; |
|
|
|
//数据源 |
|
var data2 = [{ |
|
title: '控制台' |
|
,id: '1000' |
|
,spread: true |
|
,checked: true |
|
,children: [{ |
|
title: '概览' |
|
,id: '1001' |
|
,spread: true |
|
,checked: true |
|
},{ |
|
title: '域名' |
|
,id: '1002' |
|
,spread: true |
|
,checked: true |
|
}] |
|
}] |
|
|
|
tree.render({ |
|
elem: '#test1' |
|
,data: data1 |
|
,id: 'demoId1' |
|
,click: function(obj){ |
|
layer.msg(JSON.stringify(obj.data)); |
|
console.log(obj); |
|
} |
|
,oncheck: function(obj){ |
|
//console.log(obj); |
|
} |
|
,operate: function(obj){ |
|
var type = obj.type; |
|
if(type == 'add'){ |
|
//ajax操作，返回key值 |
|
return index++; |
|
}else if(type == 'update'){ |
|
console.log(obj.elem.find('.layui-tree-txt').html()); |
|
}else if(type == 'del'){ |
|
console.log(obj); |
|
}; |
|
} |
|
,showCheckbox: true //是否显示复选框 |
|
,accordion: 0 //是否开启手风琴模式 |
|
|
|
,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩 |
|
,isJump: 0 //点击文案跳转地址 |
|
,edit: true //操作节点图标 |
|
}); |
|
|
|
//按钮事件 |
|
util.event('lay-demo', { |
|
getChecked: function(othis){ |
|
var checkedData = tree.getChecked('demoId1'); |
|
layer.alert(JSON.stringify(checkedData), {shade:0}); |
|
console.log(checkedData); |
|
} |
|
,setChecked: function(){ |
|
tree.setChecked('demoId1', [1000, 1001, 1002]); |
|
} |
|
,reload: function(){ |
|
tree.reload('demoId1', { |
|
|
|
}); |
|
} |
|
}); |
|
|
|
tree.render({ |
|
elem: '#test2' |
|
,data: data1 |
|
//,expandClick: false |
|
,showLine: false //关闭连接线 |
|
,click: function(obj, state){ |
|
console.log(obj); |
|
} |
|
,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); |
|
} |
|
}); |
|
|
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |