337 lines
11 KiB
HTML
337 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<title>树形表格</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="keywords" content="">
|
||
|
|
<link href="" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="../../component/layui/css/layui.css">
|
||
|
|
<style type="text/css">
|
||
|
|
p {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.layui-form-checkbox[lay-skin=primary] {
|
||
|
|
padding-left: 0
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
margin:10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="layui-row layui-bg-gray">
|
||
|
|
|
||
|
|
<div class="layui-card">
|
||
|
|
<div class="layui-card-header">树形表格</div>
|
||
|
|
<div class="layui-card-body">
|
||
|
|
|
||
|
|
|
||
|
|
<blockquote class="layui-elem-quote">基础操作</blockquote>
|
||
|
|
<p>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="expand" onmouseover="showTips1()">展开</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="collapse" onmouseover="showTips2()">收起</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="destory" onmouseover="showTips10()">销毁</button>
|
||
|
|
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="all" onmouseover="showTips8()">获取所有节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="selected" onmouseover="showTips3()">获取选中节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="unSelected" onmouseover="showTips17()">获取未选中节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="getNode" onmouseover="showTips9()">获取节点信息</button>
|
||
|
|
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="expandNode" onmouseover="showTips11()">展开节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="getNodeByParam" onmouseover="showTips20()">查找节点</button>
|
||
|
|
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="collapseNode" onmouseover="showTips12()">折叠节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="checkNode" onmouseover="showTips13()">勾选节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="uncheckNode" onmouseover="showTips14()">取消勾选节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="checkAllNode" onmouseover="showTips18()">勾选全部节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="unCheckAllNode" onmouseover="showTips19()">取消勾选全部节点</button>
|
||
|
|
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="disableNode" onmouseover="showTips15()">禁用checkbox</button>
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-primary" id="ableNode" onmouseover="showTips16()">解禁checkbox</button>
|
||
|
|
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<blockquote class="layui-elem-quote">增删改查</blockquote>
|
||
|
|
<p>
|
||
|
|
<button class="layui-btn layui-btn-sm" id="addNode2" onmouseover="showTips4()">添加根节点</button>
|
||
|
|
<button class="layui-btn layui-btn-sm" id="addNode" onmouseover="showTips5()">添加子节点</button>
|
||
|
|
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-normal" id="editNode" onmouseover="showTips6()">编辑节点</button>
|
||
|
|
|
||
|
|
<button class="layui-btn layui-btn-sm layui-btn-danger" id="removeNode" onmouseover="showTips7()">删除节点</button>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id="demo"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script src="../../component/layui/layui.js"></script>
|
||
|
|
|
||
|
|
<script src="../../modules/lay-config.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
function del(row) {
|
||
|
|
alert(row.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
var layout = [
|
||
|
|
{ name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
|
||
|
|
{ name: 'id', field: 'id', headerClass: 'value_col', colClass: 'value_col', style: ''},
|
||
|
|
{ name: '文本', field: 'text', headerClass: 'value_col', colClass: 'value_col', style: ''},
|
||
|
|
{
|
||
|
|
name: '操作',
|
||
|
|
headerClass: 'value_col',
|
||
|
|
colClass: 'value_col',
|
||
|
|
style: 'width: 20%',
|
||
|
|
render: function(row) {
|
||
|
|
return "<a class='layui-btn layui-btn-danger layui-btn-sm' onclick='del(" + row + ")'><i class='layui-icon'></i> 删除</a>"; //列渲染
|
||
|
|
}
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
layui.use(['form', 'treetable', 'layer'], function() {
|
||
|
|
var layer = layui.layer, form = layui.form, $ = layui.jquery;
|
||
|
|
|
||
|
|
var tree = layui.treetable({
|
||
|
|
elem: '#demo', //传入元素选择器
|
||
|
|
spreadable: false, //设置是否全展开，默认不展开
|
||
|
|
checkbox : true,
|
||
|
|
nodes: [{
|
||
|
|
"id": "1",
|
||
|
|
"name": "父节点1",
|
||
|
|
"text":"测试",
|
||
|
|
"checked" : false,
|
||
|
|
"children": [{
|
||
|
|
"id": "11",
|
||
|
|
"name": "子节点11",
|
||
|
|
"text":""
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "12",
|
||
|
|
"name": "子节点12",
|
||
|
|
"text":""
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "2",
|
||
|
|
"name": "父节点2",
|
||
|
|
"text":"",
|
||
|
|
"checked" : true,
|
||
|
|
"children": [{
|
||
|
|
"id": "21",
|
||
|
|
"name": "子节点21",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "211",
|
||
|
|
"name": "子节点211",
|
||
|
|
"text":""
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "3",
|
||
|
|
"name": "父节点3",
|
||
|
|
"text":"",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
layout: layout,
|
||
|
|
callback: {
|
||
|
|
beforeCheck : treetableBeforeCheck,
|
||
|
|
onCheck : treetableOnCheck,
|
||
|
|
beforeCollapse : treetableBeforeCollapse,
|
||
|
|
onCollapse : treetableOnCollapse,
|
||
|
|
beforeExpand : treetableBeforeExpand,
|
||
|
|
onExpand : treetableOnExpand,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function treetableBeforeCheck(node){
|
||
|
|
alert("回调方法treetableBeforeCheck");
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
function treetableOnCheck(node){
|
||
|
|
alert("回调方法treetableOnCheck");
|
||
|
|
};
|
||
|
|
function treetableBeforeCollapse(){
|
||
|
|
alert("回调方法treetableBeforeCollapse");
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
function treetableOnCollapse(){
|
||
|
|
alert("回调方法treetableOnCollapse");
|
||
|
|
};
|
||
|
|
function treetableBeforeExpand(){
|
||
|
|
alert("回调方法treetableBeforeExpand");
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
function treetableOnExpand(){
|
||
|
|
alert("回调方法treetableOnExpand");
|
||
|
|
};
|
||
|
|
|
||
|
|
form.render();
|
||
|
|
|
||
|
|
$('#collapse').on('click', function() {
|
||
|
|
tree.collapse();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#expand').on('click', function() {
|
||
|
|
tree.expand();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#selected').on('click', function() {
|
||
|
|
console.log(tree.getSelected());
|
||
|
|
alert(JSON.stringify(tree.getSelected()));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#unSelected').on('click', function() {
|
||
|
|
console.log(tree.getUnSelected());
|
||
|
|
alert(JSON.stringify(tree.getUnSelected()));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#editNode').on('click', function() {
|
||
|
|
var node = tree.getNode("3");
|
||
|
|
node.name = '我就是变个名字';
|
||
|
|
tree.editNodeName(node);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#removeNode').on('click', function() {
|
||
|
|
var node = tree.getNode("2");
|
||
|
|
tree.removeNode(node);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#getNode').on('click', function() {
|
||
|
|
var node = tree.getNode("2");
|
||
|
|
alert(JSON.stringify(node));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#getNodeByParam').on('click', function() {
|
||
|
|
var node = tree.getNodeByParam("name", "子节点21", null);
|
||
|
|
alert(JSON.stringify(node));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#all').on('click', function() {
|
||
|
|
alert(JSON.stringify(tree.getNodes()));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#addNode').on('click', function() {
|
||
|
|
tree.addNode(tree.getNode("2"), {
|
||
|
|
"id": "22", "name": "子节点22", "text":"", "children": [{
|
||
|
|
"id": "221",
|
||
|
|
"name": "子节点221",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "2211",
|
||
|
|
"name": "子节点2211",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "22111",
|
||
|
|
"name": "子节点22111",
|
||
|
|
"text":"",
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "222",
|
||
|
|
"name": "子节点222",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "2221",
|
||
|
|
"name": "子节点2221",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "22211",
|
||
|
|
"name": "子节点22211",
|
||
|
|
"text":"",
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#addNode2').on('click', function() {
|
||
|
|
tree.addNode(null, {
|
||
|
|
"id": "4", "name": "父节点4", "text":"", "children": [{
|
||
|
|
"id": "41",
|
||
|
|
"name": "子节点41",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "411",
|
||
|
|
"name": "子节点411",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "4111",
|
||
|
|
"name": "子节点4111",
|
||
|
|
"text":"",
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "42",
|
||
|
|
"name": "子节点42",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "421",
|
||
|
|
"name": "子节点421",
|
||
|
|
"text":"",
|
||
|
|
"children": [{
|
||
|
|
"id": "4211",
|
||
|
|
"name": "子节点4211",
|
||
|
|
"text":"",
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#destory').on('click', function() {
|
||
|
|
tree.destory();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#expandNode').on('click', function() {
|
||
|
|
tree.expandNode(tree.getNode("2"), false);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#collapseNode').on('click', function() {
|
||
|
|
tree.collapseNode(tree.getNode("2"), false);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#checkNode').on('click', function() {
|
||
|
|
tree.checkNode(tree.getNode("1"), true);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#uncheckNode').on('click', function() {
|
||
|
|
tree.checkNode(tree.getNode("1"), false);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#disableNode').on('click', function() {
|
||
|
|
tree.setChkDisabled(tree.getNode("1"), true);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#ableNode').on('click', function() {
|
||
|
|
tree.setChkDisabled(tree.getNode("1"), false);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#checkAllNode').on('click', function() {
|
||
|
|
tree.checkAllNodes(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#unCheckAllNode').on('click', function() {
|
||
|
|
tree.checkAllNodes(false);
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|