提交 2733e918 编写于 作者: Y yelog

初始化表格合并

上级
## 为 layui 扩展的 表格列自动合并[独立模块版]
当前 `layui` 版本为 **2.3.0**
在线demo: [http://yelog.org/layui-table-merge/](http://yelog.org/layui-table-merge/)
这个在线 demo就是本项目的 `index.html`。 可将项目 `clone` 到本地查看效果。
## 效果图
![效果](http://oncj6b2vl.bkt.clouddn.com/FmMA3nI42bajhMmRF0OFzLZH1KlC.png)
## 参数说明
<table><thead><tr><th>属性名</th><th>属性值</th><th>例子</th><th>描述</th></tr></thead><tbody><tr><td rowspan="3">merge</td><td>boolean</td><td>merge: true</td><td>开启合并,并根据 当前列 相同值 自动合并</td></tr><tr><td>string</td><td>merge: 'name'</td><td>开启合并,并根据 指定列 相同值 自动合并</td></tr><tr><td>array</td><td>merge: ['name', 'type']</td><td>开启合并,并先根据 name值 分组后,再以 type值 相同的合并对应行<br>注:数组无数量限制</td></tr></tbody></table>
## 引入
引入 tableMerge 模块即可
```js
// 自定义模块
layui.config({
base: 'module/'
}).extend({
tableMerge: 'tableMerge'
});
```
## 使用实例
```js
table.render({
elem: '#mergeTable'
,height: 550
,url: 'data.json'
,limit: 30
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'poetry', title:'诗词', width:188, fixed: 'left'}
,{field:'name', merge: true, title:'诗人', width:100, fixed: 'left'} // 根据 当前列 相同值 的自动合并
,{field:'type', merge: ['name','type'], title:'类型', width:100, fixed: 'left'} // 根据 name 分组后,再以 type值 相同的合并对应行
,{field:'type', merge: true, title:'类型', width:100} // 根据 当前列 相同值 的自动合并
,{field:'dynasty', title:'朝代', merge: ['name', 'type'], width:150} // 根据 name 分组后,再以 type值 相同的自动合并
,{field:'dynasty', title:'朝代', merge: 'name', width:150} // 根据 name值 相同的自动合并
,{field:'dynasty', title:'朝代', merge: true, width:150} // 根据 当前列 相同值 的自动合并
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,done: function () {
tableMerge.render(this)
}
});
```
> 更多内容参考实例或代码。
{
"code": 0,
"msg": "",
"count": 300,
"data": [
{
"poetry": "《江畔独步寻花·其六》",
"name": "杜甫",
"dynasty": "唐代",
"type": "绝句",
"sentences": "留连戏蝶时时舞,自在娇莺恰恰啼。"
},
{
"poetry": "《绝句》",
"name": "杜甫",
"dynasty": "唐代",
"type": "绝句",
"sentences": "窗含西岭千秋雪,门泊东吴万里船。"
},
{
"poetry": "《秋兴八首(其一)》",
"name": "杜甫",
"dynasty": "唐代",
"type": "七律",
"sentences": "丛菊两开他日泪,孤舟一系故园心。"
},
{
"poetry": "《蜀相》",
"name": "杜甫",
"dynasty": "唐代",
"type": "七律",
"sentences": "出师未捷身先死,长使英雄泪满襟。"
},
{
"poetry": "《客至》",
"name": "杜甫",
"dynasty": "唐代",
"type": "七律",
"sentences": "花径不曾缘客扫,蓬门今始为君开"
},
{
"poetry": "《登金陵凤凰台》",
"name": "李白",
"dynasty": "唐代",
"type": "七律",
"sentences": "凤凰台上凤凰游,凤去台空江自流。"
},
{
"poetry": "《行路难·其一》",
"name": "李白",
"dynasty": "唐代",
"type": "七律",
"sentences": "长风破浪会有时,直挂云帆济沧海。"
},
{
"poetry": "《《望庐山瀑布》",
"name": "李白",
"dynasty": "唐代",
"type": "七绝",
"sentences": "飞流直下三千尺,疑是银河落九天。"
},
{
"poetry": "《望天门山》",
"name": "李白",
"dynasty": "唐代",
"type": "七绝",
"sentences": "两岸青山相对出,孤帆一片日边来。"
},
{
"poetry": "《清明》",
"name": "杜牧",
"dynasty": "唐代",
"type": "七绝",
"sentences": "借问酒家何处有,牧童遥指杏花村。"
},
{
"poetry": "《江南春》",
"name": "杜牧",
"dynasty": "唐代",
"type": "七绝",
"sentences": "千里莺啼绿映红,水村山郭酒旗风。"
},
{
"poetry": "《阿房宫赋》",
"name": "杜牧",
"dynasty": "唐代",
"type": "赋",
"sentences": "灭六国者六国也,非秦也;族秦者秦也,非天下也。"
}
]
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui表格列合并</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="keywords" content="layui,table,合并,列合并,行合并,rowspan,colspan,表格合并,merge">
<meta name="description" content="layui table 列合并 自动列合并,相同值合并">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
<style>
.site-h1 {
margin: 0 0 20px 20px;
line-height: 60px;
padding-bottom: 10px;
color: #393D49;
border-bottom: 1px solid #eee;
font-size: 28px;
font-weight: 300;
}
.layui-table tbody tr:hover, .layui-table-hover {
background-color: initial;
}
.site-demo-code {
position: absolute;
left: 0;
width: 100%;
height: 580px;
border: none;
padding: 10px;
resize: none;
font-size: 12px;
background-color: #F7FBFF;
color: #881280;
font-family: Courier New;
}
b {
color: red;
}
.little-code {
font-size: 12px;
background-color: #F7FBFF;
color: #881280;
font-family: Courier New;
}
</style>
</head>
<body >
<h1 class="site-h1">layui表格列合并</h1>
<blockquote class="layui-elem-quote">
扩展了layui table,可以相同值列合并 。当前使用的layui版本:<b>2.4.5</b>
</blockquote>
<fieldset class="layui-elem-field layui-field-title site-title">
<legend><a name="use">快速上手</a></legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="change">
<ul class="layui-tab-title">
<li class="layui-this">自动列合并表格</li>
<li>原始表格</li>
<li>查看代码</li>
</ul>
<div class="layui-tab-content" style="padding: 0px">
<div class="layui-tab-item layui-show">
<table id="mergeTable"></table>
</div>
<div class="layui-tab-item">
<table id="originTable"></table>
</div>
<div class="layui-tab-item">
<pre class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly="">
table.render({
elem: '#mergeTable'
,height: 550
,url: 'data.json'
,limit: 30
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'poetry', title:'诗词', width:188, fixed: 'left'}
,{field:'name', <b>merge: true,</b> title:'诗人', width:100, fixed: 'left'} // 根据 <b>当前列</b> <b>相同值</b> 的自动合并
,{field:'type', <b>merge: ['name','type'],</b> title:'类型', width:100, fixed: 'left'} // 根据 <b>name值</b> 分组后,再以 <b>type值</b> 相同的合并对应行
,{field:'type', <b>merge: true,</b> title:'类型', width:100} // 根据 <b>当前列</b> <b>相同值</b> 的自动合并
,{field:'dynasty', title:'朝代', <b>merge: ['name', 'type'],</b> width:150} // 根据 <b>name值</b> 分组后,再以 <b>type值</b> 相同的自动合并
,{field:'dynasty', title:'朝代', <b>merge: 'name',</b> width:150} // 根据 <b>name值</b> 相同的自动合并
,{field:'dynasty', title:'朝代', <b>merge: true,</b> width:150} // 根据 <b>当前列</b> <b>相同值</b> 的自动合并
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,done: function(){
<b>tableMerge.render(this)</b>
}
});
</pre>
</div>
</div>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<fieldset class="layui-elem-field layui-field-title site-title">
<legend><a name="use">如何使用</a></legend>
</fieldset>
<blockquote class="layui-elem-quote layui-quote-nm">
1、将模块 tableMerge.js 引入项目中:
<pre class="little-code">
// 自定义模块
layui.config({
base: 'module/'
}).extend({
tableMerge: 'tableMerge'
});
</pre>
2、点击<b>查看代码</b>有使用示例,当然也可下载源码查看<a target="_blank" style="color: #1e9fff" href="https://github.com/yelog/layui-table-merge">点我到达项目地址</a><br>
</blockquote>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
// 自定义模块
layui.config({
base: 'module/'
}).extend({
tableMerge: 'tableMerge'
});
layui.use(['table','element','tableMerge'], function () {
var table = layui.table,
tableMerge = layui.tableMerge;
/**
* 自动合并表格
*/
table.render({
elem: '#mergeTable'
,height: 550
,url: 'data.json'
,limit: 30
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'poetry', title:'诗词', width:188, fixed: 'left'}
,{field:'name', merge: true, title:'诗人', width:100, fixed: 'left'} // 根据 当前列 相同值 的自动合并
,{field:'type', merge: ['name','type'], title:'类型', width:100, fixed: 'left'} // 根据 name 分组后,再以 type值 相同的合并对应行
,{field:'type', merge: true, title:'类型', width:100} // 根据 当前列 相同值 的自动合并
,{field:'dynasty', title:'朝代', merge: ['name', 'type'], width:150} // 根据 name 分组后,再以 type值 相同的自动合并
,{field:'dynasty', title:'朝代', merge: 'name', width:150} // 根据 name值 相同的自动合并
,{field:'dynasty', title:'朝代', merge: true, width:150} // 根据 当前列 相同值 的自动合并
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,done: function () {
tableMerge.render(this)
}
});
layui.element.on('tab(change)', function(data){
if (data.index == 1 && layui.$('#originTable').siblings().length==0) { //第一次切换时加载
/**
* 原始表格
*/
table.render({
elem: '#originTable'
,height: 550
,url: 'data.json'
,limit: 30
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'poetry', title:'诗词', width:188, fixed: 'left'}
,{field:'name', title:'诗人', width:100, fixed: 'left'}
,{field:'type', title:'类型', width:100, fixed: 'left'}
,{field:'type', title:'类型', width:100}
,{field:'dynasty', title:'朝代', width:150}
,{field:'dynasty', title:'朝代', width:150}
,{field:'dynasty', title:'朝代', width:150}
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{field:'sentences', title:'名句', width:400}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
}
});
})
</script>
<a target="_blank" href="https://github.com/yelog/layui-table-merge"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</body>
</html>
\ No newline at end of file
此差异已折叠。
/**
@Name: layui mobile
@Author: 贤心
@Site: http://www.layui.com/mobile/
*/
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,legend{margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0)}
html{font:12px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,Arial,sans-serif; -ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
a{text-decoration: none; background:transparent}
a:active,a:hover{outline:0}
table{border-collapse:collapse;border-spacing:0}
li{list-style:none;}
b,strong{font-weight:700;}
h1, h2, h3, h4, h5, h6{font-weight:500;}
address,cite,dfn,em,var{font-style:normal;}
dfn{font-style:italic}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
img{border:0; vertical-align: bottom}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0; outline: 0;}
button,select{text-transform:none}
select{-webkit-appearance: none; border:none;}
input{line-height:normal; }
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
label,input{vertical-align: middle;}
/** 图标字体 **/
@font-face {font-family: 'layui-icon';
src: url('../font/iconfont.eot?v=1.0.7');
src: url('../font/iconfont.eot?v=1.0.7#iefix') format('embedded-opentype'),
url('../font/iconfont.woff?v=1.0.7') format('woff'),
url('../font/iconfont.ttf?v=1.0.7') format('truetype'),
url('../font/iconfont.svg?v=1.0.7#iconfont') format('svg');
}
.layui-icon{
font-family:"layui-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/** 基础通用 **/
/* 消除第三方ui可能造成的冲突 */.layui-box, .layui-box *{-webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;}
.layui-border-box, .layui-border-box *{-webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
.layui-inline{position: relative; display: inline-block; *display:inline; *zoom:1; vertical-align: middle;}
/* 三角形 */.layui-edge{position: absolute; width: 0; height: 0; border-style: dashed; border-color: transparent; overflow: hidden;}
/* 单行溢出省略 */.layui-elip{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
/* 屏蔽选中 */.layui-unselect{-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.layui-disabled,.layui-disabled:active{background-color: #d2d2d2 !important; color: #fff !important; cursor: not-allowed !important;}
/* 纯圆角 */.layui-circle{border-radius: 100%;}
.layui-show{display: block !important;}
.layui-hide{display: none !important;}
.layui-upload-iframe{position: absolute; width: 0px; height: 0px; border: 0px; visibility: hidden;}
.layui-upload-enter{border: 1px solid #009E94; background-color: #009E94; color: #fff; -webkit-transform: scale(1.1); transform: scale(1.1);}
/* 弹出动画 */
@-webkit-keyframes layui-m-anim-scale { /* 默认 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes layui-m-anim-scale { /* 由小到大 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
.layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;}
@-webkit-keyframes layui-m-anim-up{ /* 从下往上 */
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
@keyframes layui-m-anim-up{
0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)}
100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
}
.layui-m-anim-up{-webkit-animation-name: layui-m-anim-up; animation-name: layui-m-anim-up}
@-webkit-keyframes layui-m-anim-left{ /* 从右往左 */
0%{-webkit-transform: translateX(100%); transform: translateX(100%)}
100%{-webkit-transform: translateX(0); transform: translateX(0)}
}
@keyframes layui-m-anim-left{
0%{-webkit-transform: translateX(100%); transform: translateX(100%)}
100%{-webkit-transform: translateX(0); transform: translateX(0)}
}
.layui-m-anim-left{-webkit-animation-name: layui-m-anim-left; animation-name: layui-m-anim-left}
@-webkit-keyframes layui-m-anim-right{ /* 从左往右 */
0%{-webkit-transform: translateX(-100%); transform: translateX(-100%)}
100%{-webkit-transform: translateX(0); transform: translateX(0)}
}
@keyframes layui-m-anim-right{
0%{-webkit-transform: translateX(-100%); transform: translateX(-100%)}
100%{-webkit-transform: translateX(0); transform: translateX(0)}
}
.layui-m-anim-right{-webkit-animation-name: layui-m-anim-right; animation-name: layui-m-anim-right}
@-webkit-keyframes layui-m-anim-lout{ /* 往左收缩 */
0%{-webkit-transform: translateX(0); transform: translateX(0)}
100%{-webkit-transform: translateX(-100%); transform: translateX(-100%)}
}
@keyframes layui-m-anim-lout{
0%{-webkit-transform: translateX(0); transform: translateX(0)}
100%{-webkit-transform: translateX(-100%); transform: translateX(-100%)}
}
.layui-m-anim-lout{-webkit-animation-name: layui-m-anim-lout; animation-name: layui-m-anim-lout}
@-webkit-keyframes layui-m-anim-rout{ /* 往右收缩 */
0%{-webkit-transform: translateX(0); transform: translateX(0)}
100%{-webkit-transform: translateX(100%); transform: translateX(100%)}
}
@keyframes layui-m-anim-rout{
0%{-webkit-transform: translateX(0); transform: translateX(0)}
100%{-webkit-transform: translateX(100%); transform: translateX(100%)}
}
.layui-m-anim-rout{-webkit-animation-name: layui-m-anim-rout; animation-name: layui-m-anim-rout}
/** layer mobile */
.layui-m-layer{position:relative; z-index: 19891014;}
.layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}
.layui-m-layershade,
.layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;}
.layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;}
.layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;}
.layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;}
.layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;}
.layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;}
.layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;}
.layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;}
.layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;}
.layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;}
.layui-m-layerchild h3,
.layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;}
.layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;}
.layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;}
.layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;}
.layui-m-layer2 .layui-m-layercont p{margin-top: 20px;}
/* loading */
@-webkit-keyframes layui-m-anim-loading{
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
40%{transform:scale(1); -webkit-transform:scale(1)}
}
@keyframes layui-m-anim-loading{
0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)}
40%{transform:scale(1); -webkit-transform:scale(1)}
}
.layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;}
.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;}
.layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;}
.layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;}
.layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;}
.layui-m-layerbtn span[yes]{color: #40AFFE;}
.layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;}
.layui-m-layerbtn span:active{background-color: #F6F6F6;}
.layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;}
.layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;}
.layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
/* 底部对话框风格 */
body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;}
.layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;}
.layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);}
.layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;}
.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;}
/* 通用提示 */
body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;}
.layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;}
/**
@Name: layui.code
@Author: 贤心
@Site: http://www.layui.com
*/
/* 加载就绪标志 */
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
/* 默认风格 */
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
.layui-code-h3{position: relative; padding: 0 10px; height: 32px; line-height: 32px; border-bottom: 1px solid #e2e2e2; font-size: 12px;}
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
.layui-code-view .layui-code-ol{position: relative; overflow: auto;}
.layui-code-view .layui-code-ol li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 5px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
.layui-code-view pre{margin: 0;}
/* notepadd++风格 */
.layui-code-notepad{border: 1px solid #0