layui树形表格treetable效果代码
代码语言:html
所属分类:表格
代码描述:layui树形表格treetable效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script> <style> .demo-side { position: relative; transition: all .3s; } .demo-side.show { padding-left: 120px; position: relative; } .demo-side:before { content: "假设这是侧边栏, treeTable使用了与layui数据表格完全不同的列宽分配方式, 由浏览器来分配, 所以当容器宽度变化后会自动适应, 对单页面系统非常友好"; position: absolute; left: 0; top: 50%; margin-top: -90px; width: 105px; visibility: hidden; line-height: 1.5; } .demo-side.show:before { visibility: visible; } body .layui-layer-tips .layui-layer-content { line-height: 1.5; padding: 8px 12px; border-radius: 4px; background-color: #303133; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); } body .layui-layer-tips i.layui-layer-TipsG { border-width: 5px; } body .layui-layer-tips i.layui-layer-TipsR, body .layui-layer-tips i.layui-layer-TipsL { top: 11px; } body .layui-layer-tips i.layui-layer-TipsT, body .layui-layer-tips i.layui-layer-TipsB { left: 12px; } body .layui-layer-tips i.layui-layer-TipsT { bottom: -10px; } body .layui-layer-tips i.layui-layer-TipsT { border-right-color: transparent; border-top-style: solid; border-top-color: #303133; } body .layui-layer-tips i.layui-layer-TipsB { top: -10px; } body .layui-layer-tips i.layui-layer-TipsB { border-right-color: transparent; border-bottom-style: solid; border-bottom-color: #303133; } body .layui-layer-tips i.layui-layer-TipsL { right: -10px; } body .layui-layer-tips i.layui-layer-TipsL { border-bottom-color: transparent; border-left-style: solid; border-left-color: #303133; } body .layui-layer-tips i.layui-layer-TipsR { left: -10px; } body .layui-layer-tips i.layui-layer-TipsR { border-bottom-color: transparent; border-right-style: solid; border-right-color: #303133; } /** loading鏍峰紡 */ .page-loading { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 19891017; background-color: #fff; } .page-no-scroll { overflow: hidden; overflow-x: hidden; overflow-y: hidden; min-height: 80px; } .rubik-loader, .ball-loader, .signal-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .ball-loader > span, .signal-loader > span { background-color: #4aca85; display: inline-block; } .ball-loader > span:nth-child(1), .ball-loader.sm > span:nth-child(1), .signal-loader > span:nth-child(1), .signal-loader.sm > span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .ball-loader > span:nth-child(2), .ball-loader.sm > span:nth-child(2), .signal-loader > span:nth-child(2), .signal-loader.sm > span:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .ball-loader > span:nth-child(3), .ball-loader.sm > span:nth-child(3), .signal-loader > span:nth-child(3), .signal-loader.sm > span:nth-child(3) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .ball-loader > span:nth-child(4), .ball-loader.sm > span:nth-child(4), .signal-loader > span:nth-child(4), .signal-loader.sm > span:nth-child(4) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .ball-loader > span { width: 20px; height: 20px; margin: 0 3px; border-radius: 50%; transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); animation: ball-load 1s ease-in-out infinite; -webkit-animation: 1s ball-load ease-in-out infinite; } @-webkit-keyframes ball-load { 0% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0); -webkit-transform: scale(0); } } @keyframes ball-load { 0% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0); -webkit-transform: scale(0); } } .ball-loader.sm > span { width: 15px; height: 15px; margin: 0 2px; } .layui-input { border-color: #C9C9C9 !important; } .layui-input:focus { border-color: #009688 !important; } .layui-btn-sm { padding: 0 8px 0 5px; } .page-wrapper { width: 900px; margin: 0 auto; padding: 0 15px; } .right-desc { position: absolute; right: 0; top: 0; width: 280px; padding-top: 6px; } .desc-item { background-color: #FFF8DB; color: #40485b; padding: 10px 15px; margin: 15px 15px 0 0; font-size: 12px; line-height: 1.6; border-radius: 4px; box-shadow: 0px 0px 6px rgba(0, 0, 0, .15); } html, body { min-width: 1200px; background-color: #fff; position: relative; } @media screen and (max-width: 1480px) { .page-wrapper { margin: 0 280px auto auto; } } </style> </head> <body class="layui-hide"> <div class="page-wrapper"> <blockquote class="layui-elem-quote" style="margin: 15px 0;">Layui树形表格3.x演示</blockquote> <div class="layui-btn-container" style="display: inline-block;"> <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>重载 </button> <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>刷新 </button> <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button> <button id="btnToggleSide" class="layui-btn layui-btn-sm layui-btn-primary">演示侧边栏</button> </div> <div class="layui-btn-container" style="display: inline-block;"> <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>展开全部 </button> <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>折叠全部 </button> <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>展开用户管理 </button> <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>折叠用户管理 </button> <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>勾选添加用户 </button> </div> <input class="layui-input" id="edtSearch" value="添加用户" placeholder="输入关键字" style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/> <div class="layui-btn-container" style="display: inline-block;"> <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon"></i>搜索 </button> <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဆ</i>清除搜索 </button> </div> <div class="demo-side"> <table id="demoTreeTb"></table> </div> </div> <!-- 表格操作列 --> <script type="text/html" id="tbBar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> <script> Mock.mock(/\/demo\/[\s\S]*?/, { "code": 0, "msg": "", "count": 19, "data": [ { "authorityId": 1, "authorityName": "系统管理", "orderNumber": 1, "menuUrl": null, "menuIcon": "layui-icon-set", "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": -1, "open": true }, { "authorityId": 2, "authorityName": "用户管理", "orderNumber": 2, "menuUrl": "system/user", "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": 1, "open": true }, { "authorityId": 3, "authorityName": "查询用户", "orderNumber": 3, "menuUrl": "", "menuIcon": "", "createTime": "2018/07/21 13:54:16", "authority": "user:view", "checked": 0, "updateTime": "2018/07/21 13:54:16", "isMenu": 1, "parentId": 2, "open": true }, { "authorityId": 4, "authorityName": "添加用户", "orderNumber": 4, "menuUrl": null, "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": "user:add", "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 1, "parentId": 2, "open": true }, { "authorityId": 5, "authorityName": "修改用户", "orderNumber": 5, "menuUrl": null, "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": "user:edit", "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 1, "parentId": 2, "open": true }, { "authorityId": 6, "authorityName": "删除用户", "orderNumber": 6, "menuUrl": null, "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": "user:delete", "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 1, "parentId": 2, "open": true }, { "authorityId": 7, "authorityName": "角色管理", "orderNumber": 7, "menuUrl": "system/role", "menuIcon": null, "createTime": "2018/06/29 11:05:41", "authority": null, "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 0, "parentId": 1, "open": true }, { "authorityId": 8, "authorityName": "查询角色", "orderNumber": 8, "menuUrl": "", "menuIcon": "", "createTime": "2018/07/21 13:54:59", "authority": "role:view", "checked": 0, "updateTime": "2018/07/21 13:54:58", "isMenu": 1, "parentId": 7, "open": true }, { "authorityId": 9, "authorityName": "添加角色", "orderNumber": 9, "menuUrl": "", "menuIcon": "", "createTime": "2018/06/29 11:05:41", "authority": "role:add", "checked": 0, "updateTime": "2018/07/13 09:13:42", "isMenu": 1, "parentId": 7, "open": tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0