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> |