layui帮助

最新推荐文章于 2023-04-23 07:00:19 发布

橘子洲头T

最新推荐文章于 2023-04-23 07:00:19 发布

阅读量397

点赞数

文章标签： c# asp.net

本文链接：https://blog.csdn.net/qq_46127389/article/details/116117122

版权

----------------------------------表格显示图片----------------------------------------------------
--需要在表格页面, </head>前面添加的CSS样式代码如下
<style>
	.layui-table-cell {
		height: auto !important;
	}
	.layui-table img {
		max-width: 100%;
	}
</style>
--需要在表格页面, <body>后面添加的js代码如下
<script type="text/htm1" id="IMGurl">
	<img src="images/{{d.img}}" style="height: 60px;border-radius: 10px;" />
</script>
--在数据表格中需要显示图片的列添加属性代码如下
templet: "#IMGurl"

注意两条：
IMGurl => 其中IMGurl指的是表格templet: "#IMGurl"的参数。
images/{{d.img}} => 其中images指的是图片文件夹，img指的是field: 'img'的参数

-----------------------------------格式化日期------------------------------------------------------
---在数据表格中需要显示格式化时间的列添加属性代码如下
templet: "<div>{{layui.util.toDateString(d.data, 'yyyy-MM-dd HH:mm:ss')}}</div>"

注意：
d.data其中的data是field: 'data'的参数。
-----------------------------------搜索栏添加一个下拉框--------------------------------------------
--在需要的位置粘贴如下代码
<label class="layui-form-label">类型:</label>
<div class="layui-input-inline">
	<select name="type" id="type" required lay-verify="required">
		<option value="">---请选择---</option>
		<option value="test">test</option>
	</select>
</div>
在对应的搜索方法中添加如下示例
$('#search').on('click', function() {
	var type= $('#type').val();
	table.reload('testReload', {
		where: {
            'type': type
		}
	});
});
注意：
#type => type指的是下拉框id的属性值


-----------------------------------添加一个日期选择------------------------------------------------
需要加载1个模块'laydate'代码如下，elem属性绑定需要显示日期选择的id
layui.use(['table', 'laydate', 'form'], function() {
	var table = layui.table;
	var $ = layui.jquery;
	var form = layui.form;
	var laydate = layui.laydate;
	//常规用法
	laydate.render({
		elem: '#data'
	});
})
注意：
#data => data指的是要显示日期选择的输入框id的属性值

