Fetch the repository succeeded.
This action will force synchronization from 一如既往/hg-layui-admin-ui, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="./css/font-awesome.min.css">
<link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">
<link rel="stylesheet" href="./lib/admin/admin.css" media="all">
<link rel="stylesheet" href="./lib/Scrollbar/jquery.scrollbar.css">
<script type="text/javascript" src="./lib/admin/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./lib/Scrollbar/jquery.scrollBar.js"></script>
<script type="text/javascript" src="./lib/layui/layui.js"></script>
<script type="text/javascript" src="./lib/admin/admin.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.demo-tree{
width: 500px; height: 500px;
padding-top: 15px;
}
.demo-tree-box{
width: 500px; height: 400px;border: 1px #eee solid;overflow-y: auto;
}
.demo-input-tree{
height: auto;
width: 100%;
display: none;
position: absolute;
top: 100%;
background-color: #fff;
z-index: 100;
max-height: 500px;
}
.layui-input{
width: 500px;
cursor: pointer;
}
</style>
</head>
<body class="layui-body-content">
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">
<i class="fa fa-file-text fa-fw"></i> 树形组件
<span class="layui-layout-right">
<a href="javascript:;" hg-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</span>
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">部门:</label>
<div class="layui-inline">
<input class="layui-input layui-input-sm" type="text" name="dept" lay-verify="required" placeholder="请选择部门" autocomplete="off" readonly="true">
<div id="treeinputid" class="demo-input-tree demo-tree-box"></div>
</div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="sreach"><i
class="layui-icon layui-icon-sm"></i></button>
</div>
</div>
</div>
<div class="">
<button class="layui-btn layui-btn-sm layui-btn-normal"
onclick="getChecked()"><i
class="layui-icon"></i>获取选中</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" onclick="setChecked()"><i
class="layui-icon"></i>设置节点勾选</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="reload()"><i
class="layui-icon"></i>实例重载</button>
</div>
<div class="demo-tree">
<div id="treeid" class="demo-tree demo-tree-box"></div>
</div>
</div>
</div>
</div>
</body>
<script>
var data = [{
id: 'hg-100',
field: '1',
level: '1',
title: '父节点100',
spread: true,
children: [{
id: 'hg-100101',
field: '3',
level: '2',
title: '子节点100101',
children: [{
id: 'hg-100101101',
field: '4',
level: '3',
title: '子节点100101101'
}, {
id: 'hg-100101102',
field: '5',
level: '3',
title: '子节点100101102'
}, {
id: 'hg-100101103',
field: '6',
level: '3',
title: '子节点100101103'
}]
}]
}, {
id: 'hg-200',
field: '2',
level: '1',
title: '父节点200',
lazy: true
}];
//treeid
var tree = hg.tree.datatree('treeid', data, true);
tree.onspread = function() {
var obj = this;
//模拟post后台数据,延迟2秒
setTimeout(() => {
var data = getTreeJson(obj.data.id); //异步获取数据
obj.lazytree(data);
}, 2000);
}
tree.onclick = function() {
var obj = this;
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.state); //得到当前节点的展开状态:open、close、normal
console.log(obj.elem); //得到当前节点元素
console.log(obj.data.children); //当前节点下是否有子节点
}
tree.oncheck = function() {
var obj = this;
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.checked); //得到当前节点的展开状态:open、close、normal
console.log(obj.elem); //得到当前节点元素
}
// 模拟后台返回数据
function getTreeJson(id) {
if (id === 'hg-200') {
return [{
id: 'hg-200101',
level: '2',
title: '子节点200101'
}, {
id: 'hg-200102',
level: '2',
title: '子节点200102',
lazy: true
}];
}
if (id === 'hg-200102') {
return [{
id: 'hg-200102101',
level: '3',
title: '子节点200102101'
}, {
id: 'hg-200102102',
level: '3',
title: '子节点200102102',
lazy: true
}];
}
if (id === 'hg-200102102') {
return [{
id: 'hg-200102102101',
level: '4',
title: '子节点200102102101'
}, {
id: 'hg-200102102102',
level: '4',
title: '子节点200102102102',
}];
}
}
//获得选中的节点
function getChecked(){
var checkData = tree.getChecked();
hg.msg(JSON.stringify(checkData));
}
//设置节点勾选
function setChecked(){
tree.setChecked(['hg-100101101','hg-100101102']);
}
//实例重载
function reload(){
tree.reload();
hg.msg('重载成功!')
}
//treeinput
var treeinput;
$("[name='dept']").on("click",function (e) {
e.stopPropagation();
const deprt = this;
if(!treeinput) {
treeinput = hg.tree.datatree('treeinputid', data, true);
treeinput.onspread = function() {
var obj = this;
//模拟post后台数据,延迟2秒
setTimeout(() => {
var data = getTreeJson(obj.data.id); //异步获取数据
obj.lazytree(data);
}, 2000);
}
treeinput.onclick = function() {
var obj = this;
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.state); //得到当前节点的展开状态:open、close、normal
console.log(obj.elem); //得到当前节点元素
console.log(obj.data.children); //当前节点下是否有子节点
}
treeinput.oncheck = function() {
var obj = this;
var checkData = treeinput.getChecked();
var map = getmap(checkData);
$(deprt).val(map.value.join(','));
}
}
$("#treeinputid").toggle();
})
//监听表单提交事件
hg.form.onsubmit('sreach', function (data) {
$("#treeinputid").hide();
var checkData = treeinput.getChecked();
var map = getmap(checkData);
var init = map.result;
hg.msg(JSON.stringify(init));
});
const getmap = (target, result = []) => {
layui.each(target,(i,e)=>{
e.id && result.push({id:e.id,title:e.title});
e.children && getmap(e.children, result);
});
let titles = result.map(e=>{return e.title});
return {value:titles,result:result};
};
</script>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。