layUI 初学者常见问题

2022-02-10 18:01:04 阅读：213 来源： 互联网

标签：常见问题 res layUI upload 初学者 layui news type 上传

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

layUI 初学者常见问题