zoukankan      html  css  js  c++  java
  • layui表单赋值取值

    表单赋值 / 取值

    语法:form.val('filter', object);

    用于给指定表单集合的元素赋值和取值。如果 object 参数存在,则为赋值;如果 object 参数不存在,则为取值。
    注:其中「取值」功能为 layui 2.5.5 开始新增

    //给表单赋值
    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
      "username": "贤心" // "name": "value"
      ,"sex": "女"
      ,"auth": 3
      ,"check[write]": true
      ,"open": false
      ,"desc": "我爱layui"
    });
     
    //获取表单区域所有值
    var data1 = form.val("formTest");

    第二个参数中的键值是表单元素对应的 namevalue

    layui存在对checkbox赋值的时候,同名多个checkbox进行取值赋值时不正确的问题。

    取值只能取到最后一个;

    赋值也是会赋值到第一个上;

    所以这里需要我们自己进行处理,可以参考资料:https://fly.layui.com/jie/44071/

    文章标题:layui   form.val针对checkbox多选赋值

    ================

    提交表单时,自己在 form.on("submit(form_verify)", function (data) {函数中进行干预,把值拼起来

     debugger
     console.log(data);

     //获取选中的checkbox,将值拼起来
                var arr_box = [];
                $('input[type="checkbox"][name="FitProCode"]:checked').each(function () {
                    arr_box.push($(this).val());
                });
                var FitProCode = arr_box.join(',');
                data.field.FitProCode = FitProCode;

    赋值时,再次进行干预。

    将后台的值进行分割变为数组,获取页面checkbox进行遍历,如果checkbox的值包含在数组中则选中,否则设置为不选中(这一点很重要,防止layui赋值错误导致的干扰)

     网友修改的源码:

    var a = t(r + '[lay-filter="' + e + '"]');
             a.each(function (e, a) {
                var n = t(this);
                layui.each(i, function (e, t) {
                    //https://fly.layui.com/jie/44071/ 修改2019-11-07
    
                    // var i, a = n.find('[name="' + e + '"]');
                    var a = n.find('[name="' + e + '"]');
                    if(a.length > 1){
                        a.each(function (index,item) {
                            if(item.type==='checkbox'){
                                t.find(function(value,index,arr){
                                    if(value==item.value){
                                        item.checked =true;
                                    }
                                });
                            }else if(item.type==="radio"){
                                layui.each(i, function(e, t) {
                                    var i, a = n.find('[name="' + e + '"]');
                                    a[0] && (i = a[0].type, "radio" === i ? a.each(function() {
                                        this.value == t && (this.checked = !0)
                                    }) : a.val(t))
                                })
                            }
                        })
                    }else{
                       a.val(t);
                    }
                })
            }), f.render(null, e)
  • 相关阅读:
    自学华为IoT物联网_10 IoT联接管理平台配置及开发实验1
    自学华为IoT物联网_09 OceanConnect业务流程
    自学华为IoT物联网_08 IoT连接管理平台介绍
    自学华为IoT物联网_07 物联网安全
    自学华为IoT物联网_06 智慧家庭物联网常见问题及解决方案
    自学华为IoT物联网_05 能源工业物联网常见问题及解决方案
    自学华为IoT物联网_04 车联网常见问题及解决方案
    自学华为IoT物联网_03 公共事业物联网常见问题及解决方案
    自学华为IoT物联网_02 常见物联网通信技术
    OpenDCIM-19.01操作手册
  • 原文地址:https://www.cnblogs.com/Tpf386/p/12674905.html
Copyright © 2011-2022 走看看