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

LayUI是現(xiàn)在比較流行的一款前端框架，也有很多人基于LayUI開發(fā)了很多不錯(cuò)的組件，比如treetable樹形表格。因?yàn)閠reetable是第三方基于LayUI開發(fā)的，所以需要先用Layui引入一下文件。

	

		
		

			
			

				
				

					
				

			

			

				
				

					layui.config({
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					base : 'static/layui/'
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					}).extend({
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treetable : 'treetable-lay/treetable'
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					});
				

			

		

	

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

之后頁(yè)面只需要引入LayUI的CSS和JS就可以了。

頁(yè)面給一個(gè)table標(biāo)簽，用于顯示treetable中的數(shù)據(jù)樣式。

<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請(qǐng)求加載數(shù)據(jù)及設(shè)置表格樣式。

	

		
		

			
			

				
				

					
				

			

			

				
				

					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, //樹形圖標(biāo)顯示在第幾列
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeSpid: '0', //最上級(jí)的父級(jí)id
				

			

		

		

			
			

				
				

					
				

			

			

				
				

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

			

		

		

			
			

				
				

					
				

			

			

				
				

					treePidName: 'parentId', //父級(jí)節(jié)點(diǎn)字段
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeDefaultClose: false, //是否默認(rèn)折疊
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					treeLinkage: false, //父級(jí)展開時(shí)是否自動(dòng)展開所有子級(jí)
				

			

		

		

			
			

				
				

					
				

			

			

				
				

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

			

		

		

			
			

				
				

					
				

			

			

				
				

					url: 'menu/treedata',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					toolbar: '#toolbarDemo',
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					page: false,
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					cols: [ [
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{type:'radio'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'name', title: '菜單名稱'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

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

			

		

		

			
			

				
				

					
				

			

			

				
				

					{field: 'icon' , hide : true, title: '圖標(biāo)'},
				

			

		

		

			
			

				
				

					
				

			

			

				
				

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

			

		

		

			
			

				
				

					
				

			

			

				
				

					] ],
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					//數(shù)據(jù)渲染完的回調(diào)
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					done: function () {
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					//關(guān)閉加載
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					layer.closeAll('loading');
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					}
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					})
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					};
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					renderTable();
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					});
				

			

		

	

其中URL地址為請(qǐng)求數(shù)據(jù)地址。后臺(tái)對(duì)應(yīng)的方法。

	

		
		

			
			

				
				

					
				

			

			

				
				

					@RequestMapping(value="/treedata")
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					@ResponseBody
				

			

		

		

			
			

				
				

					
				

			

			

				
				

					public Object list(TbMenuForm form){
				

			

		

		

			
			

				
				

					
				

			

			

				
 

                       
 以上是由福州網(wǎng)站建設(shè)的小編為你分享了"LayUI樹形表格treetable使用詳解"文章，如果你在這方面有什么問題，隨時(shí)聯(lián)系我們