layui使用日常记录

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());