285 lines
7.0 KiB
HTML
285 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title></title>
|
||
<script src="js/layui-v2.5.4/layui/layui.js" type="text/javascript" charset="utf-8"></script>
|
||
<link rel="stylesheet" type="text/css" href="js/layui-v2.5.4/layui/css/layui.css"/>
|
||
<style type="text/css">
|
||
.table_top{
|
||
height: 50px;
|
||
width: 100%;
|
||
background: #FFF;
|
||
padding: 5px 5px;
|
||
font-size: 20px;
|
||
line-height: 40px;
|
||
padding-left: 20px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20px;
|
||
}
|
||
.table_top i{
|
||
font-size: 20px;
|
||
}
|
||
.layui-table, .layui-table-view {
|
||
margin: 0px !important;
|
||
}
|
||
body,html{
|
||
background: #e9ecf3;
|
||
min-width: 1200px;
|
||
}
|
||
.tab_div{
|
||
background: #FFF;
|
||
width: 98%;
|
||
margin: 0 auto;
|
||
}
|
||
.layui-form {
|
||
border-top: 5px solid #0669b2;
|
||
}
|
||
.layui-table-tool{
|
||
background: #FFF;
|
||
}
|
||
.layui-border-box {
|
||
background: #FFF!important;
|
||
}
|
||
.layui-table tr{
|
||
background: #FFF!important;
|
||
border-bottom: 1px solid #e2e5ec;
|
||
}
|
||
.layui-table th,td{
|
||
border: none!important;
|
||
}
|
||
.layui-form-checkbox[lay-skin=primary] i{
|
||
background: #e2e5ec;
|
||
}
|
||
.layui-form-checked[lay-skin=primary] i{
|
||
background: #0669b2!important;
|
||
border:1px solid #0669b2!important
|
||
}
|
||
.layui-form-checkbox i{
|
||
color: #e2e5ec;
|
||
}
|
||
.layui-form-checkbox[lay-skin=primary]:hover i{
|
||
background: #0669b2!important;
|
||
border:1px solid #0669b2!important
|
||
}
|
||
.layui-laypage .layui-laypage-curr .layui-laypage-em{
|
||
background: #0669b2!important;
|
||
}
|
||
.layui-laypage a:hover {
|
||
color: #0669b2!important;
|
||
}
|
||
.layui-btn{
|
||
background: #0669b2;
|
||
}
|
||
.float_right{
|
||
float: right;
|
||
width: 30%;
|
||
}
|
||
.clearBox::after{
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
.suos{
|
||
width: 100%;
|
||
border: 1px solid #0669b2;
|
||
height: 30px;
|
||
float: right;
|
||
border-radius: 8px;
|
||
color: #0669b2;
|
||
padding-left: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
.layui-table-tool .layui-btn-container {
|
||
margin-bottom: -10px;
|
||
width: 40%;
|
||
float: left;
|
||
}
|
||
.inpu_div {
|
||
float: right;
|
||
width: 40%;
|
||
}
|
||
.layui-form-select{
|
||
width: 40%;
|
||
float: right;
|
||
margin-right: 10px;
|
||
}
|
||
.layui-form-select .layui-input {
|
||
padding-right: 30px;
|
||
cursor: pointer;
|
||
border: 1px solid #0669b2;
|
||
border-radius: 11px;
|
||
height: 30px;
|
||
color: #0669b2;
|
||
/* margin-right: 10px!important; */
|
||
}
|
||
.layui-form-select dl dd.layui-this {
|
||
background-color: #0669b2;
|
||
color: #fff;
|
||
}
|
||
::-webkit-input-placeholder { /* WebKit browsers */
|
||
color: #0669b2;
|
||
}
|
||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||
color: #0669b2;
|
||
}
|
||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||
color: #0669b2;
|
||
}
|
||
:-ms-input-placeholder { /* Internet Explorer 10+ */
|
||
color: #0669b2;
|
||
}
|
||
.bj_a{
|
||
|
||
}
|
||
.sc_a{
|
||
background: #f4736d;
|
||
}
|
||
.a_addClas{
|
||
border-radius: 50px;
|
||
width: 50px;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
}
|
||
.suos_div{
|
||
position: relative;
|
||
width: 30%;
|
||
height: 30px;
|
||
float: right;
|
||
}
|
||
.suo_icon{
|
||
display: block;
|
||
position: absolute;
|
||
background: url(./img/sousuo.png)no-repeat;
|
||
right: 10px;
|
||
top: 7px;
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="table_top">
|
||
<!--<i class="layui-icon layui-icon-table"></i> -->
|
||
<a>表格数据</a>
|
||
</div>
|
||
<div class="tab_div">
|
||
|
||
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||
|
||
</div>
|
||
|
||
|
||
<script type="text/html" id="toolbarDemo">
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||
|
||
</div>
|
||
<div class="inpu_div">
|
||
<div class="suos_div">
|
||
<input type="text" name="title" placeholder="请输入标题" class="suos">
|
||
<span class="suo_icon"></span>
|
||
</div>
|
||
|
||
<select name="city" class="sele_se" lay-verify="required">
|
||
<option value=""></option>
|
||
<option value="0">北京</option>
|
||
<option value="1">上海</option>
|
||
<option value="2">广州</option>
|
||
<option value="3">深圳</option>
|
||
<option value="4">杭州</option>
|
||
</select>
|
||
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-xs bj_a a_addClas" lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs sc_a a_addClas" lay-event="del">删除</a>
|
||
</script>
|
||
|
||
|
||
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
|
||
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
|
||
|
||
<script>
|
||
layui.use('table', function(){
|
||
var table = layui.table;
|
||
|
||
table.render({
|
||
elem: '#test'
|
||
,url:'jsonList.json'
|
||
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
||
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
||
title: '提示'
|
||
,layEvent: 'LAYTABLE_TIPS'
|
||
,icon: 'layui-icon-tips'
|
||
}]
|
||
,title: '用户数据表'
|
||
,cols: [[
|
||
{type: 'checkbox', fixed: 'left'}
|
||
,{field:'username', title:'姓名', width:120}
|
||
,{field:'sex', title:'性别', width:80, sort: true}
|
||
,{field:'city', title:'年龄', width:100}
|
||
,{field:'sign', title:'岗位'}
|
||
,{field:'experience', title:'有害因素', width:250}
|
||
,{field:'joinTime', title:'应体检日期', width:200}
|
||
//,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
|
||
]]
|
||
,page: true
|
||
});
|
||
|
||
//头工具栏事件
|
||
table.on('toolbar(test)', function(obj){
|
||
var checkStatus = table.checkStatus(obj.config.id);
|
||
switch(obj.event){
|
||
case 'getCheckData':
|
||
var data = checkStatus.data;
|
||
layer.alert(JSON.stringify(data));
|
||
break;
|
||
case 'getCheckLength':
|
||
var data = checkStatus.data;
|
||
layer.msg('选中了：'+ data.length + ' 个');
|
||
break;
|
||
case 'isAll':
|
||
layer.msg(checkStatus.isAll ? '全选': '未全选');
|
||
break;
|
||
|
||
//自定义头工具栏右侧图标 - 提示
|
||
case 'LAYTABLE_TIPS':
|
||
layer.alert('这是工具栏右侧自定义的一个图标按钮');
|
||
break;
|
||
};
|
||
});
|
||
|
||
//监听行工具事件
|
||
table.on('tool(test)', function(obj){
|
||
var data = obj.data;
|
||
//console.log(obj)
|
||
if(obj.event === 'del'){
|
||
layer.confirm('真的删除行么', function(index){
|
||
obj.del();
|
||
layer.close(index);
|
||
});
|
||
} else if(obj.event === 'edit'){
|
||
layer.prompt({
|
||
formType: 2
|
||
,value: data.email
|
||
}, function(value, index){
|
||
obj.update({
|
||
email: value
|
||
});
|
||
layer.close(index);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|