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