LayUI树形表格treetable使用详解_layui的treetable,layuitreetable资源-CSDN文库

共48个文件

js：20个

css：7个

html：7个

treeTable

需积分: 5 161 浏览量 2024-08-07 16:15:47 上传评论收藏 271KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

layui树形图表.zip （48个子文件）

layui树形图表

TreeTable

menu.html 3KB

assets

common.css 139B

jquery-3.2.1.min.js 85KB

layui

layui.js 6KB

font

iconfont.ttf 39KB

iconfont.eot 39KB

iconfont.woff 26KB

css

layui.css 59KB

modules

laydate

default

laydate.css 7KB

code.css 1KB

layer

default

loading-2.gif 2KB

loading-1.gif 701B

loading-0.gif 6KB

icon-ext.png 6KB

layer.css 14KB

icon.png 11KB

layui.mobile.css 10KB

lay

modules

layedit.js 12KB

tree.js 3KB

flow.js 2KB

table.js 20KB

form.js 9KB

laydate.js 27KB

rate.js 3KB

laypage.js 4KB

upload.js 7KB

layer.js 22KB

mobile.js 33KB

code.js 1KB

util.js 3KB

laytpl.js 2KB

jquery.js 95KB

element.js 7KB

carousel.js 4KB

module

treetable-lay

treetable.css 312B

treetable.js 8KB

index.html 3KB

test5.html 4KB

test3.html 4KB

json

data1.json 1KB

data2.json 2KB

data3.json 1KB

data.json 1KB

menus.json 6KB

test2.html 3KB

test.html 3KB

jquery插件库.url 119B

test4.html 3KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tree-table</title> <link rel="stylesheet" href="assets/layui/css/layui.css"> <link rel="stylesheet" href="assets/common.css"/> <style> input { height: 33px; line-height: 33px; padding: 0 7px; border: 1px solid #ccc; border-radius: 2px; margin-bottom: -2px; outline: none; } input:focus { border-color: #009E94; } </style> </head> <body> <div class="layui-container"> <br><br> <a class="layui-btn layui-btn-normal" href="index.html"><<返回</a>    <div class="layui-btn-group"> <button class="layui-btn" id="btn-expand">全部展开</button> <button class="layui-btn" id="btn-fold">全部折叠</button> </div>    <input id="edt-search" type="text" placeholder="输入关键字" style="width: 120px;"/>   <button class="layui-btn" id="btn-search">  搜索  </button> <table id="auth-table" class="layui-table" lay-filter="auth-table"></table> </div> <script src="assets/layui/layui.js"></script> <script> layui.config({ base: 'module/' }).extend({ treetable: 'treetable-lay/treetable' }).use(['table', 'treetable'], function () { var $ = layui.jquery; var table = layui.table; var treetable = layui.treetable; // 渲染表格 layer.load(2); treetable.render({ treeColIndex: 1, treeSpid: -1, treeIdName: 'authorityId', treePidName: 'parentId', elem: '#auth-table', url: 'json/menus.json', page: false, cols: [[ {type: 'numbers'}, {field: 'authorityName', minWidth: 200, title: '权限名称'}, {field: 'authority', title: '权限标识'}, {field: 'menuUrl', title: '菜单url'}, { field: 'isMenu', width: 80, align: 'center', templet: function (d) { if (d.isMenu == 1) { return '<span class="layui-badge layui-bg-gray">按钮</span>'; } if (d.parentId == -1) { return '<span class="layui-badge layui-bg-blue">目录</span>'; } else { return '<span class="layui-badge-rim">菜单</span>'; } }, title: '类型' } ]], done: function () { layer.closeAll('loading'); } }); $('#btn-expand').click(function () { treetable.expandAll('#auth-table'); }); $('#btn-fold').click(function () { treetable.foldAll('#auth-table'); }); $('#btn-search').click(function () { var keyword = $('#edt-search').val(); var searchCount = 0; $('#auth-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () { $(this).css('background-color', 'transparent'); var text = $(this).text(); if (keyword != '' && text.indexOf(keyword) >= 0) { $(this).css('background-color', 'rgba(250,230,160,0.5)'); if (searchCount == 0) { treetable.expandAll('#auth-table'); $('html,body').stop(true); $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500); } searchCount++; } }); if (keyword == '') { layer.msg("请输入搜索内容", {icon: 5}); } else if (searchCount == 0) { layer.msg("没有匹配结果", {icon: 5}); } }); }); </script> </body> </html>

评论收藏

内容反馈