寒光博客

[layui]表单内使用单选框,使用下拉菜单
单选框 表头部分 , { field: 'TF008', ...
扫描右侧二维码阅读全文
05
2022/01

[layui]表单内使用单选框,使用下拉菜单

单选框

表头部分

            , {
                field: 'TF008', title: '数据类型', align: "center", width: '24%', templet: function (d) {
                    var name = "TF008" + d.TF001;
                    var wd = '<input type="radio" lay-filter="' + name + '" TF001="' + d.TF001 + '" name="' + name + '" value="-1" title="常规" ' + ((d.TF008 == null || d.TF008 == '' || d.TF008 == -1) ? 'checked=""' : '') + '>'
                        + '<input type="radio" lay-filter="' + name + '" TF001="' + d.TF001 + '" name="' + name + '" value="1" title="文本" ' + ((d.TF008 == 1) ? 'checked=""' : '') + '>'
                        + '<input lay-filter="' + name + '" TF001="' + d.TF001 + '" type="radio" name="' + name + '" value="2" title="数值" ' + (d.TF008 == 2 ? 'checked=""' : '') + '>'
                        + '<input lay-filter="' + name + '" TF001="' + d.TF001 + '" type="radio" name="' + name + '" value="3" title="日期" ' + (d.TF008 == 3 ? 'checked=""' : '') + '>';
                    return wd;
                }
            }

done的部分

                done: function (res, curr, count) {
                    //table表内单选按钮数据改变匹配
                    for (var i = 0; i < res.data.length; i++) {
                        layui.form.on('radio(TF008' + res.data[i].TF001 + ')', function (thisRadio) {
                            for (var j = 0; j < res.data.length; j++) {
                                if (res.data[j].TF001 == $(this).attr('tf001')) {
                                    res.data[j].TF008 = thisRadio.value;
                                    if (thisRadio.value == 2 || thisRadio.value == 3) {//格式控制:数值、日期
                                        document.getElementById("TF009" + res.data[j].TF001).style.display = "inline";
                                    } else if (thisRadio.value == 1 || thisRadio.value == -1) {
                                        document.getElementById("TF009" + res.data[j].TF001).style.display = "none";
                                    }
                                    break;
                                }
                            }
                        });
                    }



                    that.dataList = res.data;
                    layui.form.render();
                }

下拉菜单

表头

    , { field: 'TF007', width: '80', title: '数据类型', templet: '#adj' }

监听器

            form.on('select(TypeGxmc)', function (obj) {
                var elem = $(obj.elem);
                var trElem = elem.parents('tr');//获取当前下拉的id
                that.dataList[trElem.data('index')].TF008 = obj.value;
                that.changeFromatEdit(that.dataList[trElem.data('index')].TF001, that.dataList[trElem.data('index')].TF008);
                form.render('select');
            });

done

                done: function (res, curr, count) {

                    //表格内下拉
                    layui.each($("select[name='adj']"), function (index, item) {
                        var elem = $(item);
                        if (!res.data[index].TF008) {
                            res.data[index] = -1;
                        }
                        elem.val(res.data[index].TF008);//给当前赋值
                        that.changeFromatEdit(res.data[index].TF001, res.data[index].TF008);//改变样式

                    });

                    that.dataList = res.data;
                    layui.form.render();
                }

下拉菜单

<script type="text/html" id="adj">
    <select name="adj" class="layui-select"  lay-filter="TypeGxmc">
        <option value="-1">常规</option>
        <option value="1">文本</option>
        <option value="2">数值</option>
        <option value="3">日期</option>
    </select>
</script>

格式控制

        //控制格式修改列是否显示
        changeFromatEdit: function (TF001, TF008) {
            var type = ''
            if (TF008 == 2 || TF008 == 3) {//格式控制:数值、日期
                type = "inline";
            } else if (TF008 == 1 || TF008 == -1) {
                type = "none";
            }
            document.getElementById("TF009" + TF001).style.display = type;
        },
本文作者:Author:     文章标题:[layui]表单内使用单选框,使用下拉菜单
本文地址:https://dxoca.cn/StudyNotes/399.html       百度已收录
版权说明:若无注明,本文皆为“Dxoca's blog (寒光博客)”原创,转载请保留文章出处。
Last modification:January 5th, 2022 at 03:09 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

One comment

  1. 123 Google Chrome 86.0.4240.198 Windows 7 中国 广西 桂林

    礼品网一家专业代发平台,ab单,快递单号提供平台。http://www.lpbo.cn