treetable简单使用效果图展示
treeSelect使用效果图展示
首先引入插件所需的依赖
#具体地址根据实际情况而定
<link rel="stylesheet" type="text/css" href="../../static/integration/layui/css/layui.css"
th:href="@{/integration/layui/css/layui.css}">
<script type="application/javascript" src="../../static/integration/layui/layui.js"
th:src="@{/integration/layui/layui.js}"></script>
layui.config({
base : '/integration/layui/'
}).extend({
treetable : '/treetable-lay/treetable',
treeSelect : '/treeSelect/treeSelect'
})
treetable的使用
<table class="layui-hide" id = "treeTable" lay-filter="treeTable"></table>
var selectMenuData;
layui.use(['treetable', 'table', 'layer'], function () {
var $ = layui.jquery;
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
var renderTable = function () {
layer.load(2);
treetable.render({
height: 'full-160',
id: 'treeTable',
treeColIndex: 1,
treeSpid: '0',
treeIdName: 'id',
treePidName: 'parentId',
treeDefaultClose: true,
treeLinkage: false,
elem: '#treeTable',
url: '/menu/list',
toolbar: '#toolbarDemo',
page: false,
cols: [[
{type: 'radio'},
{field: 'name', title: '菜单名称'},
{field: 'url', title: '地址'},
{
field: 'icon', title: '图标',
templet: function (item) {
return item.icon == null ? '' : '<i class="' + item.icon + ' fa-lg"></i>';
}
},
{
field: 'type', title: '类型',
templet: function (item) {
if (item.type === 'C') {
return '<span class="label label-primary">目录</span>';
}
if (item.type === 'M') {
return '<span class="label label-success">菜单</span>';
}
if (item.type === 'B') {
return '<span class="label label-warning">按钮</span>';
}
}
},
{field: 'orderNum', title: '排序'},
{field: 'authorization', title: '授权标识'}
]],
done: function () {
layer.closeAll('loading');
}
})
};
renderTable();
table.on('radio(treeTable)', function (obj) {
selectMenuData = obj.data;
});
})
treeSelect的使用
<input type="text" class="form-control" style="cursor:pointer;" id="tree-select" lay-filter="tree"/>
var refreshTreeSelect;
var selectTree;
layui.use(["treeSelect", "form", "tree"], function () {
var form = layui.form;
var tree = layui.tree;
var treeSelect = layui.treeSelect;
treeSelect.render({
elem: '#tree-select',
data: '/menu/treeSelect',
type: 'post',
placeholder: '请选择菜单',
search: true,
style: {
folder: {
enable: true
},
line: {
enable: true
}
},
click: function(d){
$("#parentId").val(d.current.id);
},
success: function (res) {
treeSelect.refresh('tree');
}
});
refreshTreeSelect = function () {
treeSelect.refresh('tree');
}
selectTree = function (id) {
treeSelect.checkNode('tree', id);
}
});
相关工具包
treetable
treeSelect