精华内容
下载资源
问答
  • layui select 数据更新 及异步加载数据

    千次阅读 2019-11-15 09:40:36
    select 数据初始化 $(".unitNew").off().on("click", function () { setEmpty(); $(".selectName").html("<option value=''>直接选择或搜索选择<option>") var json = eval('...

    select 数据初始化

     $(".unitNew").off().on("click",  function () {
                setEmpty();//清空select
                $(".selectName").html("<option value=''>直接选择或搜索选择<option>")
                var json = eval('(' + allOrgInfo + ')');
                for (var k = 0; k < json.length; k++) {
     
                    $('.selectName').append('<option value=' + json[k].OrganizationID + '>' + json[k].OrganizationName + '</option>');
                }
              form.render('select');

    整体个form  数据第一次加载动态数据加载

    获取数据 然后把数据添加要初始化的dom中如select 

       
    //str  是获取的数据
     function setSeleteVal(str) {
            var json = eval('(' + str + ')');
            for (var k = 0; k < json.length; k++) {
     
                $('.selectName').append('<option value=' + json[k].OrganizationID + '>' + json[k].OrganizationName + '</option>');
                renderForm();
            }
        }
    
    
        function renderForm() {
            layui.use('form', function () {
             var form = layui.form
                form.render();//必须加载内容
    
              //新建  必须是初始化
            $(".unitNew").off().on("click",  function () {
                setEmpty();
                $(".selectName").html("<option value=''>直接选择或搜索选择<option>")
                var json = eval('(' + allOrgInfo + ')');
                for (var k = 0; k < json.length; k++) {
     
                    $('.selectName').append('<option value=' + json[k].OrganizationID + '>' + json[k].OrganizationName + '</option>');
                }
                //$(".selectName").val(json[k].OrganizationID)  初始化选中的值
              form.render('select');
             
        })
    
    
            });
           
        }

     

    展开全文
  • 今天小编就为大家分享一篇layui form.render('select', 'test2') 更新渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇关于layui的下拉搜索框异步加载数据的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题描述:使用 document.getElementById("sex").options[i].selected =true;语句给下拉框赋初值,赋值之后,下拉框里是显示已经选中的状态了,可页面显示却对应不上,...
  • 确实拼接到了select下,但是并没有被layui将vue的数据渲染出来。要是使用静态数据layui是可以渲染出来的。 原因 引用官方文档 有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化...

    问题

     
    页面显示没有数据
     
     
    查看HTML
     
    确实拼接到了select下,但是并没有被layui将vue的数据渲染出来。要是使用静态数据,layui是可以渲染出来的。
     
     
     

    原因

     
    引用官方文档
    有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架, 偷笑.gif ) 但没有关系,你只需要执行  form.render(type, filter);  方法即可。
     
     
     
     

    解决

     
    刷新所有类
    updated:function(){
        layui.use(['form'], function(){
            form.render();
        })
    }
    

    参考 https://www.jianshu.com/p/242ddcdf6ab8

     
     
    刷新指定类型
    updated: function () {
        layui.form.render('select', 'industryCenter');
    },

    页面 select的上层div添加 lay-filter="industryCenter",这样才能被render指定刷新

    <div class="layui-form-item">
        <label class="layui-form-label">行业中心:</label>
        <div class="layui-input-inline" lay-filter="industryCenter">
            <select id="industryCenter" name="industryCenter">
                <option v-for="industry in industryList" v-bind:value="industry.id" :title="industry.id">{{industry.name}}</option>
            </select>
        </div>
    </div>

    缺少layui.use(['form'], function(){}) 扩住,在第一次的时候会报下面的错误。

    所以还是要用下面的方式

    updated:function() {
        // 在vue更新数据后,layui
        layui.use(['form'], function(){
            form.render('select','industryCenter');
        })
    },

    参考 https://blog.csdn.net/qq_26814945/article/details/82019346

     
     
     
    刷新指定类型 的 操作方式
     
     
     
    展开全文
  • layui表格数据添加功能,添加后表格的数据的自动刷新,前后端交互 (1)界面 (2)实现添加功能 (3)主界面代码实现 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;...

    layui表格数据添加功能,添加后表格的数据的自动刷新,前后端交互

    (1)界面
    在这里插入图片描述

    (2)实现添加功能
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    (3)主界面代码实现

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Data-Table 表格</title>
        <link rel="stylesheet" href="../frame/layui/css/layui.css" media="all">
        <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
        <link rel="stylesheet" href="../frame/static/css/style.css">
        <link rel="icon" href="../frame/static/image/code.png">
    </head>
    
    <body class="body">
    
    <!-- 工具集 -->
    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-add-all">批量添加</a>
            <a class="layui-btn btn-add btn-default" id="btn-get">采集设备总数</a>
            <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
            <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
        </span>
        <span class="fr">
    
            <div class="demoTable">
                <span class="layui-form-label">搜索条件:</span>
                <!--// 搜索ID:-->
            <div class="layui-inline">
             <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索条件">
            </div>
            <button class="layui-btn" data-type="reload">查询</button>
            </div>
        </span>
    </div>
    
    
    <!--&lt;!&ndash; 表格 &ndash;&gt;-->
    <script type="text/javascript" src="../frame/layui/layui.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <!-- 表格操作按钮集 -->
    <script type="text/html" id="barOption">
        <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['table', 'form', 'layer', 'vip_table'], function () {
    
    // 操作对象
            var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTable = layui.vip_table
                ,$=layui.jquery
            // 表格渲染
            var tableIns = table.render({
                elem: '#test'                  //指定原始表格元素选择器(推荐id选择器)
                , height: vipTable.getFullHeight()    //容器高度
                , toolbar: '#toolbarDemo'
                , title: '采集设备表'
                , cols: [[                  //标题栏
                    {checkbox: true, sort: true, fixed: true, space: true}
                    , {field: 'eqptType', title: 'eqptType', width: 150}
                    , {field: 'eqptTypeName', title: 'eqptTypeName', width: 180}
                    , {field: 'eqptIdCode', title: 'eqptIdCode', width: 180}
                    , {field: 'eqptName', title: 'eqptName', width: 180}
                    , {field: 'createTime', title: 'createTime', width: 200}
                    , {field: 'creator', title: 'creator', width: 200}
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barOption'}
                ]]
                , id: 'dataCheck'
                , url: '/*********'
                , method: 'get'
                , page: false
                , limits: [30, 60, 90, 150, 300]
                , loading: false
                , done: function (res) {
                    //如果是异步请求数据方式,res即为你接口返回的信息。
                    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);
                }
            });
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID:' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/*********",
                            type: "POST",
                            data: {eqptType: data.eqptType, eqptIdCode: data.eqptIdCode},
                              success: function (msg) {
                               var json=JSON.parse(msg);
                                var returnCode=json.returnCode;
                                if (returnCode== 200) {
                                    //删除这一行,前端界面的修改,直接删除了这一条数据
                                    obj.del();
                                    //关闭弹框
                                    layer.close(index);
                                    //显示提示框
                                    layer.msg("删除成功", {icon: 6});
                                } else {
                                    layer.msg("删除失败", {icon: 5});
                                }
                            }
                        });
                        return false;
                    });
                } else if (obj.event === 'edit') {
          
                }
            });
    
            //添加采集设备
            $('#btn-add').on('click', function () {
                layer.open({
                    type: 2,
                    title: '采集设备添加',
                    maxmin: true,
                    area: ['420px', '330px'],
                    shadeClose: false, //点击遮罩关闭
                    content: 'CollectorAdd-form.html',
                });
            });
            //搜索功能的实现
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
    
                    //执行重载
                    table.reload('idTest', {
                        where: {
                            key: {
                                field: demoReload.val()
                            }
                        }
                    });
                }
            };
    
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
    
            // 刷新
            $('#btn-refresh').on('click', function () {
                tableIns.reload()
            });
        });
    </script>
    </body>
    </html>
    

    (4)表单页面的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>表单</title>
        <link rel="stylesheet" href="../frame/layui/css/layui.css">
        <link rel="stylesheet" href="../frame/static/css/style.css">
        <link rel="icon" href="../frame/static/image/code.png">
        <style>
            .layui-form-label{
                width: 100px;
            }
            .layui-input-block {
                margin-left: 130px;
                min-height: 36px
            }
        </style>
    </head>
    <body class="body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加采集设备</legend>
    </fieldset>
    
    <form class="layui-form layui-from-pane" action="/addCollector" style="margin-top:20px" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">采集设备类型</label>
            <div class="layui-input-block">
                <select name="eqptType" lay-filter="aihao">
                    <option value="0a0003biac">0a0003biac</option>
                    <option value="0a0003ahup" selected="">0a0003ahup</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">eqptIdCode</label>
            <div class="layui-input-block">
                <input type="text" name="eqptIdCode"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">eqptName</label>
            <div class="layui-input-block">
                <input type="text" name="eqptName"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item" style="margin-top:40px">
            <div class="layui-input-block">
                <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script src="../frame/layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form','layer','jquery'], function(){
            var form = layui.form
                    ,layer = layui.layer
                     ,$=layui.jquery,
                      table= layui.table
            //监听提交
            form.on('submit(demo1)', function(data){
                //layer.alert(JSON.stringify(data.field))
                  //data=JSON.stringify(data.field)
                $.ajax({
                    url:'/addCollector',
                    type:'POST',
                    dataType:'json',
                   data:{eqptType:data.field.eqptType,eqptIdCode:data.field.eqptIdCode,eqptName:data.field.eqptName},
                     success:function (msg) {
                        var returnCode=msg.returnCode;
                        if(returnCode==200){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("添加成功", {icon: 6});
                            setTimeout(function(){
                                window.parent.location.reload();//修改成功后刷新父界面
                            }, 1000);
                               //加载层-风格
    
                        }else{
                            layer.msg("已经存在该设备,不支持重复添加", {icon: 5});
                        }
                    }
                })
                return false;
            });
        });
    </script>
    </body>
    </html>
    
    展开全文
  • layui 动态加载 select

    2021-01-18 18:13:47
    layui ajax select 动态添加数据方法,给我指明了前进的方向。 首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。 做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功...

    感谢小张帅三代以及他的好文
    layui ajax select 动态添加数据方法,给我指明了前进的方向。
    首先,这是一个学习的过程,并不是最优方案。只是“玩索而有得”而己。
    做了一个联动的搜索框,本来一开始想用layuiselect第三方插件,但后来没有成功,或者是说没有实现自己想要的目的。就利用layui现成的一套东东做了一下。按钮及功能如下:
    1.年:点击“年”,“商品类别”随刷新并指向第一个“全部数据”,数据表随刷新;
    2.商品类别:点击“商品类别”,“年”不动,数据表随刷新;
    3.搜索文字框:点“搜索文字框”,自动根据“年”和“商品类别”匹配数据库相关内容,也是ajax系列;
    4.搜索:点“搜索”,根据前面3个框的内容做综合查询,并刷新列表;
    5.重置:点“重置”,回到页面初始状态,并且不刷新页面,但刷新列表。

    下面贴出三段代码
    这是html

    <div class="layui-form layui-inline layui-col-md6 "  lay-filter="form_whereyear">
    	<select name="whereyear" id="whereyear" lay-filter="whereyear" >
    	</select>
    </div>
    

    这是JS:

     loadSelect_whereyear:function (doctype,whereyear){
            var form=layui.form;
            var option = "<option value=''>所有年份</option>";//初始化option的选项
            $.ajax({
                url: "/index/docnumberajax/select_whereyear",
                type: 'POST',
                data:'doctype='+doctype
            })
                .done(function(datas) {
                    for(var i=0;i<datas.length;i++){
                        var year=datas[i]['name'];
                        //name是从后台提取的字段;
                        if (year!= whereyear){
                            option+="<option value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                            $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                        }
                        else{
                            option+="<option selected='selected' value='"+datas[i]['name']+"'>"+datas[i]['name']+"</option>";//拼接option中的内容
                            $("#whereyear").html(option);//将option的拼接内容加入select中,注意选择器是select的ID
                        }
    
                    }
                    form.render('select','form_whereyear');//重点:重新渲染select
                })
                .fail(function() {
                    console.log("error");
                });
    
    
        },
    

    这是后台:

        public function select_whereyear(){
            $account = session('adminAccount');
            $usereditor = $account['username'];
            $doctype=input('doctype');
            $where[] = [
                ['a.doctype', '=', $doctype],//这个是文件类型转换1为一种文件,2为另一种文件
                ['a.status','=',1],
            ];
            $docyearData = Db::name('docnumber')->
            alias('a')->
            field(' a.doc_year as name')->
            whereOr('editor|applicant', '=', $usereditor)->
            where($where)->
            order('a.doc_year', 'ASC')->
            group('a.doc_year')->
            select();
    		return json($docyearData);
        }
    
    展开全文
  • 一定要包裹在form表单中如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能 <form class="layui-form" action="" style="display: flex"> <div class="layui-form-...
  • layuiselect选项动态加载重新渲染方法 代码如下: function renderSelect(data){ var html = '<option value="">分诊类目</option>' for (var i = 0; i < data.length; i++) { html += '<...
  • 使用layui前端框架时,在使用ajax为select动态添加option时,会出现option内容不显示的问题 解决方案: —&amp;gt; 执行 form.render(type,filter) 方法 具体代码: $(function(){ // 异步加载菜品种类...
  • 流程: 1.下拉框选择后,提交表单 在提交中将选择的值设置到sessionStorage 2.使用form.val和form.render() <div class="layui-inline"> <...select name="grade" lay-search id="form_vi.
  • layui中选择下拉框动态刷新表格

    千次阅读 2019-08-16 11:10:26
    //初始化全局变量 var majorIds; var classIds; //下拉重置 //major_Filter 为lay-filter form.on('select(major_Filter)', function(data){ majorIds = data.value; ...
  • layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function renderForm(){ layui.use('form', function(){ var form = ...
  • 原因是因为在你重新赋值之前的时候layui的样式就把select的样式给渲染好了,所以我们要给它赋值之后重新渲染,代码为: layui.use(['layer','form'],function () { layui.form.render('select'); }); 重点是...
  • 参考自:解决Layui动态生成select下拉选择框不显示问题 我想在layui框架下添加一个下拉框,但是按照layui官方文档说明添加后,下拉框却不显示,代码如下: <form class="layui-form" method="POST" action=""&...
  • <... <head></head> <...div class="layui-form-item">...label class="layui-form-label">...div class="layui-input-inline">...select name="type" lay-filter="type"> <op.
  • layuiselect的点击事件

    千次阅读 2018-04-20 13:55:53
    html部分 &lt;div class="layui-form"&gt; &lt;div class="layui-input-inline text-left inputfort"&gt; &lt;select name="qu...
  • 这里指的是通过layui官方示例中的方式写的select,如下: <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <...
  • 这个问题比较恶心人 原因1 : layui 不是双向绑定的 页面加载完成后需要执行form.render(‘select’)... 这个是可以只刷新你动态更新的那部分select 官方推荐的 form.render(‘select’); 这个是会出现我提到的问题 ...
  • td .layui-form-select{ margin-top: -10px; margin-left: -15px; margin-right: -15px; } ;"> <blockquote class="layui-elem-quote"> <span class="layui-breadcrumb" style="visibility: visible;"> ...
  • 问题:select更改选项后,使用form.render();并没能够刷新所选择的元素。 在进入页面后,会访问服务端加载一些数据。 然后根据数据去更改下拉框的选项, $("#payType").find('option').attr("...
  • //读取数据加载loading.. loading = layer.load(2, { shade: [0.2, '#000'] }); admin.req({ url: '/area/list' , data: { parent_id: data ? data.area_id : "1" } , done: ...
  • layui 动态添加的表单元素--select

    万次阅读 2018-09-04 16:47:30
    layui使用的时候select下拉框没有样式 这个地方绝对是待提升的地方 1.首先说一下为什么会出现这种情况 官方解释 有些时候,你的有些表单元素可能是动态插入的。这时形式模块的自动化渲染是会对其失效的。虽然...
  •  本人在使用layui使用了select按钮,点击是js脚本会异步请求后台接口获取json数据,然后layui将json数据渲染到select上,然而获取接口数据没有问题,就是无法更新。 本人使用代码如下: &lt;div class="...
  • layui ajax动态加载渲染select下拉框

    千次阅读 2019-12-27 18:58:08
    <div class="layui-inline"> <div class="layui-input-inline"> <select name="label" id="catalog"> <option value="">专业分类</option> ...
  • 在gitee上找到了模板,关键词:layui-select-ext 代码如下: 1.需要用一行div盒,自定义标签id(页面样式留了select作为对比) 部门 2.引入拓展js包(模板文件已上传,非原创,免费下载) 3.在js中添加: //模拟数据...
  • Layui(table回填数据)

    千次阅读 2019-07-17 21:19:22
    点击select选项,获取到select的ID,ajax请求数据,然后回填到table() (存在问题,就是当开启编辑行时,先编辑单元格内容发生改变,在通过下拉列表回填数据,这个时候刚才编辑的数据会显示出来,但是table内的...
  • form.on('select(uprovinceId)', function(data){ initCityList('change'); }); 这里面有个问题就是 选择的时候 如果 请选择 的value 是“” 空字符串,当选择从河北省变到请选择时不会触发这个监听事件 ...
  • 之前遇到过这样一个问题,就是使用layui下拉框的时候,因为下拉框的数据是动态加载的,当在页面刷新数据时,layui下拉框的样式在,但是需要加载的数据却不显示,刚开始的时候以为以为是数据不绑定的问题,去掉layui...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,094
精华内容 437
关键字:

layuiselect刷新数据