layui下拉框渲染问题,以及回显问题
最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下。
首先遇到的一个问题就是下拉框没有样式,然后加样式需要在数据项或者表格外面套上form标签,然后在layer弹层success的回调函数里面加form.render()进行渲染,弹层外面需要使用form组件(如下)进行包围。然后这个success的回调是先写layero再写index,其它的例如yes回调相反。
layui.use('form',function(){
var form = layui.form;
}
然后第二个问题是下拉框数据回显选中,这个问题搞了有3天,想了好多方法,首先是想的拿监听到的对象直接在content里面页面代码里c:if进行判断,相等就选中,但是没有效果,我一直以为可能是el表达式${}不允许通过拼接这种方式比较,但是好像不是这个原因,好像是使用layui这个组件的原因。
这种方式不可行的话,就想到第二种方式,通过监听到的对象拿到属性去后台查出数据返回前台,在前台都通过拿域对象里面的数据就可以比较了,但是做这个的时候遇到了问题,前端使用ajax发的请求,发请求没有问题,但是后端填充到request域中的数据前台页面拿不到,原因是ajax是局部刷新,前台通过${}就取不到值,如果能取到在f12sources中是可以看到的,在network请求中预览可以看到但是他返回给前台就没有数据了,然后想到了可不可以用别的方式发请求呢,于是用了window.location.href="",通过这个也是可以请求后台的,给它拼接上参数就行,但是这种是network看不到请求的,然后后端直接跳回了页面不是弹出修改窗口那个页面,这就难受了,虽然前台可以取到数据了但是对应的不是修改页面,这就难受了,反正也有问题。
所以就找了最后一种方法,因为是使用的layui,那就看下layui有没有提供什么下拉框选中这种方案,查了挺多说的都用不上,没啥意义,然后其中一个是有用的,实现方案是在success回调里面加如下语句,layui中对下拉框做了封装,lay-value对应得是下拉框值,从监听对象拿到属性赋值给lay-value这个属性代表选中的数据,然后通过下拉框的id调siblings点击事件就ok了。
var select = 'dd[lay-value='+data.reverse1+']';
$('#uriskLevel').siblings("div.layui-form-select").find('dl').find(select).click();
然后回显单选框选中的话比较简单,直接在layer弹层success回调里加上$(':radio[name="uaccident"][value='+data.reverse2+']').prop("checked",true);就ok了,不过需要在后面加上form.render()刷新一下,要不单选框没有效果。
layui下拉框渲染问题,以及回显问题的更多相关文章
- bootstrap selectpicker控件select下拉框动态数据无法回显的问题
有关于selectpicker下拉框数据回显的问题,当查看一个对象的属性的时候, 发现有关于selectpicker的下拉框并没有将返回的数据进行回显,显示的都是请选择, 经查证,当查看属性的时候,他 ...
- 下拉框多选实现回显及sql
<td class="tabTd"><label>客户来源:</label></td> <td><select c ...
- layui下拉框数据过万渲染渲染问题解决方案
方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下 ...
- layui下拉框不显示的问题
1.先检查有没有引入layui.js 2.然后看有没有被<form class="layui-form"></form>包住, 3.查看是否有以下代码 &l ...
- 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题
关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...
- layui下拉框后台动态赋值
前台页面: <select name="xm" id="xm" lay-verify="required" lay-filter=&q ...
- Layui下拉框改变时触发事件
layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...
- layUI 下拉框遮挡
原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...
- Layui下拉选渲染
下拉选渲染有很多方式,这个比较简单,记录一下: HTML代码如下: <div class="layui-input-inline"> <input type=&q ...
随机推荐
- 华夏基金X袋鼠云:基金业数字化转型,为什么说用户才是解题答案?
"精准营销是以客户为中心,运用各种可利用的方式,在恰当的时间,以恰当的价格,通过恰当的渠道,向恰当的顾客提供恰当的产品." 这是学者许瑾在科特勒精准营销理论的基础上,从实践的角度对 ...
- 分布式锁用Redis与Zookeeper的使用
为什么用分布式锁? 在讨论这个问题之前,我们先来看一个业务场景: 系统A是一个电商系统,目前是一台机器部署,系统中有一个用户下订单的接口,但是用户下订单之前一定要去检查一下库存,确保库存足够了才会 ...
- Java基础—String构造方法
Java基础--String构造方法 public String(): 创建一个空表字符串对象,不包含任何内容 public String(char[]chs): 根据字符数组的内容,来创建字符串对象 ...
- JavaWeb——Tomcat使用
官方下载地址:https://tomcat.apache.org/download-90.cgi 选择安装包: 64-bit Windows zip (pgp, sha512) 注:tar.gz后缀的 ...
- pygame.update()与pygame.flip()的区别
flip函数将重新绘制整个屏幕对应的窗口. update函数仅仅重新绘制窗口中有变化的区域. 如果仅仅是几个物体在移动,那么他只重绘其中移动的部分,没有变化的部分,并不进行重绘.update比flip ...
- burp token爆破(DVWA high暴力破解)
一.选择Pitchfork模式.选择要爆破的参数 二.options设置 找到optiops(设置)把线程设为1 配置Grep=Extract,点添加 点击Refetch response 获取返回 ...
- MySQL — 数据查询语言
目录 1.基础查询 2.条件查询 3.分组查询 4.排序查询 5.分页查询 6.多表查询 6.1.连接查询 6.1.1.内连接 6.1.2.外连接 6.1.3.自连接 6.1.4.联合查询 6.2.子 ...
- 浅析MySQL恶意服务器读取文件原理
前言 注:本文不涉及对MySQL协议报文研究,仅讲解原理,并且做部分演示. 搭建MySQL恶意服务器读取文件这件事,虽然直接利用门槛较高,但是由于在网上看到了一种比较新颖的利用方式(利用社会工程学引诱 ...
- idea使用技巧、心得1
0.安装idea之后的准备 (1) 永久快乐使用:在我的博客搜索安装idea关键词既可 (2) 取消更新: (3) idea 官网的关于idea的使用手册:https://www.jetbrains. ...
- 什么是Spring的依赖注入?
依赖注入,是IOC的一个方面,是个通常的概念,它有多种解释.这概念是说你不用创建对象,而只需要描述它如何被创建.你不在代码里直接组装你的组件和服务,但是要在配置文件里描述哪些组件需要哪些服务,之后一个 ...