layui控件的一些内容

最新推荐文章于 2024-06-04 17:34:22 发布

uNlanD

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量493

点赞数

分类专栏： JS 插件文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_42610806/article/details/86475968

版权

JS 同时被 2 个专栏收录

20 篇文章

订阅专栏

插件

8 篇文章

订阅专栏

本文主要介绍在使用layui框架时遇到的表单初始化、弹窗表单验证以及表格复选框和下拉框多选设置的问题。重点讨论了如何在弹窗中给表单控件赋予初始值，特别是在处理多选input时的数据转换，以及如何将验证逻辑应用到弹出层的确认按钮。同时，分享了如何根据接收到的数据动态改变表格中复选框的状态，以及利用formSelects-v4.js插件实现下拉框的多选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

补充一点layui文档中没有提到的内容。

首先是表单值的初始化问题，文档中有这方面的内容，但是现在要做到的是在弹窗框中展示表单，要给表单中的控件初始化一个值（就是弹出一个编辑表单），然后点击确定按钮时验证表单中的某项是否为空或者说表单中的某项必填。因为弹出层中的确定按钮是生成的，所以无法像文档中的那样直接验证，需要把验证的事件转移到弹出层生成的按钮中。

首先是表单的初始赋值问题：

form.val("editForm_1", {//第一个参数是form标签的 lay-filter值
            'SiteName': baseData.SiteName,
            'IP': baseData.IP,
            'DataAddress': baseData.DataAddress,
            'IsActivated': baseData.IsActivated,
            'SiteType': baseData.SiteType.toString()

            //这些则为input标签或者select标签的name属性。
        });

这里有一点是，在为多选input设置值的时候，需要把获取到的data转成字符串。

提交验证是否为空时，原本需要在提交按钮中设置属性，这里按钮是弹出层生成的，所以可以这样设置按钮的属性

 success: function (layero, index) {
                layero.addClass("layui-form");
                layero.find('.layui-layer-btn0').attr('lay-filter',             
                  'formVerify').attr('lay-submit', '');
            },

在弹出层的success中设置，如果是多个按钮需要验证，则在...find('.layui-layer-btn1')替换btn后面的数字。

然后和success一样，有一个end:function()....意思在窗口关闭时执行的方法。

二是这是table表格中的复选框随着接收的data选定或者不选定。

首先，在table设置中默认所有的复选框不选定

table.render({
                elem: '#tableOne',
                limit: 12,
                height: height,
                title: '测试表',
                cols: [[
                    { field: 'IsActivated', LAY_CHECKED: false, title: '起用', align: 'center', width: 80, type: 'checkbox' },
                ]],
                //即设定LAY_CHECKED:false;

再在data中逐条设置每条数据的选定与否

if (data.length != 0) {
                            for (let i = 0; i < data.length; i++) {
                                data[i].index = i + 1;
                                data[i].LAY_CHECKED = data[i].IsActivated;
                            };

这样，表格中的复选框就会随着数据的变化而改变选定状态。

三，下拉框的多选设置。找了蛮久的文档，但是好像一直没有开发下拉框的多选控制，但是有额外的插件兼容layui的下拉框，实现多选，formSelects-v4.js插件。

for (var i = 0; i < tableFields.length; i++) {  
          str_1.push({ "name": tableFields[i], "value": tableFields[i], "selected": "" });
            }//这里是组装插件要用到的数组

            formSelects.data('mult_3', 'local', {
    //formSelects要在layui中调用
                arr: str_1
            });


HTML部分：
<select class="layui-input" id="eKeyField" lay-verify="required" lay-search lay-filter="select_3"  name="eKeyField" xm-select="mult_3"></select
//重点是xm-select="mult_3"，这里是要实现多选的标签。

//监听取值
 formSelects.on('mult_1', function (id, vals, val, isAdd, isDisabled) {
        cellString = '';
        if (vals.length > 0) {
            for (var i = 0; i < vals.length; i++) {
                cellString += vals[i].value + ",";
            }
        }
        cellString += val.value + ",";
    });
//cellString就是所选取的值以“,”隔开的字符串