layui使用日常记录
目录：
1、layui页面基本结构和数据展示
2、表格赋值，将代码转为复选框 如 1 转为打钩 0 转为没打钩
3、页面重新赋值时，单选按钮、复选框、下拉框
4、上传图片，带预览及上传进度
5、图片在界面展示，及放大图片
6、layui富文本编辑器需要用url编码
7、表格赋值，将代码转为中文 （如 1 转为是 0 转为否）
==============================================================================
1、layui页面基本结构和数据展示
主要由两部分构成，一个前端（HTML+JS）一个是后端（接口数据json格式）。
1.1 、HTML结构
主要是 <form class="layui-form" action=""> ....内容.... </form> 与 <table id="brandinfo" class="layui-hide" lay-filter="filter_brand" ></table>
form 将需要提交到后端的数据放在form标签里面，table主要用于展示数据（表格）的内容页面。
<form class="layui-form" action=""> <div class="brand_Top_findmian_div"> <div class="brand_Top_find_row"> <div class="layui-form-item"> <label class="layui-form-label">@ImplantSys.Language.Language.品牌名称</label> <div class="layui-input-block"> <input type="text" name="brand_name" id="brand_name_id" required lay-verify="required" placeholder="@ImplantSys.Language.Language.请输入品牌" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="brand_Top_find_row find_btn_branddiv"> <div class="layui-inline"> <div class="layui-input-inline"> <button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" data-type="reload" style="margin-left: 15px"> <i class="layui-icon layui-icon-search"></i> @ImplantSys.Language.Language.查询 </button> <button type="reset" class="layui-btn layui-btn-primary">@ImplantSys.Language.Language.重置</button> </div> </div> </div> </div> </form> <div class="clear"></div> <table id="brandinfo" class="layui-hide" lay-filter="filter_brand"></table>
1.2 JS数据结构
<script>
//声明Layui，开始使用
var $;
layui.use(['form', 'table'], function () {
var table = layui.table;
var form = layui.form;
$ = layui.$;
var strbrandName = $('#brand_name_id').val();
// debugger;
//第一个实例
var findtab = table.render({
elem: '#brandinfo'
, id: 'brandReload'
//,method:'post'
, where: {
brand_name: ''
}
, url: '/Ajax/AjaxBrand.ashx?type=GetBrandList' //数据接口
, page: true //开启分页
, limit: 20 //每页默认显示的数量
, toolbar: '#toolbarBrand' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
, cols: [[ //表头
{ field: 'id', title: 'ID', width: 80, sort: true }
, { field: 'img_url', title: '@ImplantSys.Language.Language.品牌图片', width: 100, templet: '#imgurl' }
, { field: 'brand_name', title: '@ImplantSys.Language.Language.品牌名称', width: 120, sort: true }
, { field: 'brand_code', title: '@ImplantSys.Language.Language.品牌代码', width: 120, sort: true }
, { field: 'describe', title: '@ImplantSys.Language.Language.品牌描述', width: 260, sort: true }
, {
field: 'state', title: '@ImplantSys.Language.Language.是否启用', width: 110, sort: true, templet: function (res) {
if (res.state == "0") {
return "<span style='color: red'>@ImplantSys.Language.Language.否</span>"
} else if (res.state == "1") {
return "<span>@ImplantSys.Language.Language.是</span>"
}
}
}
, { field: 'remarks', title: '@ImplantSys.Language.Language.备注', width: 200 }
, { field: 'create_time', title: '@ImplantSys.Language.Language.创建时间', width: 150 }
, { field: 'create_user_code', title: '@ImplantSys.Language.Language.创建用户', width: 120 }
, { field: '', title: '@ImplantSys.Language.Language.操作', width: 300, toolbar: '#bar', align: 'left' }
]],
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');
}
//查询
$('#searchBtn').on('click', function () {
findtab.config.where.brand_name = $('#brand_name_id').val()
findtab.reload('brandReload', {
url: '/Ajax/AjaxBrand.ashx?type=GetBrandList' //数据接口
, page: {
curr: 1
}
});
return false;
});
//触发事件-- 表头上方按钮（工具栏）
table.on('toolbar(filter_brand)', function (obj) {
var data = obj.data //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
switch (obj.event) {
case 'add':
window.location.href = '/Implant/AddBrandInfo'; //跳转
//弹窗
//var openIndex = layer.open({
// id: 'add',
// type: 2,
// title: '添加品牌',
// shadeClose: true,
// shade: 0.6,
// area: ['550px', '500px'],
// content: '/Implant/AddBrandInfo'
//});
};
});
//触发事件-- 弹框
table.on('tool(filter_brand)', function (obj) {
var data = obj.data //获得当前行数据
switch (obj.event) {
case 'delete':
delbrand(data.id);
break;
case 'update':
//layer.msg('编辑' + data.brand_name);
window.location.href = '/Implant/UpdateBrandInfo?brandName=' + data.brand_name;
break;
};
});
//删除品牌信息
function delbrand(id) {
layer.confirm('@ImplantSys.Language.Language.确定要删除吗？', function (index) {
$.post("/Ajax/AjaxBrand.ashx?type=DelBrandInfo", { "id": id }, function (obj) {
if (!obj.result) {
if (obj.msg == "删除成功") {
layer.alert('@ImplantSys.Language.Language.删除成功', {
skin: 'layui-layer-molv' //样式类名 自定义样式
, closeBtn: 1 // 是否显示关闭按钮
, anim: 1 //动画类型
, btn: ['@ImplantSys.Language.Language.确定'] //按钮
, icon: 6 // icon
, yes: function () {
location.reload();
}
});
}
}
}, 'json');
});
return false;
}
});
$(function () {
$(".layui-table-tool").addClass("layui-table-tool_kuozhan");
$(".layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary]").css("background-color", "yellow");
$(".layui-table-tool-panel").hover(function () {
alert("1d");
});
})
</script>
@*操作列表内容 按钮*@
<script type="text/html" id="bar">
<div class="layui-btn-container">
@*<button class="layui-btn layui-btn-sm lay_bnt_border" lay-event="add">添加</button>*@
@if (sysPowerBusiness.ClickUserPowerInfo("品牌管理", PowerEnum.编辑.ToString()).ToUpper() == "TRUE")
{
<button class="layui-btn layui-btn-sm lay_bnt_border" lay-event="update">@ImplantSys.Language.Language.编辑</button>
}
@if (sysPowerBusiness.ClickUserPowerInfo("品牌管理", PowerEnum.删除.ToString()).ToUpper() == "TRUE")
{
<button class="layui-btn layui-btn-sm lay_bnt_border layui-bg-red" lay-event="delete">@ImplantSys.Language.Language.删除</button>
}
</div>
</script>
@*表格上面的表头按钮*@
<script type="text/html" id="toolbarBrand">
<div class="layui-btn-container">
@if (sysPowerBusiness.ClickUserPowerInfo("品牌管理", PowerEnum.新增.ToString()).ToUpper() == "TRUE")
{
<button class="layui-btn layui-btn-sm lay_bnt_border" lay-event="add">@ImplantSys.Language.Language.添加</button>
}
</div>
</script>
@*表格展示图片（配合table里的templet: '#imgurl'）*@
<script type="text/html" id="imgurl">
<img src="../{{ d.img_url }}" style="width:40px; height:40px;">
</script>
实现效果：
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");
JQ获取radio 的值
$('input[name=$('input[name="sex"]:checked').val();"sex"]:checked').val();
监听radio单选
radio单选框被点击时触发，回调函数返回一个 object 对象，携带两个成员：
form.on('radio(ChoiceRadio)', function(data){
console.log(data.elem); //得到 radio 原始 DOM 对象
console.log(data.value); //被点击的 radio 的 value 值
});
复选框
<div class="layui-form-item" pane=""> <label class="layui-form-label">权限设置</label> <div class="layui-input-block"> <input type="checkbox" name="ClickPower" lay-skin="primary" lay-filter="switchPower" value="1" title="查询"> <input type="checkbox" name="ClickPower" lay-skin="primary" lay-filter="switchPower" value="2" title="新增"> <input type="checkbox" name="ClickPower" lay-skin="primary" lay-filter="switchPower" value="3" title="修改"> <input type="checkbox" name="ClickPower" lay-skin="primary" lay-filter="switchPower" value="4" title="删除"> <input type="checkbox" name="ClickPower" lay-skin="primary" lay-filter="switchPower" value="5" title="审核"> </div> </div>
//监听权限设置的选择 form.on('checkbox(switchPower)', function (data) { //console.log(data); //打印当前选择的信息 //if (data.elem.checked) { //判断当前多选框是选中还是取消选中 // alert('当前选中'); //} //var value = data.value; //获取选中的value值 var powerlist = ""; $('input:checkbox[name=ClickPower]:checked').each(function (i) { if (0 == i) { powerlist = $(this).val(); } else { powerlist += ("|" + $(this).val()); } }); $("#powerlist").val(powerlist); });
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 }); } } });
}
5、图片在界面展示，及放大图片
先定义一个缩略图的大小，其实就是一段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'); }
效果如下，就可以放大了
6、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());
7、表格赋值，将代码转为中文 如 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>"
}
}
}
浙公网安备 33010602011771号