标签：function img 记录 layui 日常 res var 上传

1、表格赋值，将代码转为中文 如 1 转为是 0 转为否，主要看红色部分

 {
                    field: 'state', title: '是否启用', width: 100, sort: true, templet: function (res) {
                        if (res.state == "0") {
                            return "<span style='color: red'>禁用</span>"
                        } else if (res.state == "1") {
                            return "<span>启用</span>"
                        }
                    }
                }

 

2、表格赋值，将代码转为复选框 如 1 转为打钩 0 转为没打钩，主要看红色部分

                {
                    field: 'select_power', title: '查询权限', width: 100, templet: function (res) {
                        if (res.select_power == "True") {
                            return "<input type=\"checkbox\" lay-skin=\"primary\"  disabled=\"\" checked=\"\">"
                        } else if (res.select_power == "False") {
                            return "<input type=\"checkbox\" lay-skin=\"primary\"  disabled=\"\">"
                        }
                    }
                }             

 

3、页面重新赋值时，单选按钮、复选框、下拉框 需要重新渲染

//单选框
$("input:radio[name='" + o + "'][value='" + data1[o] + "']").prop("checked", true);

//复选框
if (o == "delete_power") {
if (data1[o] == "True") {
   $('#delete_power').prop('checked', true);
 }
    $('#delete_power').val('4');
 }

//下拉列表
 for (m in obj.data) {
     var data1 = obj.data[m];
     if (userCode == data1["user_code"]) {
          $("#selectUsercode").append("<option value='" + data1["user_code"] + "'selected ='' >" + data1["user_code"] + "</option>");
      } else {
         $("#selectUsercode").append("<option value='" + data1["user_code"] + "'>" + data1["user_code"] + "</option>");
        }
      }



//在赋值完成后需要重新渲染才能生效

form.render("checkbox");

form.render("radio");

form.render("select");

 

4、上传图片，带预览及上传进度，layui要先声明upload 上传的

4.1上传图片

 <div class="layui-upload" style="margin-left: 110px;margin-bottom: 30px;">
            <button type="button" class="layui-btn" id="uploadImg">上传图片</button>
            <div style="display:none;">
                <input type="text" name="img_url" id="ipt_fileName" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img_id">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_filter">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

 

js代码：

layui.use(['form', 'upload'], function () {
var form = layui.form;
var $ = layui.jquery
, upload = layui.upload;





//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#uploadImg'
, url: '/Ajax/d.ashx?type=imgfile&fileurl=brandfile' //改成您自己的上传接口
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#img_id').attr('src', result); //图片链接（base64）
});

element.progress('upload_filter', '0%'); //进度条复位
layer.msg('上传中', { icon: 16, time: 0 });
}
, done: function (res) {
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
//上传成功的一些操作
$('#demoText').html(''); //置空上传失败的状态
$("#ipt_fileName").val(res.msg);
}
, error: function () {
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
//进度条
, progress: function (n, elem, e) {
element.progress('upload_filter', n + '%'); //可配合 layui 进度条元素使用
if (n == 100) {
layer.msg('上传完毕', { icon: 1 });
}
}
});



}

 

 4.2、图片在界面展示，及放大图片

先定义一个缩略图的大小，其实就是一段js设置图片大小

<script type="text/html" id="imgurl">
    <img src="../{{ d.img_url }}" style="width:40px; height:40px;">
</script>

然后添加一列表格字段，专门显示图片

{ field: 'img_url', title: '图片', width: 100, templet: '#imgurl' }

然后在表格字段设置完成后接着定义图片缩放方式

            done: function (res, curr, count) {
                hoverOpenImg();//调用缩放方法，显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }

然后在定义一个缩放方法

 function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 7;          //图片放大倍数
                kd2 = kd * 7 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:40px;display:block!important');
        }

效果如下，就可以放大了

 

 

5、layui富文本编辑器需要用url编码

先定义页面一个 textarea  标签

<textarea id="demo"  name="desc" style="display: none;"></textarea>

 

 然后声明layui的富文本编辑器  'layedit'

layui.use(['form', 'layedit'], function () {
        var form = layui.form;
        var $ = layui.jquery
            , layer = layui.layer;

 var layedit = layui.layedit;
        //layedit.build('demo'); //建立编辑器
        //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
        layedit.set({
            uploadImage: {
                url: '/Ajax/d.ashx?type=EditUploadImgFile&fileurl=brandfile' //接口url
                ,type: 'POST' //默认post
            }
        });      
　　　　//设置编辑器的同时获取ID
        var index = layedit.build('demo', {
            height: 180, //设置编辑器高度
            width: 200

        });


}

 

提交富文本编辑器内容的时候需要对内容进行URL编码，layui 是封装好的，但是在提交的时候可以对改字段进行单独编码

 var desc = layedit.getContent(index); //获取到当前编辑器的内容 index是编辑器的ID
data.field["desc"] = encodeURI(desc);  //对内容编码并重新赋值

然后在后端相应的保存时需要用URL解码

var desc = HttpUtility.UrlDecode(desc.ToString());

 

标签：function,img,记录,layui,日常,res,var,上传
来源： https://www.cnblogs.com/znyCoding/p/15092971.html

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