<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <table id="demoTreeTb"></table> <script src="./jquery/dist/jquery.js"></script> <script src="./layui/layui.js"></script> <script src="./treetable-lay/dist/treeTable.js"></script> <script> layui.config({ base: './treetable-lay' }).use(['treeTable'], function () { var treeTable = layui.treeTable; }); layui.use(['treeTable'], function () { var $ = layui.jquery; var treeTable = layui.treeTable; // 渲染树形表格 var insTb = treeTable.render({ elem: '#demoTreeTb', url: './main.json', tree: { iconIndex: 2, // 折叠图标显示在第几列 isPidData: true, // 是否是id、pid形式数据 idName: 'authorityId', // id字段名称 pidName: 'parentId' // pid字段名称 }, cols: [[ { type: 'numbers' }, { type: 'checkbox' }, { field: 'authorityName', title: '菜单名称' }, { field: 'menuUrl', title: '菜单地址' }, { field: 'authority', title: '权限标识' } ]] }); }); </script> </body> </html>
layui地址: https://www.layui.com/demo/table/operate.html
from和layui表格:https://blog.csdn.net/qq_26118603/article/details/80064173
*** from和layui表格*https://www.pianshen.com/article/3879356914/