https://blog.csdn.net/qq_40205116/article/details/89672232

LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。

	

		
		

			
			

				
				

					
				

			

			

				
				

					layui.config({
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					base : 'static/layui/'
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					}).extend({
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treetable : 'treetable-lay/treetable'
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					});
				

			

		

	

之后先看一下显示的效果。

之后页面只需要引入LayUI的CSS和JS就可以了。

页面给一个table标签，用于显示treetable中的数据样式。

<table class="layui-hide" id = "menu" lay-filter="menu"></table>

表格左上方的工具栏按钮组件代码。

	

		
		

			
			

				
				

					
				

			

			

				
				

					<script type="text/html" id="toolbarDemo">
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					<div class="layui-btn-group">
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</button>
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					<button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon">&#xe642;</i>修改</button>
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					<button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					<button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					</div>
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					</script>
				

			

		

	

JS请求加载数据及设置表格样式。

	

		
		

			
			

				
				

					
				

			

			

				
				

					yui.use(['treetable', 'table', 'layer'], function () {
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					var table = layui.table;
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					var layer = layui.layer;
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					var treetable = layui.treetable;
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					//渲染表格
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					var renderTable = function(){
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					layer.load(2); //加载层
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treetable.render({
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					height: 'full-160',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					id:'menu',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeColIndex: 1, //树形图标显示在第几列
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeSpid: '0', //最上级的父级id
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeIdName: 'id', //id字段的名称
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treePidName: 'parentId', //父级节点字段
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeDefaultClose: false, //是否默认折叠
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeLinkage: false, //父级展开时是否自动展开所有子级
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					elem: '#menu', //表格id
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					url: 'menu/treedata',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					toolbar: '#toolbarDemo',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					page: false,
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					cols: [ [
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{type:'radio'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'name', title: '菜单名称'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'url' , title: '地址'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'icon' , hide : true, title: '图标'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'idx', title: '排序'}
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					] ],
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					//数据渲染完的回调
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					done: function () {
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					//关闭加载
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					layer.closeAll('loading');
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					}
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					})
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					};
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					renderTable();
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					});
				

			

		

	

其中URL地址为请求数据地址。后台对应的方法。

	

		
		

			
			

				
				

					
				

			

			

				
				

					@RequestMapping(value="/treedata")
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					@ResponseBody
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					public Object list(TbMenuForm form){
				

			

		

		

			
			

				
				

					
				

			

			

				
 

                       
 以上是由福州网站建设的小编为你分享了"LayUI树形表格treetable使用详解"文章，如果你在这方面有什么问题，随时联系我们