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) },})
layer弹出层里再弹出一个弹出层导致新的弹出层重复弹出的问题
解决办法:在 layui 的 layer 配置 json 里给每个弹出层指定个不同的 id 即可
let index = layer.open({ type: 1, title: false, move: $('#uploadHead'), closeBtn: 0, area: ['5.1979rem', '2.5052rem'], content: $('#uploadFileModel'), id: 'layer1'})layer.confirm( '是否取消本次文件上传？', { skin: 'confirm-class', icon: 3, title: '提示', id: 'layer2' }, function (index1) { // index1表示确认框代表的弹出层实例 layer. ...
实时监听input或textarea值发生变化（不需要失去焦点）
暂时只对 input 和 textarea 有效
select 没经过测试，不知道对 select 是否也有效
$('textarea').bind('input propertychange', function () { // do sth})
利用jQuery实现让容器的滚动条滚动到某个内部元素的位置。让内部元素本来在中间，一下子跑到最上面
<ul class="parent" style="height:50px;overflow:auto"> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li></ul>
$('.parent').scrollTop( $('.children:eq(2)').offset().top - $(&#x ...
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 ...
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删除鼠标悬浮背景颜色变色的效果
/*删除鼠标悬浮背景变色效果*//*其中#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动态纵向合并单元格
// 正常渲染表格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', ...
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懒加载
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) { ...
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 ...
在子弹窗写方法关闭当前子弹窗
let index = parent.layer.getFrameIndex(window.name)parent.layer.close(index)
table高度自适应
只需要给表格加上一下 css 即可，加上之后，使用 templet 可以自定义格式化 html 来填充每个 td 的高度
/*右下方的表格的内容高度自适应*/.layui-table-cell { display: table-cell; vertical-align: middle;}
注意：加上之后，可能标题和内容的宽度对应不起来，只需要手动给每个 col（表头对象）一个固定的宽度即可解决该问题
键盘事件
回车搜索$('#search').bind('keydown', function (event) { var e = event || window.event || arguments.callee.caller.arguments[0] if (e.keyCode == 13) { // search是输入框，此处是要执行输入完毕后按下回车后的操作 //………….. }})
layer弹出带遮罩得加载动画
var index = layer.msg('正在删除文件，请耐心等待', {icon: 16, shade: 0.7, time: 0});
fileinput插件获取不到手动拖拽的文件对象的问题
var frame;$("#add_file").fileinput({ language: 'zh', //中文 uploadUrl: '/' + url + '/uploadFile', showUpload: false, //是否显示上传按钮 showCaption: false, //不显示文字表述 uploadAsync: true, //采用同步上传 removeFromPreviewOnError: true, //当文件不符合规则，就不显示预览 dropZoneEnabled: true, dropZoneTitle: '拖拽文件到这里 …<br>只支持单文件上传', maxFileCount: 100, maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小 uploadEx ...
父子页面通信
子页面获取父页面元素的值在 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()
时间日期控件点击完日期后，自动弹出时间选择框
<!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 ...
关于堆叠属性stack的问题
多系列的柱状图 stack 如果是数字且越小，该系列的每根柱子越靠前；
但是如果 stack 为 0，那么该系列的每根柱子都会被放到最后；
这是一个需要注意的问题！！！！！！！！！
给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');// 重新渲染下拉框