layui select from模块的渲染问题

提问 未结
14 219
碎语
碎语 2018-10-7
悬赏:20飞吻
版本:layui 2.0 浏览器:ie9
<div class="layui-inline">
<label class="layui-form-label " style="color:#F00">工厂名称</label>
<div class="layui-input-block layui-form" lay-filter="text1" >
<select class='prodfac_inf ' name="prodfac" id="prodfac" lay-filter="prodfac" lay-verify="required" lay-search >
</select>
</div>
</div>这个select 渲染不上
<div class="layui-inline ">
<label class="layui-form-label" style="color:#F00">一级分类</label>
<div class="layui-input-block " lay-filter="text1" >
<select class='prodtype_inf' name="prodtype" id="prodtype" lay-filter="prodtype" lay-verify="required" lay-search>
<option value=""></option>
<option value="Elec-SDA">Elec-SDA</option>
<option value="Ceramic">Ceramic</option>
<option value="Houseware">Houseware</option>
<option value="Heatingncooling">Heatingncooling</option>
<option value="Audio">Audio</option>
<option value="Laudry">Laudry</option>
<option value="Luggage">Luggage</option>
<option value="Textiles">Textiles</option>
<option value="Memory Foam">Memory Foam</option>
<option value="Others">Others</option>
</select>
</div>
</div> 这种的select就可以渲染数据


$("#prodfac").val(data.prodfac);
$("#prodtype").val(data.prodtype);
//$("#prodtypey").val(data.prodtypey);
form.render('select');渲染不上第一个,第二个可以渲染

求大佬帮忙,已经折腾了好几天了





