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

LayUI是現在比較流行的一款前端框架，也有很多人基于LayUI開發(fā)了很多不錯的組件，比如treetable樹形表格。因為treetable是第三方基于LayUI開發(fā)的，所以需要先用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', //父級節(jié)點字段
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					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使用詳解"文章，如果你在這方面有什么問題，隨時聯系我們