table动态纵向合并单元格
// 正常渲染表格table.render({ elem: '#CxDataQdTjXXTab', height: 300, url: Hussar.ctxPath + '/CxData/getQdCxData', cols: [ //一级表头 [ {title: '序号', type: 'numbers', align: 'center', halign: 'center', hide: true}, {title: '区段', field: 'qj', align: 'center', halign: 'center', ...
layer弹出层table变形的问题
解决方案 1前提：需要给每个表头设置合适的宽度效果：弹出层宽度根据渲染出来的表格宽度自适应，高度固定（百分比/具体的数值都可以）
.dataDetailLayer { display: none; padding: 20px;}
<div class="dataDetailLayer"> <table id="dataDetailTable" lay-filter="dataDetailTable"></table></div>
table.on('tool(dataTable)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值" let data = obj.data //获得当前行数据 let id = data.id let layEvent = obj.event if (layEvent === 'vi ...
table单元格编辑使用键盘跳转
可以单独把下面的代码写个 js，然后在需要的页面上引入该 js
$(document).on('keydown', '.layui-table-edit', function (e) { // debugger var td = $(this).parent('td'), tr = td.parent('tr'), trs = tr.parent().parent().find('tr'), tr_index = tr.index(), td_index = td.index(), td_last_index = tr.find('[data-edit="text"]:last').index(), td_first_index = tr.find('[data-edit="text"]:first').index() switch (e.keyCode) ...
table删除鼠标悬浮背景颜色变色的效果
/*删除鼠标悬浮背景变色效果*//*其中#cxDataQdTjSxDiv是数据表格table容器的id,格式如下*/#CxDataQdTjSxDiv .layui-table tbody tr:hover,#CxDataQdTjSxDiv .layui-table thead tr,#CxDataQdTjSxDiv .layui-table[lay-even] tr:nth-child(even) { background-color: transparent !important;}
<div id="CxDataQdTjSxDiv" class="tableContainer"> <label class="tableTitle">区段超限情况统计（上行）</label> <table id="CxDataQdTjSxTab" class="layui-table"></table></div ...
table点击行触发表格的checkbox选中
// 正常的渲染一个表格table.render({ elem: '#LineStruTable', height: $('.tableArea').height() - 85, url: Hussar.ctxPath + '/lineStru/list', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports'], cols: [ [ { checkbox: true, halign: 'center', align: 'center', width: 50 }, { title: '序号', type: 'numbers', align: 'center', hali ...
layer弹出带遮罩得加载动画
var index = layer.msg('正在删除文件，请耐心等待', {icon: 16, shade: 0.7, time: 0});
table拼接日期输入框和下拉框
代码如下
var SbUseHistoryInfoTableEditRowObj = null // 预先定义一个下拉框的变量// 使用履历table.render({ elem: '#SbUseHistoryInfoTable', data: [], method: 'post', contentType: 'application/json;charset=UTF-8', //url : Hussar.ctxPath+'/sbinfoProject/getSbUseHistory', cols: [ [ { checkbox: true, halign: 'center', align: 'center', width: 50 }, { title: '序号', type: 'numbers', align ...
table懒加载
let page = 1, limit = 30, pageNum = 0,count = 0let dataList = [];DataAnalysis.initData = function (page, limit) { var ajax = new $ax( Hussar.ctxPath+'/swj/swjdetail', function (res) { count = res.count; let recordList = res.data; for (let i = 0; i < recordList.length; i++) { dataList.push(recordList[i]); } pageNum = Math.floor(count/limit)+1; }, function (data) { ...
在子弹窗写方法关闭当前子弹窗
let index = parent.layer.getFrameIndex(window.name)parent.layer.close(index)
给layui的下拉框赋值，同时触发layui的下拉框选择事件
前提：该选择框需要放在 layui-form 的表单下
$("#citySerch").val(cityId);// 给下拉框赋值Let filter=$('#citySerch').attr('lay-filter');//获取该元素的lay-filter属性filter&&layui.event('form','select('+filter+')',{elem:$("#citySerch"),value:cityId});//触发该标签的select事件form.render('select');// 重新渲染下拉框
table高度自适应
只需要给表格加上一下 css 即可，加上之后，使用 templet 可以自定义格式化 html 来填充每个 td 的高度
/*右下方的表格的内容高度自适应*/.layui-table-cell { display: table-cell; vertical-align: middle;}
注意：加上之后，可能标题和内容的宽度对应不起来，只需要手动给每个 col（表头对象）一个固定的宽度即可解决该问题
时间日期控件点击完日期后，自动弹出时间选择框
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="layui-master/dist/css/layui.css" /> <style> #f1 { width: 500px; margin: 500px auto; } </style> </head> <body> <div> <form action="" class="layui-form" id="f1"> <input t ...
父子页面通信
子页面获取父页面元素的值在 layui.use().里面写即可let cityId = parent.document.getElementById('cityId').valuelet id = parent.layui.$('#id').val()
子页面调用父页面的方法在 layui.use 之前写一个 json 对象赋给 window 对象var Cdl = { seItem: null, // 选中的条目 layIndex: null, scrollHeight: 0,}layui.user({ Cdl.initTreeView = function(){};})
子页面window.parent.Cdl.initTreeView()
layui 让父页面的某个按钮点击parent.layui.$('#search').click()
Kafka生产者、消费者的消息可靠性方案实现
以下代码基于 SpringKafka 2.3.13.RELEASE + Boot 2.2.9.RELEASE 实现
Producer 消息的可靠性实现方案：ack 模式调整 + 重试机制 + 规避重试机制下带来的问题
spring.kafka: producer: #这个参数可以是任意字符串，它是broker用来识别消息是来自哪个客户端的。在broker进行打印日志、衡量指标或者配额限制时会用到。 clientId: ${spring.application.name} #方便kafkaserver打印日志定位请求来源 bootstrap-servers: 127.0.0.1:8080 #kafka服务器地址，多个以逗号隔开 #acks=0：生产者把消息发送到broker即认为成功，不等待broker的处理结果。这种方式的吞吐最高，但也是最容易丢失消息的。 #acks=1：生产者会在该分区的leader写入消息并返回成功后，认为消息发送成功。如果群首写入消息失败，生产者会收到错误响应并进行重试。这种方式能够一定程度避 ...
ajax前后台参数传递
contentType 的类型
ajax 的默认 contentType 是：
“application/x-www-form-urlencoded;charset=utf-8”
它是最普通的{key-value,key-value}的格式
无论 get 还是 post，springboot 可以默认封装成一个简单的 bean,此时不用添加任何注解。但是如果 bean 的属性有数组等复杂属性。那么会封装失败
后台也可以用@RequestParam 注解来提取某个简单的参数，如果同名该注解可以省略。但是对于 get 请求。不能提取数组。
想要提取数组。请求方式必须为 post 并且语法如下@RequestParam(“ids[]”)
如果为
contentType:”application/json;charset=utf-8”,
data:JSON.stringfy(data),
此时，请求方式必须为 post，后台用@RequestBody(JavaBean javaBean)
来接收，该方式几乎是除了文件外的万能方式。
如果为 false
那么一般就是上传文件，详见 ssmpj ...
ajax导入静态文件
导入静态json$.ajax({ type: 'get', url: Hussar.ctxPath + '/static/js/homePage/map.json', // 文件相对地址（相对于使用这个js脚本的html文件,非常重要，仔细理解这句话） dataType: 'json', // 类型,文件里定义的变量的类型 async: false, success: function (data) { console.log(data) }})
导入静态txt// 注意：导入txt时不要写dateType，会报错$.ajax({ url: './GZ11pathData.txt', // 文件相对地址（相对于使用这个js脚本的html文件,非常重要，仔细理解这句话） success: function (data) { console.log(data) },})
关于消费的同步异步问题，以及多个方法监听同一个topic
@KafkaListener(topics = "test")public void consumerTest1(String msg) throws InterruptedException { log.info("收到消息1：" + msg); TimeUnit.MILLISECONDS.sleep(10);}@KafkaListener(topics = "test")public void consumerTest2(String msg) throws InterruptedException { log.info("收到消息2：" + msg); TimeUnit.MILLISECONDS.sleep(10);}
如上所示多个方法消费同一个 topic那么，只会在一个方法中消费，不会两个方法都消费消息，即不会重复消费
同时当只有consumerTest1()方法时，如果手动阻塞线程，那么消息的消费也会变慢即如果向 test 发送 5 ...
Promise
promise 封装 ajax，并且 promise 的链式调用的示例let request = function (url, type = 'get', data = '', msg = '请求失败') { return new Promise((resolve, reject) => { // 封装jq ajax $.ajax({ type, url, async: true, data, success(res) { //成功的回调函数 if (res.code === 500) { Hussar.info(msg) reject() } resolve(res.data) }, error() { reject() } & ...
事件委托
拼接的元素对于 jQ 的 click 无响应，此时就需要事件委托
$('.file_container').on('click', '.file_del', (event) => { // 此时就能获取被点击的子元素，获取不到尝试加个parent()或children()试试 // 如过target里面还有元素，那么点击该元素也会触发，即会有事件冒泡 let dom = $(event.target)})$('.file_container').on('click', '.file_del', function () { // 或者不用event对象，直接用$(this)正常来说也能获取到 let dom = $(this)})
get请求的url经常会过长，导致数据丢失
解决方案：采用 post 请求，来解决该问题，写一个采用 post 请求的函数即可
function sendByPost(url, ids) { var oForm = document.createElement('form') oForm.method = 'post' oForm.action = url var hasitemsids_input = document.createElement('input') hasitemsids_input.type = 'hidden' hasitemsids_input.name = 'ids' hasitemsids_input.value = ids oForm.appendChild(hasitemsids_input) document.body.appendChild(oForm) oForm.submit()}
也可以使用 formData