回帖
  • star1029
    2018-10-7
    你第一个的内容是后面动态添加进去的么
    0 回复
  • 碎语
    2018-10-7
    @star1029 是的,内容是在数据库查出来的数据
    0 回复
  • star1029
    2018-10-7
    @碎语 那你要理清他们的先后顺序,得到后台数据后把添加到 select 里,再赋值
    0 回复
  • 如果是动态构造的select, 选项的DOM应该先添加,然后jq赋值,最后再 form.render('select')
    0 回复
  • 碎语
    2018-10-7
    @star1029 我是先加载了数据,再赋值然后渲染,还是不行
    0 回复
  • 碎语
    2018-10-7
    @muxinss 我是先加载数据了,然后在赋值再渲染,还是不行
    0 回复
  • lay-filter的值相当于元素的Id,不要重复!
    如果页面中有多个form的话,渲染的时候使用form.render('select','lay-filter的值')。
    0 回复
  • 碎语
    2018-10-7
    @菜鸟程序猿 还是不行,我可以发个jsp,你帮我看看嘛?
    0 回复
  • @碎语 你把jsp代码贴出吧!
    0 回复
  • 问题关键:请你获取到数据后 并且生成html后 进行form.render('select');渲染 ,如果还不行 请试下form.render();或者F12发报错 加你的js代码
    0 回复
  • 碎语
    2018-10-8
    @CHC云 没有报错
    0 回复
  • 碎语
    2018-10-8
    @菜鸟程序猿 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>修改</title>
    <jsp:include page="../../inc.jsp"></jsp:include>
    </head>
    <body>
    <form name="form" class=" layui-form layui-form-pane" style="margin-top: 20px;" method="post" action="">
    <input type="hidden" name="id"/>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00">ProductID</label>
    <div class="layui-input-block">
    <input type="text" name="prodid" maxlength="20" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00">ProductCode</label>
    <div class="layui-input-block">
    <input type="text" name="prodcode" maxlength="20" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label " style="color:#F00">工厂名称</label>
    <div class="layui-input-block layui-form" lay-filter="text2" >
    <select class='prodfac_inf ' name="prodfac" id="prodfac" lay-filter="prodfac" lay-verify="required" lay-search >
    </select>
    </div>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00" >产品品牌</label>
    <div class="layui-input-block">
    <input type="text" name="prodbrand" maxlength="20" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline ">
    <label class="layui-form-label" style="color:#F00">一级分类</label>
    <div class="layui-input-block " lay-filter="text1" >
    <select class='prodtype_inf' name="prodtype" id="prodtype" lay-filter="prodtype" lay-verify="required" lay-search>
    <option value=""></option>
    <option value="Elec-SDA">Elec-SDA</option>
    <option value="Ceramic">Ceramic</option>
    <option value="Houseware">Houseware</option>
    <option value="Heatingncooling">Heatingncooling</option>
    <option value="Audio">Audio</option>
    <option value="Laudry">Laudry</option>
    <option value="Luggage">Luggage</option>
    <option value="Textiles">Textiles</option>
    <option value="Memory Foam">Memory Foam</option>
    <option value="Others">Others</option>
    </select>
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00">二级分类</label>
    <div class="layui-input-block " lay-filter="text">
    <select class='prodtype_infy' name="prodtypey" id="prodtypey" lay-filter="prodtypey" lay-verify="required" lay-search>
    </select>
    </div>
    </div>
    </div>


    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00">产品名称</label>
    <div class="layui-input-block">
    <input type="text" name="prodname" maxlength="200" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" style="color:#F00">产品型号</label>
    <div class="layui-input-block">
    <input type="text" name="prodmodel" maxlength="200" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >产品功率</label>
    <div class="layui-input-block">
    <input type="text" name="prodpower" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>


    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" >容量</label>
    <div class="layui-input-block">
    <input type="text" name="prodcapacity" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >功能</label>
    <div class="layui-input-block">
    <input type="text" name="prodfunction" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >材质</label>
    <div class="layui-input-block">
    <input type="text" name="prodmaterial" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" >产品其他</label>
    <div class="layui-input-block">
    <input type="text" name="prodother" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >价格</label>
    <div class="layui-input-block">
    <input type="text" name="prodprice" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >配件量杯</label>
    <div class="layui-input-block">
    <input type="text" name="prodcup" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" >配件刀头数</label>
    <div class="layui-input-block">
    <input type="text" name="prodtool" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >配件纸杯数</label>
    <div class="layui-input-block">
    <input type="text" name="proddixie" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >配件其他</label>
    <div class="layui-input-block">
    <input type="text" name="prodacc" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>

    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" >产品认证</label>
    <div class="layui-input-block">
    <input type="text" name="prodac" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >装柜数量</label>
    <div class="layui-input-block">
    <input type="text" name="number" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label" >MOQ</label>
    <div class="layui-input-block">
    <input type="text" name="moq" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label" >库存量</label>
    <div class="layui-input-block">
    <input type="text" name="prodinventory" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label" >备注</label>
    <div class="layui-input-block">
    <input type="text" name="remarks" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label" >详情</label>
    <div class="layui-input-block">
    <input type="text" name="proddetails" maxlength="200" placeholder="请输入" autocomplete="off" class="layui-input" />
    </div>
    </div>


    <!-- 新附件名称和原附件名称 -->
    <input type="hidden" name="newpermit" id="newpermit" readOnly="readOnly" class="layui-input" />
    <input type="hidden" name="permit" id="permit" readOnly="readOnly" class="layui-input" />

    <div class="layui-upload">
    <button type="button" class=" layui-btn layui-btn-normal" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
    <button type="button" class="layui-btn layui-btn-normal" id="choiceListAction">开始上传</button>
    <div class="layui-form-item layui-btn-Center">
    </div>
    <div class="layui-upload-list layui-upList-minHeight">
    <table class="layui-table">
    <thead>
    <tr><th>文件名</th>
    <th>大小</th>
    <th>状态</th>
    <th>操作</th>
    </tr></thead>
    <tbody id="demoList">
    </tbody>
    </table>
    </div>
    </div>

    <!-- 按钮组 -->
    <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit="" lay-filter="btnSubmit">立即提交</button>
    <button class="layui-btn layui-btn-primary" id="close">关闭</button>
    </div>
    </div>
    </form>
    <script>
    layui.use(['form', 'layedit', 'laydate','jquery','upload'], function(){
    var form = layui.form;
    var $ = layui.jquery;
    var laydate= layui.laydate;
    var upload = layui.upload;



    //获取传参
    var data =JSON.parse(decodeURIComponent(getRequestParam().obj));


    // pbInitComCombox($,form,'facInf/getList.do','prodfac','id','fNameE');//下拉框数据

    $.ajax({
    url : '<%=request.getContextPath()%>/facInf/getList.do',
    type:'POST',//默认以get提交,以get提交如果是中文后台会出现乱码
    dataType : 'json',
    async: true,
    success : function(data) {
    //layer.msg(JSON.stringify(data));
    $("#prodfac").html("");
    $("#prodfac").append('<option selected="" value="">请选择</option>');
    for(var i=0;i<data.length;i++){
    $("#prodfac").append('<option selected="" value='+data[i].id+'>'+data[i].fNameE+'</option>');
    }
    form.render('select');//重新渲染
    }
    });




    //时间控件
    laydate.render({
    elem: '#createTime'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:dd'
    });
    //时间控件
    laydate.render({
    elem: '#updateTime'
    ,type: 'datetime'
    ,format: 'yyyy-MM-dd HH:mm:dd'
    });


    //监听数据库表下拉框 联动查询
    form.on('select(prodtype)', function (data) {
    var tableName=data.value;
    //字段集合
    var url='typeInf/getList.do?prodtype='+tableName;
    $.ajax({
    url : '<%=request.getContextPath()%>/'+url,
    type:'POST',//默认以get提交,以get提交如果是中文后台会出现乱码
    dataType : 'json',
    async: true,
    success : function(data) {
    // layer.msg(JSON.stringify(data));

    //表主键
    $("#prodtypey").html("");
    $("#prodtypey").append('<option selected="" value="">请选择</option>');
    for(var i=0;i<data.length;i++){
    $("#prodtypey").append('<option selected="" value='+data[i].typeId+'>'+data[i].eName+'</option>');
    }
    form.render('select');//重新渲染
    }

    });

    });


    // layer.alert(data.prodfac)
    $("#prodfac").val(data.prodfac);
    form.render('select','text2');
    //$("#prodtype").val(data.prodtype);
    //$("#prodtypey").val(data.prodtypey);


    //监听提交
    form.on('submit(btnSubmit)', function(data){
    // layer.msg(JSON.stringify(data.field));
    var index = layer.load(1);//开启进度条
    $.ajax({
    url : '<%=request.getContextPath()%>/product/modify.do',
    data : data.field,
    type : 'POST',//默认以get提交,以get提交如果是中文后台会出现乱码
    dataType : 'json',
    success : function(obj) {
    layer.close(index);//关闭
    if (obj.success) {
    pubUtil.msg(obj.msg, layer, 1, function() {
    $("#close").click();
    }, 500);
    } else {
    pubUtil.msg(obj.msg, layer, 2, function() {

    }, 5 * 1000);
    }
    }
    });
    return false;
    });

    });
    </script>
    <script>
    $(function(){
    var uploadFile={
    init:function () {
    this.upload();
    },
    //上传文件
    upload:function(){
    layui.use('upload', function(){
    var $ = layui.jquery,
    upload = layui.upload;
    var demoListView = $('#demoList');
    var ids=layui.jquery('input[name= id]').val();
    $.ajax({
    url :' <%=request.getContextPath()%>/enclosure/getList.do',
    type:'POST',//默认以get提交,以get提交如果是中文后台会出现乱码
    dataType : 'json',
    data:{id:ids},
    async: false,
    success : function(data) {
    for(var i=0;i<data.length;i++){
    // layer.msg(JSON.stringify(data));
    // var files = this.files = data.pushFile(); //将每次选择的文件追加到文件队列
    if($('#demoList tr td').eq(0).text()=='xxx.txt'){
    $('#demoList').empty();
    }
    var index="1538744960840-"+0;
    var tr = $(['<tr id="upload-'+ index +'">',
    '<td>'+ data[i].name +'</td>',
    '<td>'+ (data[i].size/1014).toFixed(1) +'kb</td>',
    '<td>上传成功</td>',
    '<td>',

    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
    '</td>',
    '</tr>'].join(''));
    $("#demoList").append(tr);
    }

    }

    });
    //多文件列表示例
    var demoListView = $('#demoList'),
    uploadListIns = upload.render({
    elem: '#choiceList',
    url: '<%=request.getContextPath()%>/enclosure/getList.do',
    data:{
    id:ids
    },
    accept: 'file',
    exts: 'jpg|png|jpeg|pneg|gif|mp4|avi|asf|divx|mpg|rmvb|rm|mpeg|mpe|wmv|mkv|vob',
    multiple: true,
    auto: false,
    bindAction: '#choiceListAction',
    choose: function(obj){
    // layer.alert(JSON.stringify(obj));
    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
    //读取本地文件
    obj.preview(function(index, file, result){
    if($('#demoList tr td').eq(0).text()=='xxx.txt'){
    $('#demoList').empty();
    }
    var tr = $(['<tr id="upload-'+ index +'">',
    '<td>'+ file.name +'</td>',
    '<td>'+ (file.size/1014).toFixed(1) +'kb</td>',
    '<td>等待上传</td>',
    '<td>',

    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
    '</td>',
    '</tr>'].join(''));

    //单个重传
    tr.find('.demo-reload').on('click', function(){
    obj.upload(index, file);
    });

    //删除
    tr.find('.demo-delete').on('click', function(){
    delete files[index]; //删除对应的文件
    //获取一个唯一值,主键
    $.ajax({
    url :' <%=request.getContextPath()%>/enclosure/removename.do',
    type:'POST',//默认以get提交,以get提交如果是中文后台会出现乱码
    dataType : 'json',
    data:{relevanceId:ids,name:file.name},
    async: false,
    success : function(data) {
    //layer.alert(data.msg)
    }
    });
    tr.remove();
    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
    });
    demoListView.append(tr);
    });
    },
    done: function(res, index, upload){
    var message=res.obj;
    var py=layui.jquery('input[name= newpermit]').val();
    message=message+","+py;
    // $("#id").val(res.obj);//回写新的附件名称到一个文本框
    if(res.code == 0){ //上传成功

    var tr = demoListView.find('tr#upload-'+ index)
    ,tds = tr.children();
    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
    tds.eq(3).html(''); //清空操作
    return delete this.files[index]; //删除文件队列已经上传成功的文件


    }
    this.error(index, upload,res.msg);
    },
    error: function(index, upload,msg){
    var tr = demoListView.find('tr#upload-'+ index)
    ,tds = tr.children();
    tds.eq(2).html('<span style="color: #FF5722;">'+msg+'</span>');
    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
    });
    });
    }

    }
    uploadFile.init();
    }) 

    </script>

    </body>
    </html>

    0 回复
  • @碎语 把渲染不上的select中的<div class="layui-input-block layui-form" lay-filter="text2" > layui-form的class去掉,你再试试,看js代码的话没啥问题的
    0 回复
  • 碎语
    2018-10-9
    @菜鸟程序猿 谢谢,已经解决了。
    0 回复