-----------------------------------判断语句模板----------------------------------------------------
--需要在表格页面, <body>后面添加的js代码如下
<script type="text/html" id="demo">
	{{#  if(d.test == 0){  }}
		<span>是</span>
	{{#  }else{  }}
		<span>否</span>
	{{#  }  }}
</script>
注意：
d.test => 其中test指的是表格field: 'test'的参数。
--在数据表格中需要显示的列添加属性代码如下
templet: "#demo"

-----------------------------------下拉框回显------------------------------------------------------
--下拉框回显放到<script>标签里面
$.getJSON("getType", function(obj) {
	var optionstring = "";
	for(var i = 0; i < obj.data.length; i++) {
		optionstring += "<option value='" + obj.data[i].id + "'>" + obj.data[i].name + "</option>";
	}
	$("#type").html('<option value="">---请选择---</option>' + optionstring);
	form.render('select'); //刷新下拉框
});
注意：
getType => 指的是后台的分类接口
type => 指的是下拉框id的属性值
id => 分类接口id
name => 分类接口名称



-----------------------------------下拉框更新回显--------------------------------------------------
父页面传值方法
body.contents().find("#types").val(obj.data.ty_id);
子页面输入框接收值
<input type="text" id="types" class="layui-hide">
子页面下拉
$.getJSON("getType", function(obj) {
	var optionstring = "";
	var j=$("#types").val();
	var ty_id="";
	var ty_name="";
	for(var i = 0; i < obj.data.length; i++) {
		if(obj.data[i].ty_id==j){
			ty_id=obj.data[i].ty_id;
			ty_name=obj.data[i].ty_name;
			continue;
		}
		optionstring += "<option value='" + obj.data[i].id + "'>" + obj.data[i].name + "</option>";
	}
	$("#type").html("<option value='"+ty_id+"'>"+ty_name+"</option>" + optionstring);
	form.render('select');
});

--下拉框更新回显优化版
$.getJSON("getType", function(obj) {
	var option = "";
	for(var i in obj.data) {
		option += "<option value='" + obj.data[i].id + "'>" + obj.data[i].name + "</option>";
	}
	$("#type").html(option);
$("#type").val($("#types").val());
	form.render('select');
});

注意：
getType => 指的是后台的分类接口
type => 指的是下拉框id的属性值
id => 分类接口id
name => 分类接口名称
#types => types父页面传过来的types的值


-----------------------------------图片传值（不用看）-----------------------------------------------
body.contents().find("#test").attr({"src":obj.data.img,"width":"70%","height":400});
注意：
obj.data.img是否获取到值
#test => test指的是子页面 <img src="" id="test"/>
obj.data.img => img指的是表格field: 'img'的参数。

-----------------------------------页面传值 -------------------------------------------------------
body.contents().find("#test").html(obj.data.test);
注意：
obj.data.test是否获取到值
-----------------------------------页面赋值--------------------------------------------------------
body.contents().find("#demo").val(obj.data.demo);
注意：
obj.data.demo是否获取到值
-----------------------------------关闭layer弹窗方法-----------------------------------------------
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
layer.close(index);

layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

关闭所有层 关闭速度较快可以配合延迟器使用
setTimeout(function() {
layer.closeAll();
}, 800);
-----------------------------------layui动态表格刷新-----------------------------------------------
table.reload('testReload');
注意：
testReload 表格的id

刷新复选框 form.render('checkbox');

-----------------------------------layui自适应响应式布局 -------------------------------------------
第一，在第一个div设置一个布局类分别是：
layui-container//此类能在小屏幕以上的设备中固定宽度，让列可控。在PC端会设置一定的宽度且居中
layui-fluid//使用此类不会固定宽度，而是 100%自适应
第二，设置行，使用layui-row（行）
第三，设置列，layui-col（列）
-----------------------------------layui弹窗 -------------------------------------------
layer.alert("自定义文字", {
	//更多参数 https://www.layui.com/doc/modules/layer.html#base
	type: 0 //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
	//,area: ['500px', '300px']//默认：'auto' 宽高都自适应的
	,offset: 'auto' //默认：'auto' 垂直水平居中
	,shade: 0.4 //遮罩透明度
	//,maxmin: true //允许全屏最小化
	,title: '' //标题 关闭=> ''
	,icon: 0 //图标     0!号 1对勾 2叉号 3？号 4锁  5不开心 6开心
	,time: 1200 //自动关闭所需毫秒
	,btn: '' //隐藏按钮 ['按钮','关闭']//可以无限个按钮
	,anim: 6 //0-6的动画形式，-1不开启 0平滑放大 1从上掉落 2从最底部往上滑入 3从左滑入 4从左翻滚 5渐显 6抖动
	,closeBtn: 0 //隐藏关闭按钮
	,isOutAnim: true//关闭层时会有一个过度动画 false关闭
	,fixed: true//即鼠标滚动时，层是否固定在可视区域
	,scrollbar: true//默认允许浏览器滚动
,shadeClose:true//如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
});
//成功
layer.msg(res.msg, {
	icon: 1,
	time: 1500
}, function() {
	table.reload('tableReloadId');//重新渲染表格数据
	layer.close(index);
});
//警告
layer.msg(res.msg, {
	icon: 0,
	time: 1500,
	anim: 6
}, function() {
	table.reload('tableReloadId');//重新渲染表格数据
	location.reload();//刷新当前页面
	layer.close(index);
});

橘子洲头T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui帮助

----------------------------------表格显示图片------------------------------------------------------需要在表格页面, </head>前面添加的CSS样式代码如下<style> .layui-table-cell { height: auto !important; } .layui-table img { max-width: 100%; }</style>-.
复制链接

扫一扫