精华内容
下载资源
问答
  • layui 获取表单数据

    千次阅读 2020-09-14 16:44:23
    但是,有时候会遇到form.val无法获取表单数据的问题,目前没有找到原因,为了处理这个问题,所以诞生了这边文章。 二、代码 /** * 获取表单数据 * @param {*} filter lay-filter属性值 * @param {*} itemForm dom...

    layui 获取表单数据

    一、说明:

    layui提供form.val来获取表单数据
    语法:form.val(‘filter’, object);

    但是,有时候会遇到form.val无法获取表单数据的问题,目前没有找到原因,为了处理这个问题,所以诞生了这边文章。

    二、代码

    /**
     * 获取表单数据
     * @param {*} filter lay-filter属性值
     * @param {*} itemForm dom对象
     */
    function getFormData(filter, itemForm) {
      itemForm = itemForm || $('.layui-form[lay-filter="' + filter + '"]').eq(0)
    
      var nameIndex = {} //数组 name 索引
        , field = {}
        , fieldElem = itemForm.find('input,select,textarea') //获取所有表单域
    
      layui.each(fieldElem, function (_, item) {
        item.name = (item.name || '').replace(/^\s*|\s*&/, '')
    
        if (!item.name) return
    
        //用于支持数组 name
        if (/^.*\[\]$/.test(item.name)) {
          var key = item.name.match(/^(.*)\[\]$/g)[0]
          nameIndex[key] = nameIndex[key] | 0
          item.name = item.name.replace(/^(.*)\[\]$/, '$1[' + (nameIndex[key]++) + ']')
        }
    
        if (/^checkbox|radio$/.test(item.type) && !item.checked) return
        field[item.name] = item.value
      })
    
      return field
    };
    
    展开全文
  • layui怎么获取表单数据

    万次阅读 2018-12-28 11:08:06
    获取form的数据: jsp: <form class="layui-form"> <button id="btnSubmit" lay-filter="btnSubmit" lay-submit>保存</button> &...

    获取form中的数据:

    jsp:

    <form class="layui-form">
        <button id="btnSubmit" lay-filter="btnSubmit" lay-submit>保存</button>
    </form>

    js:

    form.on('submit(btnSubmit)', function (data) {
        //表单数据formData
        var formData = data.field;
    });

     

     

    获取table中的数据

    执行一个如上图的table实例:

    jsp:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport"
    	content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学生列表</title>
    
    <link rel="stylesheet" href="statics/css/commonCss.css">
    <script src="statics/js/commonJs.js"></script>
    
    </head>
    <body>
    	<div class="layui-container-student">
    		<table id="table" lay-filter="monitor"></table>
    	</div>
    
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    </body>
    </html>

    js:

    
    layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload','element', 'slider' ],
    				function() {
    					var laydate = layui.laydate // 日期
    					, laypage = layui.laypage // 分页
    					, layer = layui.layer // 弹层
    					, table = layui.table // 表格
    					, carousel = layui.carousel // 轮播
    					, upload = layui.upload // 上传
    					, element = layui.element // 元素操作
    					, slider = layui.slider // 滑块
    
    					// 执行一个 table 实例
    					table.render({
    						elem : '#table',
    						height : 550,
    						url : 'studentList' ,
    						title : '学生表' ,
    						page : true , //开启分页
    						method: 'post',
    						cols : [ [ // 表头
    						{
    							type : 'checkbox'
    						}, {
    							field : 'id',
    							title : '学号',
    							align: 'center'
    						}, {
    							field : 'name',
    							title : '姓名',
    							align: 'center'
    						}, {
    							field : 'age',
    							title : '年龄',
    							align: 'center'
    						}, {
    							field : 'nation',
    							title : '民族',
    							align: 'center'
    						},{
    							field : 'sexName',
    							title : '性别',
    							align: 'center'
    								
    						}, {
    							field : 'grade',
    							title : '年级',
    							align: 'center'
    						}, {
    							field : 'studentClass',
    							title : '班级',
    							align: 'center'
    						},  {
    							field : 'year',
    							title : '学年',
    							align: 'center'
    						}, {
    							field : 'readStatus',
    							title : '在读状态',
    							align: 'center'
    						}, {
    							field : 'verifyStatus',
    							title : '审核状态',
    							align: 'center'
    						},{
    							fixed: 'right', 
    							width: 165,
    							title : '操作',
    							align : 'center',
    							toolbar : '#barDemo'
    						} ] ]
    					});
    					
    					// 监听行工具事件
    					table.on('tool(monitor)', function(obj) { 
    						var data = obj.data // 获得当前行数据
    						, layEvent = obj.event; // 获得 lay-event 对应的值
    						if (layEvent === 'detail') {
    							openDetail(data);
    						} else if (layEvent === 'del') {
    							deleteStudent(data);
    						} else if (layEvent === 'edit') {
    							openEdit(data);
    						}else if(layEvent=== 'withdraw'){
    				        	withdraw(data);
    				        }
    					});
    					
    				    //删除按钮
    				    function deleteStudent(data) {
    				        
    				              
    				    }
    
    					// 打开查看按钮
    					function openDetail(data) {
    
    
    					}
    					
    				});

     

     

     

    展开全文
  • 这是提交后控制台打印。 代码区 只要把form标签删了就能获取数据,就是样式会乱。

    在这里插入图片描述
    这是提交后控制台打印的。
    在这里插入图片描述
    代码区
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    只要把form标签删了就能获取到数据,就是样式会乱。

    展开全文
  • 在使用layui中,form表单数据的获取和渲染时绕不开话题。在layuiform数据的渲染有个方法,form.val()但是在使用过程中很容易陷入误区。下面我就来为大家介绍如何解决form.val()不显示问题。 let obj ={ ...

    在使用layui中,form表单数据的获取和渲染时绕不开的话题。在layui中form数据的渲染有个方法,form.val()但是在使用的过程中很容易陷入误区。下面我就来为大家介绍如何解决form.val()不显示的问题。

    let obj ={
    	title:"表单",
    	select:“666”
    }
     layui.use(['form'], () => {
                                let form = layui.form
                                form.val("mapForm", JSON.parse(JSON.stringify(obj)));
                                form.render();
                            })
    

    一、form.val()第一个参数是form的名字。
    二、form.val()第二个参数是json字符串,需要进行数据转化。
    三、form.val()必须引入layui中的form模块后使用。

    展开全文
  • 获取form的数据:jsp:保存js:form.on('submit(btnSubmit)', function (data) {//表单数据formDatavar formData = data.field;});获取table中的数据 执行一个如上图的table实例:jsp:学生列表js:layui.use([ '...
  • 关于layUI获取表格中复选框对应数据的方法 今天在做博客后台项目最后一个功能,就是使用layUI多选功能进行删除勾选数据 如: 去网上百度了各种方法,无一不是特别麻烦。就想了另外一种方案: 复选框用是layUI...
  • 在更新功能中,通过layui直接在前端查到数据,并回填到表单。...filter为class=“layui-form” 所在元素对应lay-filter=””对应值 table.on('tool(testTable)', function (obj) { //tool 是行工具条事件名 va
  • layui获取全部提交的数据

    千次阅读 2018-03-15 16:41:00
    form class="layui-form" action="">...........input textarea ......</form> <button class="layui-btn" lay-submit="" lay-filter="room">保存</button> //监听提交form.on('submit...
  • layui 第一个下拉框动态获取数据,选取第一个下拉框数据后,下一个下拉框根据前面选择的数据 后台动态 联动填充数据 HTML代码如下 <form class="layui-form" action=""> <div class="layui-input-inline ...
  • 获取layui表单复选框已选中的数据HTMLlayui.form.checkbox 获取选中 复选框开关关开关开立即提交JSlayui.use('form', function(){var form = layui.form,$ = layui.$;//各种基于事件的操作。form.on('submit(*)', ...
  • 本文介绍了layui树形关于取值传值问题,分享给大家,具体如下:这个是我们需要效果,...最后解决方案是////layui form 模块var form = "";layui.use(['form'], function () {// $ = layui.jquery;form = ...
  • 前端的Form 表单主要用于解决数据获取数据校验、数据赋值 这三大类问题。我们设计组件目标是为了极大解决业务使用问题,使用便利性和可扩展性则是我们设计组件最大目标!这篇文章里面提供解决方案能够...
  • 获取form表单中提交的数据 第一种 var data = data.field; 优点:简洁,方便。 第二种 //单字段分别绑定 var json = { id: $("#id").val(), //主键id uploadType:$("#uploadType").val(), name:$("#...
  • 代码段只是粘贴了一个初级script框架,通过监听select控件,获取不同省份值,然后就取得相关json数据,渲染数据。 如果使用layui框架,如果form渲染失败,可以试下form.render();主动渲染,有时间再具体更新下前端...
  • 本文主要介绍了详解layui树形关于取值传值问题,小编觉得挺不错,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,...最后解决方案是////layui form 模块var form = "";layui.use(['form'], f...
  • 前言在用Layui写后台管理页面时候,有时候查询下拉框是需要动态从数据库获取,当用户修改了数据库数据的时候,可以动态生成最新下拉框选项。页面垃圾名称:全部js写法layui.use(['form', 'table', ...
  • 效果就是获取范围时间,2021-3-12 到 2021-4-15 html代码 我是把他放在弹出框里面 <!--弹出层2 --> <form class="layui-form" action="" style="margin: 5%; display: none" id="box2" target="test123...
  • 声明:代码只展示关键部分代码,仅供参考学习 ...div id="editFrm" class="layui-form" style="padding: 10px;" lay-filter="example"> <div class="layui-form-item"> <label class="layui-...
  • 功能描述:页面加载时动态获取一级类别数据,根据一级类别选中的数据项动态获取二级类别的数据,并回显。 html模板 <div class="layui-inline"> <label class="layui-form-label" style="width: auto"&...
  • 现在我前端已经获取到这个字段的数据了,. 应该如何在img里显示? <p style="text-align:center"><img alt="" height="704" src="https://img-ask.csdnimg.cn/upload/1607478601646.png" width="1127" /></p> 这是...
  • 2、form.on() 调用需置于 layui.use 回调函数中。3、末尾 'return false' 不可或缺,以确保不会触发页面刷新。注意必须是 'return false',而不能简单写成 'return'。抓取表单数据可按四步来实现:1、禁用按钮...
  • 前端试卷网站首页试卷中心${vm.name}${title.name}${question.itemOrder}${question.title}提交layui.use(['form','table'], function () {var form = layui.form,layer = layui.layer,table = layui.table,$ = ...
  • 前几天用LayUI表单进行AJAX提交时候发现,function(data)里data始终无法获取表单里填值,当时我认为是出BUG了就用了$(‘#updateform’).serialize()来获取表单数据 //form表单 更新员工信息 form.on('...
  • form class="layui-form" style="padding-top: 2%" lay-filter="goods-image-add"> <div class="layuimini-main"> <input type="hidden" id="files" name="files" value=""> <div class=...
  • layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09来源:亿速云阅读:164作者:Leah本篇文章给大家分享的是有关layui如何获取...获取layui表单复选框已选中的数据HTMLlayui.form.checkbox 获取选...
  • 2、提交表单,获取不到form表单中的数据。 有人说,是因为给了一个id,并没有给name属性,用惯了jquery。我懒得去找这个问题,因为,以前提交数据使用jQuery的form提交的话用的是实例化的方法serialzeab
  • Layui搜索数据的重载

    2020-12-25 21:42:12
    Layui 表格重载数据 可以用ajax 但… (写依然很抠脚.) 遇到问题: 返回值都是null 后台无法获取参数 解决 1.page和limit参数 ​ 在Layui的重载表格中,会自动向请求地址发出page和limit参数,所以不必在写...

空空如也

空空如也

1 2 3 4 5 6
收藏数 120
精华内容 48
关键字:

layui获取form的数据