layui多个select框渲染不全面是怎么回事?

提问 已结
18 199
小夜猫
小夜猫 2018-8-6
悬赏:20飞吻
版本:layui 2.3 浏览器:
有时会出现下拉框渲染不全的情况,数据都是动态的,也用了form.render()

以上为正常情况

以上为渲染不全面情况

用.val()写过下拉框赋值

也用过prop
但是都没有太大成效,请问这是什么原因呢
回帖
  • Yoga
    2018-8-6
    @小夜猫 你是说下拉框里没列表内容?
    两种方法:
       //方法一             
    //加载省数据
    var proHtml = '',that = this;
    $.get("./json/address.json", function (data) {
    for (var i = 0; i < data.length; i++) {
    proHtml += '<option value="' + data[i].areaid + '">' + data[i].name + '</option>';
    }//当然你也可以用jQuery的 $.each 也可以用layui的 layui.each 要引入所需插件
    //初始化省数据
    $("select[name=province]").append(proHtml);
    form.render();


    方法二:
    //方法二:模板引擎

    <script id="demo" type="text/html">


    {{# layui.each(d.list, function(index, item){ }}
    <option value="item.id">tiem.name</option>
    {{# }); }}

    </script>

    //第二步:建立视图。用于呈现渲染结果。
    <select id="view"></select>

    //第三步:渲染模版
    var data = { //数据 注意 这个data就是后台传过来的
    'name':'value'
    }
    var getTpl = demo.innerHTML
    ,view = document.getElementById('view');
    laytpl(getTpl).render(data, function(html){
    view.innerHTML = html;
    });
    当然 还有更好的 方法 用layuiadmin封装的模板引擎 可以直接在html写ajax请求地址 和回调函数 很方便
    <script type="text/html" template lay-url="./json/menu.js?v={{ layui.admin.v }}" //ajax.get  url
    //lay-done 回调方法
    lay-done="layui.element.render('nav', 'ssxadmin-system-side-menu');" id="TPL_layout">

    {{# }}//这里写js

    <div></div>
    </script>

    编辑不易 给个吻安慰一下
    0 回复
  • 小夜猫
    2018-8-6
    出现这种情况的概率大约是10%,三个下拉框只渲染了2个或1一个
    0 回复
  • 梁宝
    2018-8-6
    给slelect定一个没有重复的name值,再获取name值来赋值试试,不要用find
    0 回复
  • Yoga
    2018-8-6
    赋值当然用layui原生的方法啦,用下面这个layui.form插件 或者用模板引擎都可以
    //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
    form.val("formTest", {
    "username": "贤心" // "name": "value"
    ,"sex": "女"
    ,"auth": 3
    ,"check[write]": true
    ,"open": false
    ,"desc": "我爱layui"
    })
    注意点:formTest 为<div class="layui-from" lay-filter="fromTest"><!--......--></div>里的
    name : value中的name 为 <input class="..." name="name">中的name 选择器不选择id选择name
    后面的value 你可以ajax获取 获取成功回调的时候 赋值给name就行了
    最后再更新渲染表单 form.render(‘null','formTest') //null为表单内所有组件,写'select'就是渲染表单内所有下拉框
    如果你感兴趣模板引擎(类似于Vue.js-template)怎么渲染的话,可以回复我~
    0 回复
  • 小夜猫
    2018-8-6
    @梁宝 不行,情况稍微好了一点,,还是会出现渲染不了的情况
    0 回复
  • 小夜猫
    2018-8-6
    @Yoga 主要是没看懂这个赋值怎么用。。。。。
    0 回复
  • 梁宝
    2018-8-6
    @小夜猫
    //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
    form.val("formTest", {
    "username": "贤心" // "name": "value"
    ,"sex": "女"
    ,"auth": 3
    ,"check[write]": true
    ,"open": false
    ,"desc": "我爱layui"
    })
    0 回复
  • 小夜猫
    2018-8-6
    @梁宝
    我这样写的,给这个form加了lay-filter="vipProject",然后三个下拉lay-filter="store1",lay-filter="card1",lay-filter="selPerson1",然后还是会有渲染不全的情况,我这三个下拉框走的3个接口,每走一个接口都执行了一次form.render()
    0 回复
  • 小夜猫
    2018-8-6
    0 回复
  • 小夜猫
    2018-8-6
    @梁宝 只有在刚进入页面时渲染数据不全,之后都是好的,刷新一下也会渲染不全
    0 回复
  • Yoga
    2018-8-6
    @小夜猫 给你写个例子吧
    <form class="layui-form" action="" lay-filter="formTest">
    <div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
    <input type="text" name="username" class="layui-input">
    </div>
    </div>
    </form>

    layui.use(...)...

    var form = layui.form;

    $.GET('url',function(data){
    //data就是你接口获取过来的json
    var xxx = data.username;
    //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
    form.val("formTest", {
    "username": xxx // "name": "value"
    });
    });
    0 回复
  • Yoga
    2018-8-6
    @小夜猫 form.val() 之后 更新渲染 form.render()
    0 回复
  • 小夜猫
    2018-8-6
    @Yoga 额,还是会有概率出现渲染不全面的情况,我在想是不是因为走了三个接口拿了三个下拉框,因为渲染不成功时,连下拉列表都是没有的。
    我这三个接口对应三个下拉列表,渲染不成功时,下拉列表是空的
    0 回复
  • 小夜猫
    2018-8-6
    算了,不用这个form.val()也不赋值了,我在拼进去的时候直接selected算了[黑线]
    0 回复
  • Yoga
    2018-8-6
    研究下 模板引擎最好
    下拉框生成:<option value="{{ d.params.id }}" >{{ d.params.name }}</option>
    下拉框赋值:<option value="0" {{ d.params.role === 'auther' ? 'selected' : '' }}>贤心</option>
    两者可以结合
    0 回复
  • 小夜猫
    2018-8-6
    @Yoga 我到现在都被这玩意给搞蒙了其实,本来是下拉列表都有数据,然后赋值赋值不了,用了各种办法,然后也没解决,试验各种方法的过程中还出现了下拉列表渲染不出来的情况,索性直接在拼的时候赋值了。给你心心
    0 回复
  • Yoga
    2018-8-6
    @小夜猫 嘿嘿 其实既然用了Layui,这种常见问题还是搞清楚比较好的,你要是不嫌麻烦加Layui fans群780592117,你把html 和模拟的json发给我,我做好给你
    0 回复
  • @小夜猫 兄弟解决了么?
    0 回复