82 lines
2.4 KiB
HTML
82 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|||
|
|
<title>头部编辑
|
|||
|
|
</title>
|
|||
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-layout layui-layout-admin">
|
|||
|
|
<div id="header"></div>
|
|||
|
|
<div id="side"></div>
|
|||
|
|
<div class="layui-body" style="left: 250px; top: 100px;">
|
|||
|
|
<button id="button">test</button>
|
|||
|
|
<div id="test1"></div>
|
|||
|
|
</div>
|
|||
|
|
<div id="footer"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="/layui/layui.js"></script>
|
|||
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var inst1
|
|||
|
|
var tree
|
|||
|
|
var myData = [{
|
|||
|
|
title: 'ROOT' //一级菜单
|
|||
|
|
, id: 1
|
|||
|
|
, checked: false
|
|||
|
|
}]
|
|||
|
|
layui.use(['layer', 'form', 'element', 'tree'], function () {
|
|||
|
|
var layer = layui.layer
|
|||
|
|
, form = layui.form;
|
|||
|
|
var element = layui.element;
|
|||
|
|
tree = layui.tree;
|
|||
|
|
var index=1;
|
|||
|
|
inst1 = tree.render({
|
|||
|
|
elem: '#test1' //绑定元素
|
|||
|
|
, edit: ['add', 'update', 'del']
|
|||
|
|
, data: myData
|
|||
|
|
, id: 'myData'
|
|||
|
|
, showCheckbox: false
|
|||
|
|
, operate: function (obj) {
|
|||
|
|
var type = obj.type; //得到操作类型：add、update、del
|
|||
|
|
var data = obj.data; //得到当前节点的数据
|
|||
|
|
var elem = obj.elem; //得到当前节点元素
|
|||
|
|
if(type==='add'){
|
|||
|
|
++index;
|
|||
|
|
return index;
|
|||
|
|
}else if(type==='update'){
|
|||
|
|
console.log(JSON.stringify(data))
|
|||
|
|
console.log(JSON.stringify(elem))
|
|||
|
|
}else{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
$('#header').load("/admin/html/header.html");
|
|||
|
|
$('#side').load("/admin/html/side.html");
|
|||
|
|
$('#footer').load("/html/footer.html");
|
|||
|
|
$('#button').click(function () {
|
|||
|
|
layer.msg(JSON.stringify(tree.getChecked('myData')))
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
#icon {
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.body {
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|