https://blog.csdn.net/qq_40205116/article/details/89672232
LayUI是現(xiàn)在比較流行的一款前端框架,也有很多人基于LayUI開發(fā)了很多不錯(cuò)的組件,比如treetable樹形表格。因?yàn)閠reetable是第三方基于LayUI開發(fā)的,所以需要先用Layui引入一下文件。
-
-
-
-
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"></i>新增</button>
-
<button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon"></i>修改</button>
-
<button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon"></i>刪除</button>
-
<button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon"></i>刷新</button>
-
-
JS請(qǐng)求加載數(shù)據(jù)及設(shè)置表格樣式。
-
yui.use(['treetable', 'table', 'layer'], function () {
-
-
-
var treetable = layui.treetable;
-
-
var renderTable = function(){
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{field: 'name', title: '菜單名稱'},
-
{field: 'url' , title: '地址'},
-
{field: 'icon' , hide : true, title: '圖標(biāo)'},
-
{field: 'idx', title: '排序'}
-
-
-
-
-
layer.closeAll('loading');
-
-
-
-
-
其中URL地址為請(qǐng)求數(shù)據(jù)地址。后臺(tái)對(duì)應(yīng)的方法。
-
@RequestMapping(value="/treedata")
-
-
public Object list(TbMenuForm form){
-
以上是由福州網(wǎng)站建設(shè)的小編為你分享了"LayUI樹形表格treetable使用詳解"文章,如果你在這方面有什么問題,隨時(shí)聯(lián)系我們