基于layui的下拉列表的数据回显方法

2024-02-07 15:39:08

静态网页+layui渲染

html代码

 <div class="layui-form-item">
  <label class="layui-form-label">选择框</label>
  <div class="layui-input-block">
   <select id="t" name="quiz2">
    <option value="">请选择市</option>
    <option value="2">杭州2</option>
    <option value="3">杭州3</option>
    <option value="4">杭州4</option>
    <option value="5">杭州5</option>
   </select>
  </div>
 </div>

js代码

<script>
  // 遍历select
  $("#t").each(function() {
    // this代表的是<option></option>，对option再进行遍历
    $(this).children("option").each(function() {
      // 判断需要对那个选项进行回显
      if (this.value == 2) {
        console.log($(this).text());
        // 进行回显
        $(this).attr("selected","selected");
      }
    });
  })
</script>

动态网页+layui渲染（级联下拉列表）

后台将第一个下拉列表的数据传到前台

public String getApiInfoByTypePage(@PathVariable String type, Model model, HttpServletRequest request) {
    List<DopApiType> typeList1 = apiService.findApiTypeByPid(1);
    log.error(typeList1);
    model.addAttribute("typeList1", typeList1);
}

前台页面用的是Thymeleaf的遍历将数据加载出来，然后layui自动渲染

<div class="layui-input-inline">
      <select id="quiz1" name="quiz1" lay-filter="quiz1">
        <option value="1">请选择一级服务目录</option>
        <option th:each="list1:${typeList1}" th:value="${list1.typeId}" th:text="${list1.typeName }"></option>
      </select>
    </div>
    <div class="layui-input-inline" lay-filter="inline1">
      <select id="quiz2" name="quiz2" lay-filter="quiz2">
        <option value="0">请选择二级服务目录</option>
      </select>
    </div>

一级下拉列表的监听事件

 //监听一级服务目录下拉列表的选择时间
    form.on('select(quiz1)', function (data) {

      var pId = data.value;// 一级列表的id
      $.post('/getApiTypeByPid', {'pId': pId, '': 2}, function (msg) {// 请求二级列表的数据
        // console.log(msg);
        $('#quiz2').empty();// 将二级列表的内容清空
        for (var i in msg) {// 遍历数据赋值给二级列表的内容
          var $content = $('<option value="' + msg[i].typeId + '">' + msg[i].typeName + '</option>');
          $('#quiz2').append($content);
        }
        form.render('select');// 注意：数据赋值完成之后必须调用该方法，进行layui的渲染，否则数据出不来
      });
    });

数据回显的核心逻辑（java的根据目录格式，自行编写）

js部分

// 服务目录的数据回显
    var sesType = [[${type}]];
    var sesType1 = [[${type1}]];// 一级目录id
    var sesStatus = [[${status}]];
    // 一级目录回显
    $("#quiz1").each(function () {// 遍历select
      $(this).children("option").each(function () {// 遍历option
        if (this.value == sesType1) {// 跟后台传过来的id相同就显示selected
          // console.log("一级目录"+$(this).text());
          $(this).attr("selected", "selected");
          $.post('/getApiTypeByPid', {'pId': sesType1, '': 2}, function (msg) {// 根据一级目录的id获取二级目录的信息
            // console.log(msg);
            $('#quiz2').empty();// 清空
            for (var i in msg) { // 遍历，进行赋值
              if (msg[i].typeId == sesType) {// 判断要回显的二级目录
                var $content1 = $('<option value="' + msg[i].typeId + '" selected="selected">' + msg[i].typeName + '</option>');
                $('#quiz2').append($content1);
              } else {
                var $content = $('<option value="' + msg[i].typeId + '">' + msg[i].typeName + '</option>');
                $('#quiz2').append($content);
              }

            }
            form.render('select');// 注意：一定要调用该方法进行中心渲染，否则数据是显示不出来的
          });
        }
      });
    });

以上这篇基于layui的下拉列表的数据回显方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决layui富文本编辑器图片上传无法回显的问题

layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu
layui实现下拉复选功能的例子(包括数据的回显与上传)

一.layui下拉复选实现的背景:实现一个管理员拥有多个权限二. 具体实现: //依赖资源 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/src/layui-formSelects-master/dist/formSelects-v4.css" rel="external nofollow" /> &
layui table数据修改的回显方法

实现的样式给你们看一波点击这锅按钮其实回显就是一个赋值的操作,先把form表单的那些input 框的id拿到,在展示成功的那里进行绑值 table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前行 tr 的DOM对象 if (l
解决layui数据表格Date日期格式的回显Object的问题

有属性: private Date createtime; 但是回显的时候,显示{ Object object },想要转换成字符串格式显示. layui中显示: 在对应的实体类中添加属性:private String createtimestr; 然后添加对应的set/get方法,但是方法处理的是createtime 但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table
解决layui 三级联动下拉框更新时回显的问题

最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是选择的时候如果请选择的value 是"" 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 <script type="text/javaS
layui表格数据复选框回显设置方法

layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢? 每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除: table.render({ elem: '#LAY_table_topic', url: '/admin/to
关于layui时间回显问题的解决方法

当我们请求接口时将得到的数据进行回显 layui一直是获取了当前的系统时间进行回显解决办法 layui.config({ base: './Public/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use('index'); layui.use(['laydate','form','table'], function(){ var laydate = layui.laydate; var table
基于layui的下拉列表的数据回显方法

静态网页+layui渲染 html代码 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select id="t" name="quiz2"> <option value=&qu
Java基于Socket实现简单的多线程回显服务器功能示例

本文实例讲述了Java基于Socket实现简单的多线程回显服务器功能.分享给大家供大家参考,具体如下: 需要两个类,一个是EchoServer,代表服务器.另外一个是EchoServerClient,代表客户端.代码如下: package interview; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter
详解SpringMVC如何进行数据回显

基本介绍数据回显:模型数据导向视图(模型数据 ---> Controller ---> 视图) 说明:SpringMVC在调用方法前会创建一个隐含的模型对象,作为模型数据的存储容器(隐含模型) 一.ModelAndView @RequestMapping(method = RequestMethod.POST) public ModelAndView createUser(User user) { userService.createUser(user); ModelAndView mav
详解关于element级联选择器数据回显问题

element级联选择器数据回显问题对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on
Springmvc数据回显实现原理实例解析

数据回显就是当用户数据提交失败时,自动填充好已经输入的数据,一般来说,如果是使用Ajax来做数据提交,基本上是没有数据回显这个需求的,但是如果通过表单做数据提交,那么数据回显就非常必要了. 简单数据类型数据回显简单数据类型,实际上框架在这里没有提供任何形式的支持,就是我们自己手动配置.加入提交的 Student 数据不符合要求,那么重新回到添加 Student 页面,并且预设之前已经填好的数据. 首先我们先来改造一下 student.jsp 页面: <form action="/adds
浅谈Vue使用Cascader级联选择器数据回显中的坑

业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依
Vue动态数据实现 el-select 多级联动、数据回显方式

目录动态数据 el-select 多级联动.数据回显多级联动select菜单(易懂) 动态数据 el-select 多级联动.数据回显父组件 <ProviderCategory v-model="classificationId"></ProviderCategory> import ProviderCategory from './ProviderCategory' <script> import ProviderCategory from
详解el Cascader懒加载数据回显示例

正文数据回显时保证 v-model props options 绑定的数据是正确的. 调用 props.lazyLoad 方法中的 resolve 回掉函数设置数据,示例来自el官网. 好多例子中说需要设置 options, 但是异步获取子节点,设置它是没有用的. <el-cascader :props="props"></el-cascader> <script> let id = 0 export default { data() { retu
Element Plus的el-tree-select组件懒加载+数据回显详解

目录一.背景说明二.使用 1. dom 2.methods 三.回显总结一.背景说明技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

基于layui的下拉列表的数据回显方法

相关推荐

随机推荐