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 infinit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0