TreeGrid插件

站长

2022年09月08日 20:28 · 阅读数 48

我们可以用TreeGrid插件来实现菜单目录以树结构来呈现具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入css-->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/treegrid/jquery.treegrid.css"/></head>
<body>
<div>
    <table id="menu-table"></table>
</div>
<!--引入js-->
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script src="bower_components/treegrid/tree.table.js"></script>
<script>
    var columns = [
        {
            title : '菜单ID',
            field : 'id',
            align : 'center',
            valign : 'middle',
            width : '80px'
        },
        {
            title : '菜单名称',
            field : 'name',
            align : 'center',
            valign : 'middle',
            width : '130px'
        },
        {
            title : '上级菜单',
            field : 'parentName',
            align : 'center',
            valign : 'middle',
            sortable : true,
            width : '100px'
        }];//格式来自官方demos -->treeGrid(jquery扩展的一个网格树插件)
    let treeTable=new TreeTable("menu-table","/menu/doFindObjects",columns);
    treeTable.init();//底层基于url向服务端发起异步请求
</script>
</body>
</html>

需要注意引入的js顺序不能颠倒，因为treegrid，bootstrap都是依托于jquery

效果图

TreeGrid插件

转载自:https://segmentfault.com/a/1190000041381212