layui 页面弹出
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
$('#addMonthSafe').click(function() {
layui.use('layer', function() {
var layer = layui.layer;
layer.open({
type: 2,
title: '添加预警信息',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area: ['960px', '600px'],
content: 'addmonthsafe.html', //也可以写$("#id属性).html();
cancel: function() {
}
});
})
});
表头加分页
<table class="layui-hide" id="test" lay-filter="demo"></table>
<div id="test1" Style="text-align: center"></div>
layui.use([ 'table', 'laypage' ],function() {
var table = layui.table;
//第一个实例
table.render({
elem : '#test', //table标签的id
id : 'testpage', //下面父页面刷新用的id
data : list, //数据接口
align:'center',
cols : [ [
{
field : 'warningId', //data里面的属性
title : 'ID',
width : 20,
align : 'center'
},
{
field : 'warningClass',
title : '预警等级',
width : 30,
align : 'center',
},
{
field : 'warningTitle',
title : '预警标题',
width : 60,
align : 'center',
},
{
field : 'powerName',
title : '电厂名',
width : 60,
align : 'center'
},
{
field : 'warningFrom',
title : '预警来源',
width : 60,
align : 'center'
},
{
field : 'warningTime',
title : '发布时间',
width : 120,
align : 'center'
},
{
field : 'warningWriter',
title : '发布人',
width : 100,
align : 'center'
},
{
field : 'warningCharge',
title : '预警负责人',
width : 60,
align : 'center'
},
{
field : 'emergencyInstruction',
title : '突发事件介绍',
width : 460,
align : 'center'
},
{
field : 'emergencyStatus',
title : '预警状态',
width : 200,
align : 'center',
toolbar : '#switchTpl'
},
{
field : '',
title : '操作',
width : 200,
align : 'center',
toolbar : '#barDemo'
} ] ]
})
laypage.render({
elem : 'test1',//注意,这里的 test1 是 ID,不用加 # 号,
count : data.data.total, //数据总数,从服务端得到
jump : function(
obj, first) {
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
$.ajax({
type : "GET",
url : baseurl+ "/warning/queryWarningManager",
data : {
pageNum : obj.curr,
token : token,
powerId:powerId,
warningTitle:warningTitle
},
success : function(data) {
if (data.meta.code == 200) {
table.reload('testpage',
{
data : data.data.list
})
}
}
})
}
}
});
})
}
}
})
}
普通的标签和按钮
<div class="layui-inline"
Style="width: 100%; text-align: center; margin-right: 10px">
<span id="addMonthSafe" class="layui-btn layui-btn-normal">添加预警信息</span>
<input type="text" style="width: 345px; display: inline"
class="layui-input" id="test3" placeholder="请输入标题" /> <span
id="search" class="layui-btn layui-btn-normal">查找</span>
</div>
是否离职/评论通过之类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>所有作品</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="static/css/style.css">
<style>
.layui-table-cell {
height: auto;
}
</style>
</head>
<body>
<div class="container">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>南方口腔医生列表</legend>
</fieldset>
<form class="layui-form">
<table class="layui-hide" id="test"></table>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<table id="demo" lay-filter="test"></table>
<div id="test1"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="layui/layui.js"></script>
<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
<script type="text/html" id="barDemo1">
<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-normal " lay-event="dimission">离职</a>
</script>
<script type="text/html" id="barDemo2">
<a class="layui-btn layui-btn-sm layui-btn-xs layui-btn-normal " lay-event="assume">上岗</a>
</script>
<script>
var list;
var userType;
var vip;
var laypage;
var backrole=localStorage.getItem("backRole");
$(function() {
layui.use(['form', 'laypage'], function() {
var form = layui.form;
laypage = layui.laypage;
userlist();
})
})
function userlist() {
$.ajax({
type: "GET", //提交方式
url: baseurl + "/backuser/doctorlist", //路径
dataType: 'json',
data: {
backrole:localStorage.getItem("backRole"),
}, //数据,这里使用的是Json格式进行传输
success: function(data) { //返回数据根据结果进行相应的处理
console.log(data.data);
list = data.data.rows;
layui.use('table', function() {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
id: 'testReload',
data: list, //数据接口
cols: [
[{
field: 'cavityDid',
title: 'ID',
width:80,
}, {
field: 'cavityDname',
title: '姓名',
width: 120
}, {
field: 'cavityHdpath',
title: '头像',
width: 180
}, {
field: 'cavityPosition',
title: '职位',
width: 100
}, {
field: 'cavityHospital',
title: '所属医院',
width: 160
}, {
field: 'cavityProfile',
title: '医生简介',
width: 180
}, {
field: 'cavityStatus',
title: '在职状态',
width: 100,
templet:"#barDemo" //ID下面的js需要
}, {
title: '离职',
width: 200,
align: 'center',
toolbar: '#barDemo1'
}, {
title: '上岗',
width: 200,
align: 'center',
toolbar: '#barDemo2'
}]
]
});
laypage.render({
elem: 'test1' //注意,这里的 test1 是 ID,不用加 #号
,
count: data.data.total, //数据总数,从服务端得到
jump: function(obj, first) {
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first) {
//do something
$.ajax({
type: "get", //提交方式
url: baseurl + "/backuser/doctorlist", //路径
dataType: 'json',
data: {
backrole:localStorage.getItem("backRole"),
pageNum: obj.curr
}, //数据,这里使用的是Json格式进行传输
success: function(data) {
if(data.meta.code == 200) {
table.reload('testReload', {
data: data.data.rows
});
}
}
})
}
}
});
table.on('tool(test)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
var cavityDid = obj.data.cavityDid;
if(layEvent === 'dimission') { //医生离职 修改状态为1
var backrole=localStorage.getItem('backRole');
var cavityDid=data.cavityDid
//do something
$.ajax({
type: "post", //提交方式
url: baseurl + "/backuser/doctordimission", //路径
dataType: 'json',
data: {
backrole:backrole,
cavityDid:cavityDid
}, //数据,这里使用的是Json格式进行传输
success: function(data) {
if(data.meta.code == 200) {
layer.msg("该医生成功下岗");
setTimeout(function () {
window.location.reload()
}, 500);
}else{
layer.msg("该医生已经下岗状态,不要重复操作");
}
}
})
}else if(layEvent === 'assume') { //医生离职 修改状态为1
var backrole=localStorage.getItem('backRole');
var cavityDid=data.cavityDid
//do something
$.ajax({
type: "post", //提交方式
url: baseurl + "/backuser/doctorassume", //路径
dataType: 'json',
data: {
backrole:backrole,
cavityDid:cavityDid
}, //数据,这里使用的是Json格式进行传输
success: function(data) {
if(data.meta.code == 200) {
layer.msg("该医生成功上岗");
setTimeout(function () {
window.location.reload()
}, 500);
}else{
layer.msg("该医生已经上岗状态,不要重复操作");
}
}
})
}
});
});
}
});
}
</script>
<script type="text/html" id="barDemo">
{{# if (d.cavityStatus=== 0) { }}
<span>在岗</span> {{# } else { }}
<span>离职</span> {{# } }}
</script>
</body>
</html>
头像点击放大
field: 'path',
title: '轮播图',
width: 150,
templet: '#barDemo1', //获取图片
event: 'aaaa', //点击放大图片需要
align: 'center',
aaaa是根据 event判断
else if(layEvent === 'aaaa') {
layer.photos({
photos: {
"data": [ //相册包含的图片,数组格式
{
"alt": "用户头像",
"pid": 666, //图片id
"src": user_headimg, //原图地址
"thumb": user_headimg //缩略图地址
}
],
},
anim: 3 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
日期选择器
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input activity_starttime" id="test5" placeholder="请输入开始时间">
</div>
</div>
</div>
$(function() {
activity_id = getQueryString("activity_id");
layui.use(['element', 'form', "upload", 'laydate'], function() {
var $ = layui.jquery,
element = layui.element;
var upload = layui.upload;
var laydate = layui.laydate;
form = layui.form;
getProListxuanze();
//日期时间选择器
laydate.render({
elem: '#test5',
type: 'datetime'
});
轮播图读取
<script type="text/html" id="barDemo1">
<img src="{{d.path}}" />
</script>
field: 'path',
title: '轮播图',
width: 150,
templet: '#barDemo1', //获取图片
event: 'aaaa', //点击放大图片需要
align: 'center',