layui
layui 更轻量级 比之WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地编织原生态的 HTML / CSS / JavaScript。
onlylele
细节决定感知!
展开
-
LAYUI 表内插入select 选择框,勾选内容项后处理追加数据字段
在数据表内添加select下拉菜单,切被选项是通过后台接口内容渲染的;实现勾选内容项后可以自动追加select选择的数据字段内容;实现效果如下:实现代码如下:<style> body{overflow: auto;} .layui-form-label{padding-left:0px;} .layui-btn-xs a{color: #fffff...原创 2020-03-16 09:34:19 · 909 阅读 · 0 评论 -
layui 借助 parseData 回调函数解析table 组件所规定的数据格式
table表数据内容操作,有时后台返回的数据格式不是所需要的数据格式,在layui table中需要自己定义所需要的数据格式;可参考layui文档:https://www.layui.com/doc/modules/table.html举个例子:代码实现如下:table.render({ elem: '#itemslist', ...原创 2020-03-13 19:25:29 · 14799 阅读 · 2 评论 -
layui 表格中添加input表单效果且实现数据监听
在layui 表格中列操作中插入input 表单输入框,实现数据内容监听效果;实现效果1:代码实现:<table class="layui-table layuiadmin-page-table" lay-skin="line" id="itemslist" lay-filter="itemslist"></table><!-- 采购数量输入 --...原创 2020-03-12 18:24:01 · 11899 阅读 · 7 评论 -
layui 中excel表格导出扩展插件使用;
layui中导出数据表格可以自己定义字段,且命名表的表名;导出结果如图所示:使用扩展插件:https://fly.layui.com/extend/excel/html/js代码编辑使用: <table class="layui-table layuiadmin-page-table" lay-skin="line" id="order" lay-filter="order...原创 2020-03-09 10:18:10 · 5644 阅读 · 0 评论 -
layui 日期选择开始时间,结束时间处理;
需求选择开始时间,结束时间联动后推一个月,选择的区域不能超出12个月;html:<div class="layui-inline mt-8"> <label class="layui-form-label">开始时间</label> <div class="layui-input-inline">...原创 2020-01-11 17:57:54 · 2427 阅读 · 1 评论 -
layui tab选项卡默认/切换定位所在选项
使用layui时,tab切换当弹出页面改变某一选项区中的内容后,让其其他内容同步刷新,且内容选项定位在指定的区域;1、html:<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title" id="layui-status">...原创 2020-01-07 09:43:43 · 9307 阅读 · 2 评论 -
layui 页面内流加载更多内容;
实现效果如下:页面内打开弹框,实现加载更多效果;1. HTML部分设置: <!-- 消息提醒 --><a id="top-message" class="layui-icon layui-icon-notice"><span class="layui-badge mes-num">9</span></a> <!...原创 2020-01-02 11:15:46 · 2118 阅读 · 0 评论 -
layui 上传图片封装使用
一张图片上传时:html: <div class="form-group row text"> <label class="col-sm-3 col-form-label text-right">分类图片</label> <div class="layui-form-item col-sm-9"> <...原创 2019-11-11 17:27:26 · 778 阅读 · 0 评论 -
layui 点击打开弹框的默认关闭按钮执行操作
layui 当打开弹框时,点击弹框的默认关闭按钮执行想要的操作;layer.open({ type: 2 ,title: '入库审核' ,area: ['80%', '100%'] ,offset: 'rb' //右下角弹出 ,shade: 0.5 ,anim: 2 ,isInAnim:true ,isOutAnim:true...原创 2019-11-01 17:56:05 · 1941 阅读 · 1 评论 -
layui 打开弹框顶部默认事件操作
打开弹框默认的‘X’,关闭按钮事件操作;父窗口中操作。打开窗口的最大化最小化设置显示隐藏;maxmin:true/false(显示/隐藏) layer.open({ type: 2 , title: '查看调拨详情' , area: ['80%', '100%'] , offset: 'rb' //右下角弹出 , shade: 0.5 ,...原创 2019-10-11 16:31:06 · 874 阅读 · 0 评论 -
layui 上传图片文件时加载状态封装
html文件实现: <div class="layui-form-item pr-15"> <label class="layui-form-label">图片上传<sup>*</sup></label> <div class="layui-input-block"> <div cla...原创 2019-08-08 16:04:13 · 802 阅读 · 0 评论 -
layui 导出数据函数封装;
一、基础使用方法封装;<script type="text/javascript" src="/layui/lay/excel.js"></script>// 注释 ds 为数组数据;function exopt(ds) { console.log(ds); ds.unshift({ id:'ID', order_sn:...原创 2019-06-20 18:07:12 · 588 阅读 · 0 评论 -
layui 批量删除操作;
结合后台根据业务需求,选择需要删除的内容勾选,然后执行批量删除! $(".delAll_btn").click(function(){ var checkStatus = table.checkStatus('userListTable'), data = checkStatus.data, newsId = []; if(dat...原创 2019-09-10 11:27:00 · 4017 阅读 · 0 评论 -
javascript 获取当前日期时间格式化方法封装
1、取当前时间方法封装: //取当前日期; function getCurrentDate(fulldate = false, separator = ['-', ':']) { let currentTimeObj = new Date(); let year = currentTimeObj.getFullYear();...原创 2019-09-12 09:01:59 · 314 阅读 · 0 评论 -
layui 打开弹出层追加自定义class设置样式
js:判断处理打开弹框操作if(layEvent === 'topay'){ //去付款 getpayAccount();//加载支付账户内容; $("#purchase_total").text(data.total_fee);//应付总额 $("#purchase_paied").text(d...原创 2019-09-12 11:51:23 · 7698 阅读 · 1 评论 -
layui中的switch切换在表格中改变时提示;
在layui中,动态表格添加开关switch切换状态设置;错误时返回提示,并返回默认状态;方法一、 form.on('switch(switchTest)', function(data){ var that = data.elem; var checked = data.elem.checked; var id= $(data.othis)....原创 2019-09-17 19:17:13 · 938 阅读 · 0 评论 -
layui 下拉菜单内容修改,指定内容修改绑定
1. html 部分 <div class="layui-form-item"> <label class="layui-form-label"><sup>*</sup>负责人</label> <div class="layui-input-block"> <select clas...原创 2019-08-30 10:11:54 · 2213 阅读 · 0 评论 -
layui 弹出层内对父级窗口的操作及关闭等;
1. 子窗口关闭:var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);//关闭当前页2. 子窗口关闭,父窗口操作到某个指定页面;var index = parent.layer.getFrameIndex(window.name); parent.layer.close(...原创 2019-07-31 10:58:20 · 5460 阅读 · 1 评论 -
js,layui结合自定义模拟弹框的相互传参;
一、有限制表单输入内容,和无限制表单输入内容方法:HTML+Css//css:<style> .pr-30{padding-right: 30px;} .posrev{position: relative} .posasb-a{display: block;position: absolute;right: 1px;cursor: pointer;top: 1px;lin...原创 2019-09-05 10:56:51 · 449 阅读 · 0 评论 -
常用请求方法及 layui 使用方法封装
//获取URL参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) ...转载 2019-06-13 16:07:24 · 4444 阅读 · 0 评论 -
layui 自定义动态添加select下拉菜单中的内容展示
1. html部分:<div class="layui-input-inline"> <select name="warehouse" lay-verify="required" lay-filter="warehouse" id="warehouse"> <option value="">选择仓库</option&g...原创 2019-09-05 11:04:43 · 5909 阅读 · 0 评论