浏览器中form和iput设置autocomplete="off" 不起作用

本文介绍如何通过在HTML表单中添加隐藏字段来阻止360浏览器等特定浏览器的自动填充功能,同时还提供了针对不同浏览器的autocomplete属性设置方法。

开发中发现,360浏览器等为避免浏览器自动保存显示,form和iput设置autocomplete="off" 都不起作用。

解决办法:

<form method="post" action="merchantLogin.htm" id="loginform" autocomplete="off">

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

</form>


脑补:

<INPUT name="NAME" type="text" autocomplete="off" class="advsearchinp" id="NAME" onkeyup="changeName()" />

这里autocomplete属性是: input历史记录的功能,on是打开,off是关闭. 默认为on.

代表的意思为:是否让浏览器自动记录之前输入的值.

但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录。  

MSIE自定义了input 的扩展属性 autocomplete,置为off即可 

< input type="text"  autocomplete="off"   id="number"/> 

用这个方法可以屏蔽MSIE,Firefox则需要使用另一个扩展属性disableautocomplete 

< input type="text"  disableautocomplete  id="number"/> 

两扩展属性可以同时使用,浏览器会根据自身特性自动解析。


<!-- 权限修改/Details --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/diy.css"> <script src="../../js/axios.min.js"></script> </head> <body> <article class="sign_in"> <div class="warp article_type"> <div class="layui-container"> <div class="layui-row"> <form class="layui-form" action=""> <div class="form-input-box"> <div class="layui-form-item"> <label class="layui-form-label">用户组</label> <div class="layui-input-block input-i block"> <input type="text" disabled="true" name="title" lay-verify="title" autocomplete="off" class="layui-input" id="user_group"> <!---显示权限所属的用户组,数据从后端获取--> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">权限名称</label> <div class="layui-input-block input-i block"> <input type="text" disabled="true" name="title" lay-verify="title" autocomplete="off" class="layui-input" id="mod_name_show"> <!---根据后端返回的路径动态生成名称--> </div> </div> <!--开关控件--> <div class="layui-form-item"> <label class="layui-form-label">是否可增加</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="add" lay-skin="switch" lay-text="是|否" id="add"> </div> </div> <div class="layui-form-item"> <label class=" layui-form-label">是否可删除</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="del" lay-skin="switch" lay-text="是|否" id="del"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否可修改</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="set" lay-skin="switch" lay-text="是|否" id="set"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否可查询</label> <div class="layui-input-block ckbox"> <input type="checkbox" name="get" lay-skin="switch" lay-text="是|否" id="get"> </div> </div> </div> </form> <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-normal" id="submit"><span>确认</span></button> <button type="button" class="layui-btn layui-btn-normal" id="cancel"><span>取消</span></button> </div> </div> </div> </div> </article> </body> <script src="../../layui/layui.js"></script> <script src="../../js/base.js" charset="utf-8"></script> <script src="../../js/index.js"></script> <script> var BaseUrl = baseUrl() layui.use(['upload', 'element', 'layer'], async function () { var $ = layui.jquery , upload = layui.upload , element = layui.element , layer = layui.layer; let token = localStorage.getItem('token') || null let user_group = document.querySelector('#user_group') let mod_name_show = document.querySelector('#mod_name_show') let add = document.querySelector('#add') let del = document.querySelector('#del') let set = document.querySelector('#set') let get = document.querySelector('#get') let cancel = document.querySelector('#cancel') let submit = document.querySelector('#submit') let value = location.search.substring(1) let obj const {data: rese} = await axios.get(BaseUrl + '/api/auth/get_obj', { params: { auth_id: value } }) obj = rese.result.obj if (rese) { user_group.value = obj.user_group if (obj.path.replace('/'+obj.table_name+'/','')=='table'){ mod_name_show.value = obj.mod_name+'后台列表' } if (obj.path.replace('/'+obj.table_name+'/','')=='view'){ mod_name_show.value = obj.mod_name+'后台详情' } if (obj.path.replace('/'+obj.table_name+'/','')=='list'){ mod_name_show.value = obj.mod_name+'前台列表' } if (obj.path.replace('/'+obj.table_name+'/','')=='details'){ mod_name_show.value = obj.mod_name+'前台详情' } if (obj.path.replace('/'+obj.table_name+'/','')=='edit'){ mod_name_show.value = obj.mod_name+'前台编辑' } if (obj.add=="1"){ add.checked = true; } if (obj.del=="1"){ del.checked = true; } if (obj.set=="1"){ set.checked = true; } if (obj.get=="1"){ get.checked = true; } layui.form.render("checkbox"); } let set_data = {} submit.addEventListener('click', async function () { set_data['add'] = add.checked?1:0 set_data['del'] = del.checked?1:0 set_data['set'] = set.checked?1:0 set_data['get'] = get.checked?1:0 const {data: res} = await axios.post(BaseUrl + '/api/auth/set?auth_id=' + value, set_data, { headers: { 'x-auth-token': token, 'Content-Type': 'application/json' } }) if (res.result == 1) { layer.msg('<span>确认</span>/Confirm成功'); setTimeout(function () { // window.location.replace("./table.html"); colseLayer() }, 1000) } }) cancel.onclick = function () { // window.location = ('./table.html') colseLayer() } }) </script> <style type="text/css"> .layui-form-item{ margin-bottom: 50px; width: 600px; display: flex; } .layui-input-block{ position: relative; bottom: 38px; left: 37px; } </style> </html> 分析以上代码,都是什么作用功能
05-28
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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"> <style> .layui-card { margin-bottom: 15px; } .layui-btn { margin-right: 10px; } .search-area { margin-bottom: 15px; } .layui-form-item { margin-bottom: 15px; } .salary-calc { background-color: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 15px; } .salary-calc .layui-form-item { margin-bottom: 5px; } /* 添加考勤页面中的样式 */ .search-area { padding: 20px; background-color: #f8f8f8; border-radius: 4px; margin-bottom: 15px; } .btn-area { padding: 15px; background-color: #f8f8f8; border-radius: 4px; margin-bottom: 15px; } </style> </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> </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">薪资信息表</div> <div class="layui-card-body"> <!-- 操作按钮区域 - 使用考勤页面的样式 --> <div class="btn-area"> <button class="layui-btn layui-btn-normal" id="add-btn"> <i class="layui-icon"></i> 新增 </button> <button class="layui-btn layui-btn-danger" id="delete-btn"> <i class="layui-icon"></i> 删除 </button> <button class="layui-btn layui-btn-warm" id="export-btn"> <i class="layui-icon"></i> 导出 </button> </div> <!-- 搜索区域 - 使用考勤页面的样式 --> <div class="search-area"> <div class="layui-inline"> <input class="layui-input" name="id" id="test-table-demoReload" placeholder="搜索ID" autocomplete="off"> </div> <button class="layui-btn" id="search-btn">搜索</button> <button class="layui-btn layui-btn-primary" id="reset-btn">重置</button> </div> <table class="layui-hide" id="test-table-reload" lay-filter="user"></table> <!-- 操作列模板 --> <script type="text/html" id="table-bar"> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a> </script> </div> </div> </div> </div> </div> <!-- 新增薪资模态框(参考考勤页面结构) --> <div id="addModal" style="display: none; padding: 20px;"> <form class="layui-form" lay-filter="salary-form"> <input type="hidden" name="sid"> <div class="layui-form-item"> <label class="layui-form-label">员工ID</label> <div class="layui-input-block"> <input type="number" name="eid" required lay-verify="required" class="layui-input" placeholder="请输入员工ID"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">部门ID</label> <div class="layui-input-block"> <input type="number" name="departmentid" required lay-verify="required" class="layui-input" placeholder="请输入部门ID"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">薪资等级</label> <div class="layui-input-block"> <input type="number" name="slevel" class="layui-input" placeholder="请输入薪资等级"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">薪资月份</label> <div class="layui-input-block"> <input type="text" name="smonth" required lay-verify="required" class="layui-input" id="addSmonth" placeholder="格式:YYYY-MM"> </div> </div> <div class="salary-calc"> <div class="layui-form-item"> <label class="layui-form-label">基本工资</label> <div class="layui-input-block"> <input type="number" name="sbase" step="0.01" class="layui-input calc-trigger" placeholder="请输入基本工资" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">奖金</label> <div class="layui-input-block"> <input type="number" name="sbonus" step="0.01" class="layui-input calc-trigger" placeholder="请输入奖金" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">津贴</label> <div class="layui-input-block"> <input type="number" name="sallowance" step="0.01" class="layui-input calc-trigger" placeholder="请输入津贴" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">加班费</label> <div class="layui-input-block"> <input type="number" name="sovertime" step="0.01" class="layui-input calc-trigger" placeholder="请输入加班费" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">扣款</label> <div class="layui-input-block"> <input type="number" name="sdeductions" step="0.01" class="layui-input calc-trigger" placeholder="请输入扣款" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">社保</label> <div class="layui-input-block"> <input type="number" name="sinsurance" step="0.01" class="layui-input calc-trigger" placeholder="请输入社保" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">公积金</label> <div class="layui-input-block"> <input type="number" name="sprovidentfund" step="0.01" class="layui-input calc-trigger" placeholder="请输入公积金" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">个税</label> <div class="layui-input-block"> <input type="number" name="stax" step="0.01" class="layui-input calc-trigger" placeholder="请输入个税" value="0"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">实发工资</label> <div class="layui-input-block"> <input type="number" name="netsalary" step="0.01" class="layui-input" placeholder="自动计算" readonly> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">调整原因</label> <div class="layui-input-block"> <textarea name="sreason" class="layui-textarea" placeholder="请输入调整原因"></textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">发放状态</label> <div class="layui-input-block"> <select name="paymentstatus"> <option value="">请选择发放状态</option> <option value="已发放">已发放</option> <option value="未发放">未发放</option> <option value="发放中">发放中</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">发放日期</label> <div class="layui-input-block"> <input type="text" name="paymentdate" class="layui-input" id="addPaymentDate" placeholder="格式:YYYY-MM-DD"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitAdd">确认添加</button> <button type="button" class="layui-btn layui-btn-primary" id="closeAddModal">取消</button> </div> </div> </form> </div> <script src="../../../layuiadmin/layui/layui.js"></script> <script> layui.config({ base: '../../../layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'table', 'jquery', 'form', 'layer', 'laydate'], function(){ var table = layui.table; var $ = layui.jquery; var form = layui.form; var layer = layui.layer; var laydate = layui.laydate; // 方法级渲染 var tableIns = table.render({ elem: '#test-table-reload', id: 'empTable', url: '/salary/showsalary', method: 'GET', cols: [[ {checkbox: true, fixed: true}, {field:'sid', title: '薪水ID', width: 100, sort: true}, {field:'eid', title: '员工ID', width: 100}, {field:'departmentid', title: '部门ID', width: 100}, {field:'slevel', title: '薪资等级', width: 100}, {field:'smonth', title: '月份', width: 120}, {field:'sbase', title: '基本工资', width: 120}, {field:'sbonus', title: '奖金', width: 120}, {field:'sallowance', title: '津贴', width: 120}, {field:'sovertime', title: '加班费', width: 120}, {field:'netsalary', title: '实发工资', width: 120}, {field:'paymentstatus', title: '发放状态', width: 120}, {field:'paymentdate', title: '发放日期', width: 150}, {title: '操作', width: 150, toolbar: '#table-bar', fixed: 'right'} ]], page: true, limit: 5, limits: [5, 10, 15], height: 'full-200', parseData: function(res) { return { "code": res.code, "msg": res.msg, "count": res.count, "data": res.data }; } }); // 搜索按钮点击事件 $('#search-btn').on('click', function() { var sid = $('#test-table-demoReload').val(); table.reload('empTable', { page: { curr: 1 }, where: { sid: sid } }); }); // 重置按钮点击事件 $('#reset-btn').on('click', function() { $('#test-table-demoReload').val(''); table.reload('empTable', { page: { curr: 1 }, where: { sid: '' } }); }); // 新增按钮点击事件 - 使用考勤页面的方式 $('#add-btn').on('click', function() { // 初始化日期选择器 initLaydate(); // 打开添加模态框 layer.open({ type: 1, title: '新增薪资记录', content: $('#addModal'), area: ['800px', '700px'], fixed: true, shade: 0.3, success: function() { form.render(); // 重新渲染表单 // 绑定计算事件 $('.calc-trigger').on('input', calculateNetSalary); // 初始化计算 calculateNetSalary(); } }); }); // 初始化日期选择器(参考考勤页面) function initLaydate() { // 薪资月份(仅月份) laydate.render({ elem: '#addSmonth', type: 'month', format: 'yyyy-MM', placeholder: '请选择薪资月份' }); // 发放日期(仅日期) laydate.render({ elem: '#addPaymentDate', type: 'date', format: 'yyyy-MM-dd', placeholder: '请选择发放日期' }); } // 计算实发工资 function calculateNetSalary() { var sbase = parseFloat($('input[name="sbase"]').val()) || 0; var sbonus = parseFloat($('input[name="sbonus"]').val()) || 0; var sallowance = parseFloat($('input[name="sallowance"]').val()) || 0; var sovertime = parseFloat($('input[name="sovertime"]').val()) || 0; var sdeductions = parseFloat($('input[name="sdeductions"]').val()) || 0; var sinsurance = parseFloat($('input[name="sinsurance"]').val()) || 0; var sprovidentfund = parseFloat($('input[name="sprovidentfund"]').val()) || 0; var stax = parseFloat($('input[name="stax"]').val()) || 0; // 计算实发工资:应发工资 - 扣款 - 社保 - 公积金 - 个税 var netSalary = sbase + sbonus + sallowance + sovertime - sdeductions - sinsurance - sprovidentfund - stax; $('input[name="netsalary"]').val(netSalary.toFixed(2)); } // 监听添加表单提交(参考考勤页面) form.on('submit(submitAdd)', function(data) { var formData = data.field; // 确保数值字段是数字类型 formData.sbase = parseFloat(formData.sbase) || 0; formData.sbonus = parseFloat(formData.sbonus) || 0; formData.sallowance = parseFloat(formData.sallowance) || 0; formData.sovertime = parseFloat(formData.sovertime) || 0; formData.sdeductions = parseFloat(formData.sdeductions) || 0; formData.sinsurance = parseFloat(formData.sinsurance) || 0; formData.sprovidentfund = parseFloat(formData.sprovidentfund) || 0; formData.stax = parseFloat(formData.stax) || 0; formData.netsalary = parseFloat(formData.netsalary) || 0; // 发送添加请求 $.ajax({ url: '/salary/add', type: 'POST', contentType: 'application/json', data: JSON.stringify(formData), success: function(res) { if (res.code === 0) { layer.msg('添加成功!', {icon: 1, time: 1500}); layer.closeAll(); // 关闭模态框 tableIns.reload(); // 刷新表格 } else { layer.msg('添加失败:' + res.msg, {icon: 2, time: 2000}); } }, error: function(xhr, status, error) { console.error('请求错误:', error, xhr.responseText); layer.msg('网络异常:' + error, {icon: 2, time: 2000}); } }); return false; // 阻止表单默认提交 }); // 关闭添加模态框(取消按钮) $('#closeAddModal').on('click', function() { layer.closeAll('page'); // 清空表单 document.querySelector('form[lay-filter="salary-form"]').reset(); form.render(); }); // 批量删除按钮点击事件 $('#delete-btn').on('click', function() { var checkStatus = table.checkStatus('empTable'); var selectedData = checkStatus.data; if (selectedData.length === 0) { layer.msg('请选择要删除的数据'); return; } var ids = selectedData.map(function(item) { return item.sid; }); layer.confirm('确定要删除选中的 ' + ids.length + ' 条数据吗?', function(index) { $.ajax({ url: '/salary/delete', type: 'POST', contentType: 'application/json', data: JSON.stringify(ids), success: function(res) { if (res.code === 0) { layer.msg('删除成功'); tableIns.reload(); } else { layer.msg(res.msg); } }, error: function() { layer.msg('网络错误,请重试'); } }); layer.close(index); }); }); // 导出按钮点击事件 $('#export-btn').on('click', function() { // 创建一个隐藏的iframe来触发下载 var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = '/salary/export'; document.body.appendChild(iframe); setTimeout(function() { document.body.removeChild(iframe); }, 3000); layer.msg('导出请求已发送,请稍候...'); }); // 表格行操作事件 table.on('tool(user)', function(obj) { var data = obj.data; if (obj.event === 'delete') { layer.confirm('确定要删除这条记录吗?', function(index) { $.ajax({ url: '/salary/delete', type: 'POST', contentType: 'application/json', data: JSON.stringify([data.sid]), success: function(res) { if (res.code === 0) { layer.msg('删除成功'); tableIns.reload(); } else { layer.msg(res.msg); } } }); layer.close(index); }); } else if (obj.event === 'edit') { // 获取完整数据 $.ajax({ url: '/salary/' + data.sid, type: 'GET', success: function(res) { if (res.code === 0) { openFormDialog('编辑薪资记录', res.data); } else { layer.msg(res.msg); } }, error: function() { layer.msg('获取数据失败'); } }); } }); // 打开表单对话框(编辑用) function openFormDialog(title, data) { // 这里保留原有的编辑功能实现 // 由于代码较长,此处省略具体实现 // 实际使用时需要保留原有的编辑功能代码 layer.msg('编辑功能待开发'); } }); </script> </body> </html>package edu.cdut.controller; import com.alibaba.excel.EasyExcel; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import edu.cdut.entity.Salary; import edu.cdut.mapper.SalaryMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.net.URLEncoder; import java.time.LocalDateTime; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("/salary") public class SalaryController { @Autowired private SalaryMapper salaryMapper; @GetMapping("/showsalary") public Map<String, Object> showSalaryAll( @RequestParam(required = false) Integer sid, @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "5") Integer limit ) { Map<String, Object> result = new HashMap<>(); result.put("code", 0); result.put("msg", ""); QueryWrapper<Salary> queryWrapper = new QueryWrapper<>(); if (sid != null) { queryWrapper.eq("sid", sid); } Page<Salary> salaryPage = new Page<>(page, limit); Page<Salary> pageResult = salaryMapper.selectPage(salaryPage, queryWrapper); result.put("count", (salaryMapper.selectList (new QueryWrapper<>()).size())); result.put("data", pageResult.getRecords()); return result; } // 根据ID获取单条薪资记录 @GetMapping("/{id}") public Map<String, Object> getSalaryById(@PathVariable Integer id) { Map<String, Object> result = new HashMap<>(); try { Salary salary = salaryMapper.selectById(id); if (salary != null) { result.put("code", 0); result.put("data", salary); result.put("msg", "查询成功"); } else { result.put("code", 1); result.put("msg", "记录不存在"); } } catch (Exception e) { result.put("code", 1); result.put("msg", "查询失败:" + e.getMessage()); } return result; } // 导出Excel @GetMapping("/export") public void exportSalary(HttpServletResponse response) throws IOException { List<Salary> salaryList = salaryMapper.selectList(null); response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setCharacterEncoding("utf-8"); String fileName = URLEncoder.encode("薪资数据", "UTF-8"); response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx"); // 使用EasyExcel导出 EasyExcel.write(response.getOutputStream(), Salary.class) .sheet("薪资数据") .doWrite(salaryList); } // 添加薪资记录 @PostMapping("/add") public Map<String, Object> addSalary(@RequestBody Salary salary) { Map<String, Object> result = new HashMap<>(); try { // 设置创建时间更新时间 salary.setCreatetime(LocalDateTime.now()); salary.setUpdatetime(LocalDateTime.now()); int insertResult = salaryMapper.insert(salary); if (insertResult > 0) { result.put("code", 0); result.put("msg", "添加成功"); } else { result.put("code", 1); result.put("msg", "添加失败"); } } catch (Exception e) { result.put("code", 1); result.put("msg", "添加失败:" + e.getMessage()); } return result; } // 更新薪资记录 @PostMapping("/update") public Map<String, Object> updateSalary(@RequestBody Salary salary) { Map<String, Object> result = new HashMap<>(); try { // 设置更新时间 salary.setUpdatetime(LocalDateTime.now()); int updateResult = salaryMapper.updateById(salary); if (updateResult > 0) { result.put("code", 0); result.put("msg", "更新成功"); } else { result.put("code", 1); result.put("msg", "更新失败,记录不存在"); } } catch (Exception e) { result.put("code", 1); result.put("msg", "更新失败:" + e.getMessage()); } return result; } // 删除薪资记录 @PostMapping("/delete") public Map<String, Object> deleteSalary(@RequestBody List<Integer> ids) { Map<String, Object> result = new HashMap<>(); try { int deleteResult = salaryMapper.deleteBatchIds(ids); if (deleteResult > 0) { result.put("code", 0); result.put("msg", "删除成功"); } else { result.put("code", 1); result.put("msg", "删除失败"); } } catch (Exception e) { result.put("code", 1); result.put("msg", "删除失败:" + e.getMessage()); } return result; } } //package edu.cdut.controller; // //import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; //import com.baomidou.mybatisplus.extension.plugins.pagination.Page; //import edu.cdut.entity.Salary; //import edu.cdut.mapper.SalaryMapper; //import org.springframework.beans.factory.annotation.Autowired; //import org.springframework.web.bind.annotation.*; // //import javax.servlet.http.HttpServletResponse; //import java.io.IOException; //import java.net.URLEncoder; //import java.util.HashMap; //import java.util.List; //import java.util.Map; // //@RestController //@RequestMapping("/salary") //public class SalaryController { // // @Autowired // private SalaryMapper salaryMapper; // // @GetMapping("showsalary") // public Map<String, Object> showSalaryAll( // @RequestParam(required = false) Integer sid, // @RequestParam(defaultValue = "1") Integer page, // @RequestParam(defaultValue = "5") Integer limit // ) { // Map<String, Object> result = new HashMap<>(); // result.put("code", 0); // result.put("msg", ""); // // QueryWrapper<Salary> queryWrapper = new QueryWrapper<>(); // if (sid != null) { // queryWrapper.eq("sid", sid); // } // // Page<Salary> salaryMapperPage = new Page<>(page, limit); // Page<Salary> pageResult = salaryMapper.selectPage(salaryMapperPage, queryWrapper); // // result.put("count", salaryMapper.selectCount(queryWrapper)); // result.put("data", pageResult.getRecords()); // // return result; // } // // // 导出Excel的单独方法 // @GetMapping("export") // public void exportSalary(HttpServletResponse response) throws IOException { // List<Salary> salaryList = salaryMapper.selectList(null); // // response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); // response.setCharacterEncoding("utf-8"); // String fileName = URLEncoder.encode("薪资数据", "UTF-8"); // response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx"); // // // 如果有EasyExcel依赖,取消注释下面这行 // // EasyExcel.write(response.getOutputStream(), Salary.class).sheet("薪资数据").doWrite(salaryList); // // // 如果没有EasyExcel,可以先返回JSON数据测试 // // 这里先简单返回成功信息 // response.getWriter().write("导出功能需要添加EasyExcel依赖"); // } // // // 添加薪资记录 // @PostMapping("/add") // public Map<String, Object> addSalary(@RequestBody Salary salary) { // Map<String, Object> result = new HashMap<>(); // try { // int insertResult = salaryMapper.insert(salary); // if (insertResult > 0) { // result.put("code", 0); // result.put("msg", "添加成功"); // } else { // result.put("code", 1); // result.put("msg", "添加失败"); // } // } catch (Exception e) { // result.put("code", 1); // result.put("msg", "添加失败:" + e.getMessage()); // } // return result; // } // // // 删除薪资记录 // @PostMapping("/delete") // public Map<String, Object> deleteSalary(@RequestBody List<Integer> ids) { // Map<String, Object> result = new HashMap<>(); // try { // int deleteResult = salaryMapper.deleteBatchIds(ids); // if (deleteResult > 0) { // result.put("code", 0); // result.put("msg", "删除成功"); // } else { // result.put("code", 1); // result.put("msg", "删除失败"); // } // } catch (Exception e) { // result.put("code", 1); // result.put("msg", "删除失败:" + e.getMessage()); // } // return result; // } //}1.新增按钮点击输入数据后无法将数据储存到表格中2.编辑按钮点击后应该显示相应列的数据并且可以更改改后的数据应出现在表格数据中
最新发布
09-20
/** * 保存 */ @RequestMapping("/save") @PreAuthorize("hasAnyAuthority('generator:sysroleuser:save')") public Result save(@RequestBody NoticeMessage noticeMessage){ noticeMessageService.save(noticeMessage); return Result.succeed("保存成功"); } /** * 修改 */ @RequestMapping("/update") @PreAuthorize("hasAnyAuthority('generator:sysroleuser:update')") public Result update(@RequestBody NoticeMessage noticeMessage){ noticeMessageService.update(noticeMessage); return Result.succeed("修改成功"); } 修改代码,添加功能跟修改功能无法使用,以下是页面代码<div class="layui-card"> <div class="layui-card-header"> <h2 class="header-title">通知消息</h2> <span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a> <a><cite>通知消息</cite></a> </span> </div> <div class="layui-card-body"> <div class="layui-form toolbar"> 搜索: <select id="noticeMessage-search-key" lay-verify=""> <option value="">请选择</option> <option value="title">通知标题</option> </select>  <input id="noticeMessage-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>  <button id="noticeMessage-btn-search" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button> <button id="noticeMessage-btn-add" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button> </div> <!-- 数据表格 --> <table class="layui-table" id="noticeMessage-table" lay-filter="noticeMessage-table"></table> </div> </div> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/neditor.service.js"></script> <script type="text/javascript" charset="utf-8" src="module/neditor/i18n/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="module/neditor/third-party/browser-md5-file.min.js"></script> <!-- 表单弹窗 --> <script type="text/html" id="noticeMessage-model"> <div class="model-container"> <form id="noticeMessage-form" lay-filter="noticeMessage-form" class="layui-form model-form" style="padding: 15px;"> <div class="layui-form-item" style="display:none"> <label class="layui-form-label">主键id</label> <div class="layui-input-block"> <input name="id" placeholder="请输入主键id" type="text" class="layui-input" /> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知标题</label> <div class="layui-input-block"> <input name="title" placeholder="请输入通知标题" type="text" class="layui-input" maxlength="128" lay-verify="required" required/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知副标题</label> <div class="layui-input-block"> <input name="subTitle" placeholder="请输入通知副标题" type="text" class="layui-input" maxlength="35"/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">客户端</label> <div class="layui-input-block"> <select name="accountType" id="accountType-children" lay-filter="accountType" lay-verify="required" required> <option value="">请选择客户端</option> <option value="0">居民端</option> <option value="1">医生端</option> <option value="2">全部</option> </select> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">App类型</label> <div class="layui-input-block"> <select name="appType" id="appType-children" lay-filter="appType" lay-verify="required" required> <option value="">请选择App类型</option> <option value="0">安卓端</option> <option value="1">苹果端</option> <option value="2">全部</option> </select> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">发布时间</label> <div class="layui-input-block"> <input name="publishDate" id="publishDate" placeholder="请选择发布时间" type="text" class="layui-input" maxlength="20" lay-verify="required" required/> </div> </div> <div class="layui-form-item" style="margin-bottom: 20px;"> <label class="layui-form-label">通知条件</label> <div class="layui-input-block"> <input name="conditions" placeholder="通知条件" type="text" class="layui-input" maxlength="20" lay-verify="required" required/> </div> </div> <div class="layui-form-item notice-content-group"> <label class="layui-form-label">通知内容</label> <div class="layui-input-block"> <textarea name="content" id="content" style="width:100%;"></textarea> </div> </div> </form> <div class="model-form-footer" style="padding: 10px 15px; border-top: 1px solid #eee; text-align: right; background-color: #fff;"> <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button> <button class="layui-btn" lay-filter="noticeMessage-form-submit" lay-submit>保存</button> </div> </div> </script> <!-- 通知消息发布状态 --> <script type="text/html" id="noticeMessage-table-publishState"> <input type="checkbox" lay-filter="noticeMessage-table-publishState" value="{{d.id}}" lay-skin="switch" lay-text="发布|冻结" {{d.publishState==1?'checked':''}}/> </script> <!-- 表格操作列 --> <script type="text/html" id="noticeMessage-table-bar"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'laydate'], function () { var form = layui.form; var table = layui.table; var config = layui.config; var layer = layui.layer; var util = layui.util; var laydate = layui.laydate; var admin = layui.admin; var formSelects = layui.formSelects; var editor = null; // 声明全局编辑器变量 var currentDialogIndex = null; // 保存当前弹窗索引 // 添加自定义样式 var style = document.createElement('style'); style.textContent = ` .model-container { display: flex; flex-direction: column; height: 100%; } .model-form { flex: 1; overflow-y: auto; margin-bottom: 0; padding-bottom: 80px; } .model-form-footer { position: sticky; bottom: 0; z-index: 10; } .layui-form-item { margin-bottom: 15px !important; } .layui-form-label { padding: 9px 10px !important; width: 100px !important; } .layui-input-block { margin-left: 130px !important; } .layui-form-select dl { z-index: 9999 !important; max-height: 200px; position: absolute; } .notice-content-group { position: relative; z-index: 1; } .layui-layer-content { overflow: visible !important; } .model-form-scroll { overflow-y: auto; max-height: calc(100% - 60px); } .layui-form-select .layui-edge { top: 50%; margin-top: -3px; } .layui-unselect.layui-form-select span { color: #999; } `; document.head.appendChild(style); // 渲染表格 table.render({ elem: '#noticeMessage-table', url: config.base_server + 'api-primaryJydc/noticemessage/list', where: { access_token: config.getToken().access_token }, page: true, cols: [[ {type: 'numbers', title: '序号'}, {field: 'title', sort: true, title: '通知标题'}, {field: 'subTitle', sort: true, title: '通知副标题'}, {field: 'accountType', sort: true, templet: function(d){ return d.accountType =='0' ? "居民端" : d.accountType =='1' ? "医生端" : "全部"; },title:'客户端'}, {field: 'appType', sort: true, templet: function(d){ return d.appType =='0' ? "安卓端" : d.appType =='1' ? "苹果端" : "全部"; },title:'App类型'}, {field: 'content', sort: true, title: '通知内容'}, {field: 'publishDate', sort: true, templet: function (d) { return util.toDateString(d.publishDate); },title: '发布时间'}, {field: 'publishState', sort: true,templet:"#noticeMessage-table-publishState", title: '发布状态 '}, {field: 'conditions', sort: true, title: '条件'}, {align: 'center', toolbar: '#noticeMessage-table-bar', title: '操作', width: 250} ]] }); // 添加按钮点击事件 $('#noticeMessage-btn-add').click(function () { showEditModel(); }); // 表单提交处理 form.on('submit(noticeMessage-form-submit)', function (data) { layer.load(2); var url = ""; var $subTile = $("input[name='subTitle']").val(); // 副标题处理 if ($subTile === '' || $subTile === null) { // 空 var $content = UE.getEditor('content').getContentTxt(); data.field.subTitle = $content.substr(0, 35); } // 确定URL if (data.field.id === '') { url = config.base_server + 'api-primaryJydc/noticemessage/save'; } else { url = config.base_server + 'api-primaryJydc/noticemessage/update'; } // 发送请求 admin.req(url, JSON.stringify(data.field), function (response) { layer.closeAll('loading'); if (response.resp_code === 0) { layer.msg(response.resp_msg, {icon: 1, time: 500}); table.reload('noticeMessage-table'); closeEditorAndDialog(); } else { layer.msg(response.resp_msg, {icon: 2, time: 500}); } }, 'POST'); return false; }); // 工具条点击事件 table.on('tool(noticeMessage-table)', function (obj) { var data = obj.data; if (obj.event === 'edit') { if (data.publishState == 1) { layer.msg("已经发布,不能修改!", {icon: 2, time: 1500}); } else { showEditModel(data); } } else if (obj.event === 'del') { if (data.publishState == 1) { layer.msg("已经发布,不能删除!", {icon: 2, time: 1500}); } else { doDelete(obj); } } }); // 搜索按钮点击事件 $('#noticeMessage-btn-search').click(function () { var key = $('#noticeMessage-search-key').val(); var value = $('#noticeMessage-edit-value').val(); table.reload('noticeMessage-table', {where: {searchKey: key, searchValue: value}}); }); // 修改通知消息状态 form.on('switch(noticeMessage-table-publishState)', function (obj) { layer.load(2); admin.req('api-primaryJydc/noticemessage/updatePublishState', { id: obj.elem.value, publishState: obj.elem.checked ? 1 : 0 }, function (data) { layer.closeAll('loading'); if (data.resp_code == 0) { layer.msg(data.resp_msg, {icon: 1, time: 500}); table.reload('noticeMessage-table'); } else { layer.msg(data.resp_msg, {icon: 2, time: 500}); $(obj.elem).prop('checked', !obj.elem.checked); form.render('checkbox'); } }, 'GET'); }); // 监听下拉框变化,动态调整富文本高度 form.on('select(accountType)', adjustEditorHeight); form.on('select(appType)', adjustEditorHeight); // 初始化富文本编辑器 function initEditor(contentData) { if (editor) { UE.delEditor('content'); editor = null; } $('#content').show(); var editorHeight = calculateEditorHeight(); editor = UE.getEditor('content', { initialFrameWidth: '100%', initialFrameHeight: editorHeight, autoHeightEnabled: false, autoFloatEnabled: false, zIndex: 100 }); if (contentData) { editor.ready(function() { editor.setContent(contentData); }); } } // 计算富文本编辑器高度 function calculateEditorHeight() { if (!currentDialogIndex) return 300; var dialogHeight = $('.layui-layer:eq('+currentDialogIndex+')').height() || $(window).height() * 0.65; var otherElementsHeight = 0; $('#noticeMessage-form .layui-form-item').not('.notice-content-group').each(function() { otherElementsHeight += $(this).outerHeight(true); }); var availableHeight = dialogHeight - otherElementsHeight - 100; return Math.max(150, Math.min(400, availableHeight)); } // 调整富文本编辑器高度 function adjustEditorHeight() { if (!editor) return; var newHeight = calculateEditorHeight(); editor.setHeight(newHeight); } // 显示编辑弹窗 var showEditModel = function (data) { var content = $('#noticeMessage-model').html(); currentDialogIndex = layer.open({ type: 1, title: data ? '修改通知消息' : '添加通知消息', area: ['70%', '70vh'], maxWidth: 800, content: content, success: function(layero) { var contentDiv = layero.find('.layui-layer-content'); contentDiv.css({ 'padding': 0, 'overflow': 'visible' }); var formContainer = layero.find('.model-form'); formContainer.wrap('<div class="model-form-scroll"></div>'); $('#noticeMessage-form')[0].reset(); if (data) { form.val('noticeMessage-form', { id: data.id, title: data.title, subTitle: data.subTitle, accountType: data.accountType, appType: data.appType, conditions: data.conditions, publishDate: util.toDateString(data.publishDate, 'yyyy-MM-dd HH:mm:ss') }); } laydate.render({ elem: '[name="publishDate"]', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' }); setTimeout(function() { form.render('select'); }, 100); setTimeout(function() { initEditor(data ? data.content : ''); }, 100); $(document).off('click', '[ew-event="closeDialog"]').on('click', '[ew-event="closeDialog"]', function() { closeEditorAndDialog(); }); }, end: function() { closeEditorAndDialog(); } }); }; // 关闭编辑器弹窗的清理函数 function closeEditorAndDialog() { if (editor) { UE.delEditor('content'); editor = null; $('#content').hide(); } if (currentDialogIndex !== null) { layer.close(currentDialogIndex); currentDialogIndex = null; } } // 删除 var doDelete = function (obj) { layer.confirm('确定要删除吗?', function (i) { layer.close(i); layer.load(2); admin.req('api-primaryJydc/noticemessage/delete?id=' + obj.data.id, {}, function (data) { layer.closeAll('loading'); if (data.resp_code == 0) { layer.msg(data.resp_msg, {icon: 1, time: 500}); obj.del(); } else { layer.msg(data.resp_msg, {icon: 2, time: 500}); } }, 'POST'); }); }; // 初始化下拉框样式 form.render('select'); }); </script>
09-03
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值