layui标注页面
时间:2019-09-16
本文章向大家介绍layui标注页面，主要包括layui标注页面使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>小区物业管理系统</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
<script src="../layuiadmin/jquery-1.8.0.min.js"></script>
<script src="../layuiadmin/configure.js"></script>
</head>
<body>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
<a lay-href="">主页</a>
<a><cite>组件</cite></a>
<a><cite>数据表格</cite></a>
<a><cite>开启头部工具栏</cite></a>
</div>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
<b>公告管理</b>
</div>
<div class="layui-card-body">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">小区 </label>
<div class="layui-input-inline">
<select name="manageAreaId" id="manageAreaId" lay-verify="" lay-search>
<option value="">小区</option>
</select>
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn-useradmin" lay-submit
lay-filter="select-">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
</div>
</div>
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
<button class="layui-btn" data-type="reload" id="addAreaAnnouncement">添加公告</button>
</div>
<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
<script type="text/html" id="test-table-toolbar-barDemo">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
class="layui-icon layui-icon-delete"></i>删除</a>
</script>
</div>
</div>
</div>
</div>
</div>
<!--添加界面-->
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="add_announcements"
style="padding-top: 30px; text-align: center; display: none">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">小区名称 <span style="color: red">*</span></label>
<div class="layui-input-inline">
<select name="addManageAreaId" id="addManageAreaId" lay-verify="" lay-search>
<option value="">请选择小区</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">公告标题 <span style="color: red;">*</span></label></label>
<div class="layui-input-inline">
<input type="text" id="addannounceTitle" lay-verify="addannounceTitle" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline">
<input type="text" id="addstartDate" lay-verify="addstartDate" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline">
<input type="text" id="addendDate" lay-verify="addendDate" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="" id="addstatus">
<option value="">请选择状态</option>
<option value="1">启用</option>
<option value="0">停用</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">公告内容 <span style="color: red;">*</span></label>
<div class="layui-input-inline">
<textarea name="desc" id="addannounceDetails" lay-verify="addannounceDetails" placeholder="请输入内容"
class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-item timo-finally">
<button class="layui-btn ajax-submit" id="Add_announcement"><i class="fa fa-check-circle"></i> 保存
</button>
<button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 取消</button>
</div>
</div>
</div>
<!--修改界面-->
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="update_areaAnnouncement"
style="padding-top: 30px; text-align: center; display: none">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">小区名称 <span style="color: red;">*</span></label>
<div class="layui-input-inline">
<input type="text" id="updatemanageAreaId" lay-verify="updatemanageAreaId" autocomplete="off"
class="layui-input" readonly>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">公告标题</label>
<div class="layui-input-inline">
<input type="text" id="updateannounceTitle" lay-verify="updateannounceTitle" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始日期</label>
<div class="layui-input-inline">
<input type="text" id="updatestartDate" lay-verify="updatestartDate" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline">
<input type="text" id="updateendDate" lay-verify="updateendDate" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="" id="updatestatus">
<option value="">请选择状态</option>
<option value="1">启用</option>
<option value="0">停用</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">公告内容</label>
<div class="layui-input-inline">
<textarea name="desc" id="updateannounceDetails" lay-verify="updateannounceDetails" placeholder="请输入内容"
class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-form-item">
<div>
<div class="layui-form-item timo-finally">
<button class="layui-btn ajax-submit" id="updateareaAnnouncement"><i class="fa fa-check-circle"></i>
保存
</button>
<button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 取消</button>
</div>
</div>
</div>
</div>
<script src="../layuiadmin/layui/layui.js"></script>
<script>
var user_phone = sessionStorage.getItem('phone');
var user_password = sessionStorage.getItem('password');
var manageAreaId = sessionStorage.getItem('manageAreaId');
var manageAreaName = sessionStorage.getItem('manageAreaName');
var companyId = sessionStorage.getItem('companyId');
if (manageAreaId == 0) {
manageAreaId = null;
}
layui.config({
base: '../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table', "form", "laydate"], function () {
var admin = layui.admin;
var table = layui.table;
var layer = layui.layer;
var form = layui.form;
var laydate = layui.laydate;
laydate.render({
elem: '#updatestartDate'
});
laydate.render({
elem: '#addstartDate'
});
laydate.render({
elem: '#addendDate'
});
laydate.render({
elem: '#updateendDate'
});
getManageArea();
//监听搜索
//监听搜索
form.on('submit(select-)', function(data){
var field = data.field;
//执行重载
table.reload('test-table-toolbar', {
where: field
});
});
table.render({
elem: '#test-table-toolbar'
, url: Url + '/announcement/selectpage'
, where: {
"companyId": companyId,
"manageAreaId": manageAreaId,
"announceTitle": '',
"announceDetails": '',
"startDate": '',
"endDate": '',
"status": '',
"createdTime": '',
"creatorId": '',
userPhone: user_phone,
userPassword: user_password
}
, method: 'post'
, cols: [[
{field: 'manageAreaName', width: '120', title: '小区'},
{field: 'announceTitle', width: '120', title: '公告标题'},
{field: 'announceDetails', width: '400', title: '公告内容'},
{field: 'startDate', width: '120', title: '开始日期'},
{field: 'endDate', width: '120', title: '结束日期'},
{
field: 'status', width: '150', title: '状态',
templet: function (row) {
if (row.status == 0) {
return '禁用';
} else if (row.status == 1) {
return '启用';
}
}
},
{field: 'createdTime', width: '180', title: '创建时间'},
{field: 'creatorId', width: '120', title: '创建人'},
{field: 'classify', width: '150', title: '操作', toolbar: '#test-table-toolbar-barDemo'}
]]
, page: true
, response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
}
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
if (res.code==200){
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data[1], //解析数据长度
"data": res.data[0] //解析数据列表
};
}else{
return {
"code": res.code, //解析接口状态
"msg": res.msg //解析提示文本
};
}
}
, done: function (res) {//成功后返回的参数
console.log(res);
}
});
$("#addAreaAnnouncement").on("click", function () {
layer.open({
type: 1,
title: "添加公告",
area: ['800px', '700px'],
content: $("#add_announcements")//引用的弹出层的页面层的方式加载修改界面表单
});
});
table.on('tool(test-table-toolbar)', function (obj) {
var data = obj.data;
console.log(data);
if (obj.event === 'del') { //删除事件
layer.confirm('确定删除？', function (index) {
//点击确定后的执行方法
$.ajax({
url: Url + "/announcement/deletebyid",
type: 'POST',
data: {
id: obj.data.id,
userPhone: user_phone,
userPassword: user_password
},
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
if (data.code == 200) {
layer.msg('删除成功！', {
offset: '125px'
, icon: 1
, time: 800 //1秒后跳转
}, function () {
layer.closeAll();//关闭所有的弹出层
//修改成功后刷新父界面
obj.del();
layer.close(index);
// window.location.reload();
});
} else {
layer.msg('删除失败！' + data.msg, {
offset: '125px'
, icon: 1
, time: 1000 //1秒后跳转
});
}
}
});
});
} else if (obj.event === 'edit') { //修改事件
$('#updatemanageAreaId').val(obj.data.manageAreaName);
$('#updateannounceTitle').val(obj.data.announceTitle);
$('#updateannounceDetails').val(obj.data.announceDetails);
$('#updatestartDate').val(obj.data.startDate);
$('#updateendDate').val(obj.data.endDate);
$('#updatestatus').val(obj.data.status);
form.render();
form.render('select');
layer.open({
type: 1,
title: "修改公告信息",
area: ['800px', '700px'],
content: $("#update_areaAnnouncement")//引用的弹出层的页面层的方式加载修改界面表单
});
}
//修改用户
$("#updateareaAnnouncement").on("click", function () {
var announceTitle = $('#updateannounceTitle').val();
var announceDetails =$('#updateannounceDetails').val();
var startDate = $('#updatestartDate').val();
var endDate = $('#updateendDate').val();
var status = $('#updatestatus').val();
if (announceTitle === '') {
layer.msg('公告标题不能为空', {icon: 5});
return;
} else if (announceDetails === '') {
layer.msg('公告内容不能为空', {icon: 5});
return;
} else
$.ajax({
url: Url + "/announcement/update",
type: 'POST',
data: {
id: obj.data.id,
announceTitle: announceTitle,
announceDetails: announceDetails,
startDate: startDate,
endDate: endDate,
status: status,
userPhone: user_phone,
userPassword: user_password
},
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
if (data.code == 200) {
layer.msg('修改成功！', {
offset: '125px'
, icon: 1
, time: 800 //1秒后跳转
}, function () {
layer.closeAll();//关闭所有的弹出层
//修改成功后刷新父界面
window.location.reload();
});
} else {
layer.msg('修改失败！' + data.msg, {
offset: '125px'
, icon: 1
, time: 1000 //1秒后跳转
});
}
}
});
});
});
$("#Add_announcement").on("click", function () {
var manageAreaId = $('#addManageAreaId').val();
var manageAreaName = $('#addManageAreaId').find("option:selected").text();
var announceTitle = $('#addannounceTitle').val();
var announceDetails =$('#addannounceDetails').val();
var startDate = $('#addstartDate').val();
var endDate = $('#addendDate').val();
var status = $('#addstatus').val();
if (manageAreaId === '') {
layer.msg('小区不能为空', {icon: 5});
return;
} else if (announceTitle === '') {
layer.msg('公告标题不能为空', {icon: 5});
return;
} else if (announceDetails === '') {
layer.msg('公告内容不能为空', {icon: 5});
return;
} else {
$.ajax({
url: Url + "/announcement/add",
type: 'POST',
data: {
companyId: companyId,
manageAreaId: manageAreaId,
manageAreaName: manageAreaName,
announceTitle: announceTitle,
announceDetails: announceDetails,
startDate: startDate,
endDate: endDate,
status: status,
userPhone: user_phone,
userPassword: user_password
},
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
if (data.code == 200) {
layer.msg('添加成功！', {
offset: '125px'
, icon: 1
, time: 800 //1秒后跳转
}, function () {
layer.closeAll();//关闭所有的弹出层
//添加成功后刷新父界面
window.location.reload();
});
} else {
layer.msg('添加失败！' + data.msg, {
offset: '125px'
});
}
}
}
);
}
})
;
})
;
//获取小区列表
var getManageArea = function () {
$.ajax({
url: Url + '/manageArea/selectRun',
type: 'POST',
data: {
"id": manageAreaId,
"companyId": companyId,
status: 1,
userPhone: user_phone,
userPassword: user_password
},
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (res) {
if (res.code == 200) {
$('#addManageAreaId').empty();
$('#addManageAreaId2').empty();
$('#manageAreaId').empty();
if (manageAreaId==0||manageAreaId==null||manageAreaId=="manageAreaId"){
$('#manageAreaId').append('<option value=""></option>');
}
for (var a = 0; a < res.data.length; a++) {
$('#addManageAreaId').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
$('#manageAreaId').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
$('#addManageAreaId2').append('<option value="' + res.data[a].id + '">' + res.data[a].areaName + '</option>');
}
var select = 'dd[lay-value=' + manageAreaId + ']';// 设置value
layui.form.render("select");
}
}, error(err) {
}
})
}
/* 点击取消关闭修改的弹出层 */
$(".close-popup").click(function (e) {
layer.closeAll();//关闭所有的弹出层
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/ynhk/p/11525434.html
- MySQL INSERT INTO...ON DUPLICATE KEY UPDATE的使用
- 通过Java代码来模拟乘法器
- INET_ATON()函数在MySQL5.6版本和5.7版本的差异
- Linux主机之间ssh免密登录配置
- 远控木马Posion Ivy开始肆虐缅甸和其它亚洲国家
- Slf4j+Logback配置文件变量使用小记
- Storm消息处理可靠性保证
- git+github创建分支&提交并贡献代码（linux环境）
- 使用Nginx代理restful实现SSL链路加密
- 使用Nginx代理thrift NIO实现SSL链路加密
- TThreadedSelectorServer介绍及Direct Memory OOM分析
- 通过Java程序提交通用Mapreduce任务并获取Job信息
- Mapreduce 任务提交源码分析1
- Java分布式神经网络库Deeplearning4j 环境搭建和运行一个例子
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 不知道怎么提高代码复用性？看看这几种设计模式吧！
- 框架源码中用来提高扩展性的设计模式
- 不知道怎么提高代码质量？来看看这几种设计模式吧！
- 手写React的Fiber架构，深入理解其原理
- emlog后台作者权限SQL注入
- 手写一个Redux，深入理解其原理
- 手写一个React-Redux，玩转React的Context API
- 使用React-Router实现前端路由鉴权
- 手写React-Router源码，深入理解其原理
- 深入Node.js的模块加载机制，手写require函数
- Redux异步解决方案之Redux-Thunk原理及源码解析
- MySQL设计与优化
- Elasticsearch学习笔记
- 《springboot实战》
- 360全国大学生信安技术大赛记录