精华内容
下载资源
问答
  • div class="layui-form-item" > <label class="layui-form-label">路线</label> <div class="layui-input-block" id="last"> <div class="layui-input-inline"> {empty name="$ways...

    样板图:

    在这里插入图片描述

    html部分

    <div class="layui-form-item" >
        <label class="layui-form-label">路线</label>
        <div class="layui-input-block" id="last">
            <div class="layui-input-inline">
                {empty name="$ways"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
                {else /}
                <!-- 循环列出数据 -->
                {volist name="ways" id="vo"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" lay-verify="required" value="{$vo.name}"
                            class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button type="button"
                            class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i
                                class="layui-icon">&#xe67e;</i></button>
                    </div>
                </div>
                {/volist}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
                {/empty}
            </div>
    
        </div>
    </div>
    

    js部分

    layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () {
        var form = layui.form
            , element = layui.element
            , laydate = layui.laydate
            , $ = layui.$;
    
        //动态添加input输入框
        $("#add").click(function () {
            var str = '<div class="layui-form-item">' +
                '<div class="layui-input-inline">' +
                '<input type="text" name="ways[]" lay-verify="required"' +
                'class="form-control" style="width: 200%;">' +
                '</div>' +
                '<div class="layui-input-block" style="margin-left: 480px">' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>' +
                '</div>';
    
            $("#last").append(str);
            x++;
        });
    
        //删除动态添加的input输入框
        $("body").on('click', ".removeclass", function () {
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
    })
    
    展开全文
  • Layui select 下拉框动态渲染这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要增加,然后回来剥离一个 demo 结果又可以,白...

    Layui select 下拉框动态渲染

    这几天在做一个功能时需要用到 select 动态渲染。但是我在渲染的时候始终不对,第一次始终不能渲染,而且随着 select 个数增多渲染次数也要增加,然后回来剥离一个 demo 结果又可以,白白浪费好久时间,最终发现还是有几处不对。

    直接上代码把:

    html 代码:

    点我

    选择框

    选择框

    JS 代码

    var form = layui.form;

    var $ = layui.jquery;

    $(‘#btn1’).click(function() {

    layer.open({

    type: 1,

    shade: false,

    title: “提示”, //不显示标题

    content: $(‘#formItem’),

    area: [‘50%’, ‘500px’],

    success: function(layero, index) {

    let _html = ”

    for (let i = 0; i < 5; i++) {

    _html += ‘’ + i + ‘’;

    }

    console.log($(layero).find(‘#select11’))

    $(layero).find(‘#select11’).append(_html);

    $(layero).find(‘#select22’).append(_html);

    console.log(layero, index);

    form.render(‘select’);

    },

    cancel: function() {

    layer.msg(‘捕获就是从页面已经存在的元素上,包裹 layer 的结构’, {

    time: 5000,

    icon: 6

    });

    }

    });

    });

    注意事项:

    1. 添加的时候时,for 循环之添加 html 元素,不做渲染,

    2. 查找元素方法: $(layero).find(‘#select11’)是这样的,针对的是 layer 弹窗中

    3. 最后记得渲染,form.render(‘select’);

    4. 如果不显示记得添加这句话:var form = layui.form;

    好了,不想吐槽 wordpress 这个编辑器了,太不好编辑了。那位好心人有啥好的编辑器推荐个噻。

    IT宅个人博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

    转载请注明原文链接:Layui表单Select动态渲染(原创)

    展开全文
  • 删除请选择{{#var typeArr = layui.dict.options("service_materialType");layui.each(typeArr, function(index, item){}}{{item[1]}}{{# }) }}请选择{{#var certTypeArr = layui.dict.options("company...

    html:

    资料清单

    添加

    编辑--%>

    删除

    请选择

    {{#

    var typeArr = layui.dict.options("service_materialType");

    layui.each(typeArr, function(index, item){

    }}

    {{item[1]}}

    {{# }) }}

    请选择

    {{#

    var certTypeArr = layui.dict.options("company_paper_certType");

    layui.each(certTypeArr, function(index, item){

    }}

    {{item[1]}}

    {{# }) }}

    方法:var active = {

    getSubData:function () {

    var materialList = active.getMaterialList();

    var flowList = active.getFlowList();

    var minDay = 0;

    var maxDay = 0;

    $.each(flowList,function (index,item) {

    minDay += item.minDay?parseFloat(item.minDay):0;

    maxDay += item.maxDay?parseFloat(item.maxDay):0;

    });

    return {

    materialList:materialList,

    flowList:flowList,

    minDay:minDay,

    maxDay:maxDay

    }

    },

    getMaterialList:function () {

    var tableObj = materialTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    $.each(dataTemp,function (index,item) {

    item = $.extend(item,{createTime:null,modifyTime:null});

    })

    return dataTemp;

    },

    getFlowList:function () {

    var tableObj = serviceFlowTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    $.each(dataTemp,function (index,item) {

    item = $.extend(item,{createTime:null,modifyTime:null});

    });

    return dataTemp;

    },

    addFlow:function () {

    var tableObj = serviceFlowTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    var len = dataTemp?(dataTemp.length+1):1;

    dataTemp.push({sortOrder:len,minDay:1,maxDay:1});

    serviceFlowTable = table.reload(config.id, $.extend(true, {

    // 更新数据

    data: dataTemp,

    }, config.page ? {

    // 一般新增都是加到最后,所以始终打开最后一页

    page: {

    curr: Math.ceil(dataTemp.length / config.page.limit)

    }

    } : {}));

    },

    editFlow:function (obj) {

    },

    delFlow:function (data) {

    var tableObj = serviceFlowTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    // 得到tr的data-index

    var trElem = data.tr.first();

    var index = trElem.data('index');

    // 计算出在data中的index

    var dataIndex = index;

    // 删除对应下标的数据

    dataTemp.splice(dataIndex, 1);

    // 重新接收reload返回的对象,这个很重要

    serviceFlowTable = table.reload(config.id, $.extend(true, {

    // 更新数据

    data: dataTemp

    }, {}));

    },

    addMaterial:function () {

    var tableObj = materialTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    var len = dataTemp?(dataTemp.length+1):1;

    dataTemp.push({sortOrder:len});

    materialTable = table.reload(config.id, $.extend(true, {

    // 更新数据

    data: dataTemp,

    }, config.page ? {

    // 一般新增都是加到最后,所以始终打开最后一页

    page: {

    curr: Math.ceil(dataTemp.length / config.page.limit)

    }

    } : {}));

    },

    editMaterial:function (obj) {

    },

    delMaterial:function (data) {

    var tableObj = materialTable;

    var config = tableObj.config;

    var dataTemp = config.data||[];

    // 得到tr的data-index

    var trElem = data.tr.first();

    var index = trElem.data('index');

    // 计算出在data中的index

    var dataIndex = index;

    // 删除对应下标的数据

    dataTemp.splice(dataIndex, 1);

    // 重新接收reload返回的对象,这个很重要

    materialTable = table.reload(config.id, $.extend(true, {

    // 更新数据

    data: dataTemp

    }, {}));

    },

    setDataList:function () {

    window.parent.formData = $.extend(window.parent.formData,{serviceMaterialList:serviceMaterialList})

    window.parent.formData = $.extend(window.parent.formData,{serviceFlowList:serviceFlowList})

    },

    }

    js:var serviceMaterialList = [];

    if(id){

    var rtnList2 = admin.syncReq(ctx+"/base/serviceMaterial/queryByAll",{serviceId:id});

    serviceMaterialList = rtnList2.data;

    }

    var materialTable = table.render({

    elem:'#serviceMaterialListTable'

    ,data:serviceMaterialList

    ,cellMinWidth: 80

    ,toolbar: '#serviceMaterialListTable-toolbar'

    ,defaultToolbar: []

    ,cols: [[

    {field:'licenceName', title: '证照名称', align: 'center',minWidth:100,edit:'text' }

    ,{field:'type', title: '资料类型', align: 'center',minWidth:100,templet:'#serviceMaterialTypeTpl'}

    ,{field:'certType', title: '证件类型', align: 'center',minWidth:100,templet:'#certTypeTpl'}

    ,{field:'sortOrder', title: '排序', align: 'center',minWidth:100,edit:'text'}

    ,{title:'操作', toolbar: '#serviceMaterialListTable-bar', width:120}

    ]]

    ,done: function(res, curr, count){

    serviceMaterialList = res.data;

    }

    ,height: '250'

    });

    table.on('tool(serviceMaterialListTable)', function(obj){

    switch(obj.event){

    case 'delMaterial':

    active.delMaterial(obj);

    break;

    }

    });

    form.on('select(service_material_type)', function(obj){

    var tr_index = $(obj.othis).parent().parent().parent().data("index");

    $.each(serviceMaterialList,function (index,item) {

    if(tr_index==index){

    item = $.extend(item,{type:obj.value})

    }

    })

    });

    form.on('select(cert_type)', function(obj){

    var tr_index = $(obj.othis).parent().parent().parent().data("index");

    $.each(serviceMaterialList,function (index,item) {

    if(tr_index==index){

    item = $.extend(item,{certType:obj.value})

    }

    })

    });

    $("body").on('click','.layui-btn-container .layui-btn', function(){

    var type = $(this).data('type');

    active[type] ? active[type].call(this) : '';

    });

    window.parent._active = active;

    父页面获取表单的所有数据:var subData = window._active.getSubData();

    var materialList = subData.materialList;

    var flowList = subData.flowList;

    var minDay = subData.minDay;

    var maxDay = subData.maxDay;

    field = $.extend(field,{

    serviceMaterialJson:JSON.stringify(materialList),

    serviceFlowJson:JSON.stringify(flowList),

    minDay:minDay,

    maxDay:maxDay,

    })

    field.id = rec.id;

    var rtn = admin.syncReq(ctx+"/base/service/modify",field);

    if(rtn && rtn.code==0){

    layer.msg('操作成功');

    active.reload();

    layer.close(index);

    }else{

    layer.msg('操作失败');

    }

    展开全文
  • 下面我就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm(){layui.use('form', ...

    下面我就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。

    html

    产品类别

    轻松融

    容易融

    快乐融

    增加产品类别

    js

    //重新渲染表单

    function renderForm(){

    layui.use('form', function(){

    var form = layui.form();//高版本建议把括号去掉,有的低版本,需要加()

    form.render();

    });

    }

    //增加产品类别按钮点击事件

    function addProductClassify(){

    layer.open({

    type:1,

    btn:['确定','取消'],

    content:$("#select_prod"),

    area:['270px','160px'],

    //当前层索引参数(index)、当前层的DOM对象(layero)

    yes:function(index,layero){

    //获取input输入的值

    var ivalue=$(layero).find("input").val();

    //获取要添加的option的索引

    var sIndex=$("#zcySelect")[0].options.length-1;

    if(ivalue==null||ivalue==''){

    layer.msg("请输入产品类别")

    }

    else{

    layer.msg("输入的产品类别是:"+ivalue);

    //为select添加option

    $("#zcySelect").append(""+ivalue+"");

    renderForm();//表单重新渲染,要不然添加完显示不出来新的option

    layer.close(index);

    }

    $(layero).find("input").val('');

    }

    })

    }

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    展开全文
  • js相关:layui select动态添加option的实例发布于 2020-6-24|复制链接下面小妖就为大家分享一篇layui select动态添加option的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧html```xhtml...
  • 用到知识点表单监听 form.on局部表单渲染 form.render动态加载的select表单 必须有默认的option项(第一个option) 要不然layui 不会渲染出 select 组件代码如下:添加数据  返回列表//查找所有的助理 5 是助理$...
  • layui表单下拉选择框动态添加option

    千次阅读 2019-04-26 10:32:08
    <form class="layui-form" > <div class="layui-form-item"> <label class="layui-form-label">会议地点</label> <div class="...
  • 这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下。html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm...
  • 解决layui追加或者动态修改的表单元素“没效果”的问题layui版本:2.2.6(考虑到一万年以后会有人遇到类似问题 先做个版本记录)官方原文:有些时候,你的有些表单元素可能是动态插入的。这时 Form模块 的自动化渲染是...
  •  class="layui-btn layui-btn-primary">关闭       <script src="/static/js/form_create.js"></script>  var model_name = "fd_estate";  //排除项  var exclude_table_col = [ "create_time", ...
  • 今天我们先来学习一下layui实现动态数据表,静态数据表,以及表格的分页,其中还涉及到动态刷新数据表,数据表工具栏使用,表单提交等功能,这个静态分页同样适用在信息类网站,我的工作开发环境是debian桌面版,所以...
  • layui form表单 动态添加、删除input框,以及数据回显 ** 在form表单中,动态增加input框,最多添加5个,删除校验 ** html代码 <form class="layui-form" th:action="@{/basicInfo/update/project}" method="post...
  • 重新渲染form表单. $(".add_access").click(function(){ var html = '<div class="Access_box">123</div>' $(".Access_box").after(html); // 重新渲染form表单 form.render(); }); ...
  • 这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下。html产品类别轻松融容易融快乐融增加产品类别js//重新渲染表单function renderForm...
  • 使用layui动态修改select中的option选项,一开始遇到select总是第二次变化才生效,几经周折,终于修改了一份较为适用的写法: html页面: <!--父级包裹器,定义id 等会儿用它来追加元素--> <div class...
  • 因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到 正常的radio渲染结果,应该是包括一个i标签和一个span标签 而我们的渲染结果,只有一个input标签 所以导致这...
  • 表单中有一个接收明细的子列表,html: <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">接收明细</div>...
  • Java实现Layui的form表单动态绑定下拉框 【1】视图层 <link href="${ctx}/Content/layui/css/layui.css" rel="stylesheet" /> <form class="layui-form" id="fruserInfor" lay-filter="layform">.....
  • layui 动态设置checbox 选中状态 <div class="layui-input-inline " > <input type="checkbox" name="hasdz" id="hasdz" lay-filter="hasdz" lay-skin="primary" title="兼任店长" > <input name=...
  • 一定要包裹在form表单中如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能 <form class="layui-form" action="" style="display: flex"> <div class="layui-form-...
  • div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">资料清单</div> <div class="layui-card-body" ...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 211
精华内容 84
关键字:

layui表单动态