LayUI框架应用常见问题
https://layui.itze.cn/index.html LayUI框架文档主页
获取URL参数
诸如表格中的“编辑”,“详情”工具按钮,需要在弹出层页面中获取在URL中传递的参数。
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
}
关闭弹出层时刷新表格数据
在layer.open()
中添加回调函数:end: function()
。
// 处理表格行中的“编辑”弹出层关闭回调
table.on('tool(demoTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['100%', '100%'],
content: '../page/table/edit.html?id='+data.id, // 传递URL参数
end: function(){
// 关闭弹出层时刷新表格
table.reload('demoTableId');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
设置下拉框默认选项值
//根据值让option选中
$("#mySelect option[value='"+myValue+"']").attr("selected","selected");
下拉框通过接口动态赋值
页面元素:
<select name="mySelect" id="mySelect" lay-verify="required" lay-filter="xxxFilter">
<option value=""></option>
</select>
请求接口数据动态赋值:
$.ajax({
url: '/xxx/data/list',
dataType: 'json',
type: 'get',
success: function (data) {
$.each(data, function (index, item) {
// 下拉菜单里动态添加元素
$('#mySelect').append(new Option(item.xm, item.id));
});
// 重新渲染,这个操作非常重要
// 如果需要设置下拉框的默认选项,必须在这个操作之前执行
// 设置下拉菜单的默认选中项
// $("#mySelect option[value='"+myValue+"']").attr("selected","selected");
layui.form.render("select");
}
});
表格行工具栏根据数据属性动态显示
表格数据行的工具栏按钮可以根据行数据属性进行动态显示控制,如下示例:
<script type="text/html" id="tableBarDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal data-count-edit" lay-event="edit">编辑</a>
{{# if(d.isDel == '0'){ }}
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
{{# } }}
{{# if(d.isDel == '1'){ }}
<a class="layui-btn layui-btn-xs layui-btn-checked data-count-recover" lay-event="recover">恢复</a>
{{# } }}
</script>
参数变量d是固定的。
获取checkbox复选框的值
<form role="form" class="select_people">
<div style="display: inline-block; margin-left: 30px; margin-top: 0">
<label for="name">应用一组</label>
{% for peopel_1 in peopels_1 %}
<div class="checkbox">
<label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label>
</div>
{% endfor %}
</div>
<div style="display: inline-block; margin-left: 40px">
<label for="name">应用二组</label>
{% for peopel_2 in peopels_2 %}
<div class="checkbox">
<label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label>
</div>
{% endfor %}
</div>
<button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal" class="btn btn-default">提交</button>
</form>
// 获取已选中的名字并放到数组中
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
【参考】
https://blog.csdn.net/wuyichang919/article/details/85126191 layui 弹出层关闭回调
https://www.jianshu.com/p/708c915fb905 js获取url参数值的几种方式
https://m.php.cn/layui/465464.html layui修改select的值的方法
https://www.cnblogs.com/yagamilight/p/9902093.html LAYUI下拉框后台动态赋值
https://blog.csdn.net/gzkahjl/article/details/84369993 layerui工具栏根据状态动态显示
https://www.shuzhiduo.com/A/GBJrGEKK50/ layui中对表格操作按钮集的判断
https://blog.csdn.net/weixin_30418341/article/details/98003413 前端获取checkbox复选框的值 通过数组形式传递
https://gitee.com/sun_zoro/layuiTablePlug#https://fly.layui.com/jie/43423/ table组件的功能进行一些加强和拓展
https://www.freesion.com/article/7599630461/ 解决TABLE.RENDER重新加载闪动的问题
https://blog.csdn.net/MacWx/article/details/101373635 layui 树形表格 treeTable使用详细指南,不能折叠解决办法
LayUI框架应用常见问题的更多相关文章
- layui框架部分功能介绍
注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...
- J2EE进阶(十)SSH框架整合常见问题汇总(一)
SSH框架整合常见问题汇总(一) 前言 以下所列问题具有针对性,但是遇到同类型问题时均可按照此思路进行解决. HTTP Status 404 - No result defined for actio ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- layui框架
layui框架 Fly社区/分享一个layui风格的grid.greegrid
- layui框架使用总结
最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写 行内onclick事件是监听不到写在下面这种代码中的 ...
- 在vue中使用 layui框架中的form.render()无效解决办法
下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...
- layui框架中layer父子页面交互的方法分析
本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ ...
- layui框架图片上传至服务器
注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...
- Layui框架+PHP打造个人简易版网盘系统
网盘系统 大家应该都会注册过致命的一些网盘~如百度云.百科介绍:网盘,又称网络U盘.网络硬盘,是由互联网公司推出的在线存储服务,服务器机房为用户划分一定的磁盘空间,为用户免费或收费提供文件的存储. ...
- 安装scrapy框架的常见问题及其解决方法
下面小编讲一下自己在windows10安装及配置Scrapy中遇到的一些坑及其解决的方法,现在总结如下,希望对大家有所帮助. 常见问题一:pip版本需要升级 如果你的pip版本比较老,可能在安装的过程 ...
随机推荐
- [转帖]信创从芯开始,CPU实现国产有多难?
https://www.eet-china.com/mp/a213516.html 数字底座的"底座"--CPU,决定信创底层逻辑的关键.CPU 是信息产业中最基础的核心部件,指令 ...
- Loki动态展示linux本地日志
Loki动态展示linux本地日志 背景 产品需要拆分微服务部署,直接使用K8S部署虽然比较规范但是部署时间较长. 本地文件系统部署简洁快速一些, 但是不太好直接复用一些规范的产品. 本次处理方法就是 ...
- 基于javaPoet的缓存key优化实践
一. 背景 在一次系统opsreview中,发现了一些服务配置了@Cacheable注解.@cacheable 来源于spring cache框架中,作用是使用aop的方式将数据库中的热数据缓存在re ...
- 给你一颗“定心丸”——记一次由线上事故引发的Log4j2日志异步打印优化分析
一.内容提要 自知是人外有人,天外有天,相信对于Log4j2的异步日志打印早有老师或者同学已是熟稔于心,优化配置更是信手拈来,为了防止我在这里啰里八嗦的班门弄斧,我先将谜底在此公布:log4j2.as ...
- 9.3 Windows驱动开发:内核解析PE结构节表
在笔者上一篇文章<内核解析PE结构导出表>介绍了如何解析内存导出表结构,本章将继续延申实现解析PE结构的PE头,PE节表等数据,总体而言内核中解析PE结构与应用层没什么不同,在上一篇文章中 ...
- 驱动开发:运用VAD隐藏R3内存思路
在进程的_EPROCESS中有一个_RTL_AVL_TREE类型的VadRoot成员,它是一个存放进程内存块的二叉树结构,如果我们找到了这个二叉树中我们想要隐藏的内存,直接将这个内存在二叉树中抹去,其 ...
- 从嘉手札<2024-1-17>
昨天我以为 人生是一场体验 是一辆不会回头的列车 我们遇到了风景 感悟了风景 放下了风景 构成了自己 今天我以为 静水流深.光而不耀 可多思必多疑 思维是一种极为复杂的东西 我曾经觉得知行合一是对自我 ...
- 基于.NET+FreeSql实现的仿掘金专栏前后端分离的CMS
前言 今天分享一款基于.NET+FreeSql实现的仿掘金专栏前后端分离.支持Docker部署.集成了OAtuh2授权登录.QQ.Github.Gitee快速登录.简单实用的CMS:lin-cms-d ...
- Redis安装,数据类型及常用命令
安装 - 可以使用yum 安装,要先配置epel源 ``` yum install -y redis ``` - 可以编译安装 ``` wget http://download.redis.io/re ...
- Socket.D v2.3.9 发布(增加 node.js server 实现)
Socket.D 是基于"事件"和"语义消息""流"的网络应用层传输协议.有用户说,"Socket.D 之于 Socket,尤如 ...