layUI 初学者常见问题

1.  textarea  标签  回显需要  th:text="${news.summary}"，普通input标签是  th:value="${news.newsTitle}"

<div class="col-sm-11">
      <textarea id="summary" name="summary" class="form-control"
              type="text" th:text="${news.summary}"></textarea>
</div>



2. 下拉选择框回显

<label class="col-sm-1 control-label">是否推荐：</label>
<div class="col-sm-11">
   <select data-placeholder="请选择" name="isRecommend" id="isRecommend" class="form-control chosen-select" tabindex="2"
         style="width: 70px" >
      <option value="1" th:selected="(1 == ${news.isRecommend})">是</option>
      <option value="0" th:selected="(0 == ${news.isRecommend})">否</option>
   </select>
</div>

3.上传图片  js代码

//执行实例
    var uploadInst = upload.render({
        elem: '#mainPicBtn' //绑定元素
        ,url: '/common/sysFile/upload' //上传接口
        ,done: function(res){
            //上传完毕回调
            layer.msg("上传成功!");
            console.log(res.fileName);
            $("#mainPic").val(res.fileName);
            $("#picUrl").attr("src",res.fileName).attr("height","200");
        }
        ,error: function(){
            //请求异常回调
            layer.msg("上传失败!");
        }
    });

html代码

<div class="form-group">
                        <label class="col-sm-1 control-label">资讯主图：</label>
                        
                        <img id= "picUrl" src="">
                        
                        <button type="button" class="layui-btn" id="mainPicBtn">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                            <input id="mainPic" name="mainPic" type="hidden">
                            
                        </div>

 

4.下拉筛选，查询数据库下拉
js代码

layui.config({
        base: ctx +'layui/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','element', 'admin','upload'], function(){
        var admin = layui.admin;
        var upload = layui.upload;
        // var $ = layui.jquery;
        admin.selectRender({
            elem: '#newsType',
            // url: '/common/sysDict/list/?type=news_type',
            url: '/common/sysDict/listDict/?type=news_type',
            idKey: 'value',
            nameKey: 'name',
            value: $("#newsTypeVal").val(),
            placeholder: '选择资讯类别',
            transdata: function(res) {
                return res
            }
        })

html代码

<div class="form-group">
                            <label class="col-sm-1 control-label">资讯类别：</label>
                            <div class="col-sm-11">
                                <select data-placeholder="请选择" name="newsType" id="newsType" class="form-control chosen-select" tabindex="2"
                                        style="width: 200px" >
                                    <option value="">请选择</option>
                                </select>
                            </div>
                        </div>

 

标签：常见问题,res,layUI,upload,初学者,layui,news,type,上传
来源： https://www.cnblogs.com/onlyzhangmeng/p/15880228.html