初次使用Layui

最新推荐文章于 2024-07-08 10:03:48 发布

一剑轻语

最新推荐文章于 2024-07-08 10:03:48 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： layui

本文链接：https://blog.csdn.net/yijianqingyu/article/details/82774733

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

背景：公司项目全面改为使用layui，刚好我现在负责一个新项目，第一次使用layui。刚改革的时候看了一下layui，但是当时负责的项目不用改成layui格式的。所以这是第一次做

官网：https://www.layui.com/

官网文件看了一会，但是我看的都是按照项目需要用的来看的

因为主要负责监控项目进度，解决其他同事bug，和数据以及前端沟通，所以使用的应该不够深入。

PS：有前端哎，我还要写页面

使用介绍：先导包，引入，这些就不说了用的是layui-v2.3.0

格式：我这边是有其他人写过的，所以格式直接拿过来，也不清楚每个class什么意思（我也不想去了解，以后写多了或许会知道吧，但是我现在对样式不想去学习，感觉这是前端的）

这是jsp代码

<body>
	<div class="layui-fluid">
    	<div class="layui-card">
    		<div class="layui-card-body" style="padding: 15px;">
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
					<ul class="layui-tab-title">
						<li class="layui-this"><a href="">奖项设置</a></li>
					</ul>
				</div>
				<div class="layui-form layui-card-header layuiadmin-card-header-auto">
       				<div class="layui-form-item">
						<div class="layui-inline">
				            <label class="layui-form-label">奖项类型：</label>
				            <div class="layui-input-inline">
				            	 <select name="awardTypeId" lay-filter="awardType">
					                
					              </select>
				            </div>
				        </div>
				        <div class="layui-inline">
				            <label class="layui-form-label">奖项等级：</label>
				            <div class="layui-input-inline">
				            	<select name="awardLevelId">
				            		
				            	</select>
				            </div>
				        </div>
				        <div class="layui-inline">
				            <label class="layui-form-label">所属学院：</label>
				            <div class="layui-input-inline">
				            	<select name="collegeId" lay-search>

				            	</select>
				            </div>
				        </div>
				        <div class="layui-inline">
				            <button class="layui-btn" data-type="reload">搜索</button>
				            <button id="" class="layui-btn" onclick="window.location.href='${ctx}/system/award/list'">重置</button>
				            <button id="addAward" class="layui-btn">新增</button>
				        </div>  
				
				<div class="layui-card-body">
					<table class="layui-hide" id="awardListTable" lay-filter="demo"></table>
			   	</div>
				
			</div>
		</div>
	</div>
</body>

这是部分js代码（就不全展示了，应该也不会用人要用）

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
	layui.use(["table"],function(){
		var admin = layui.admin
		table = layui.table;
		table.render({
			elem:"#awardListTable",
			url:"getAwardListDatas",
			request:{
				pageName:'pageNo',
				limitName:'pageSize'
			},
			cols:[[
			       {field:'awardType',align:'center',title:'奖项类型'},
			       {field:'awardLevel',align:'center',title:'奖项等级'},
			       {field:'awardLevelMoney',align:'center',title:'奖项金额'},
			       {field:'collegeName',align:'center',title:'所属学院'},
			       {field:'awardMoneyMax',align:'center',title:'金额上限'},
			       {field:'awardStudentMax',align:'center',title:'人数上限'},
			       {fixed:'right',align:'center',title:'操作',toolbar:"#barDemo"}
			       ]],
			id:'testReload'
		}); 
		var $=layui.$,active={
				reload:function(){
					var awardType = $("select[name='awardTypeId']");
					var awardLevel = $("select[name='awardLevelId']");
					var college = $("select[name='collegeId']");
					table.reload("testReload",{
						url:"getAwardListDatas",
						page:{
							curr:1
						},
						where:{
							awardTypeId:awardType.val(),
							awardLevelId:awardLevel.val(),
							collegeId:college.val()
						}
					})
				}
		};
		$('.layui-btn').on('click', function(){
    	    var type = $(this).data('type');
    	    active[type] ? active[type].call(this) : '';
    	  });
		//监听工具条
	    table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	        var data = obj.data //获得当前行数据
	                ,layEvent = obj.event; //获得 lay-event 对应的值
	        if(layEvent === 'edit'){//点击修改按钮
	            var updateurl = "${ctx}/system/award/toAddAward?id="+data.id;
	            add(updateurl);

	        } else if(layEvent === 'del'){//点击删除按钮
	            layer.confirm('真的删除行么', function(index){

	                var delurl = "${ctx}/system/award/delete?id="+data.id;
	                $.ajax({
	                    url:delurl,
	                    type:'post',
	                    dataType:'json',
	                    success:function(item){
	                        layer.msg(item.msg);
	                        setTimeout(function(){
	                            location.reload();
	                        },1000)
	                    },
	                    error:function(er){
	                        layer.msg(er.msg);
	                    }
	                })

	            });
	        } 
	    });
		$("#addAward").on("click",function(){
			var url = "toAddAward";
			add(url);
		});
	})
	function add(url){
		parent.layer.open({
            type: 2,
            area: ['700px', '450px'],
            fixed: false,
            maxmin: true,
            content: url,
            end: function () {
                location.reload();
            }
        });
	}
</script>

这是前台页面，用户点击后进入该页面，然后在前往后台获取数据展示在页面

涉及点：table渲染

table.render();

其中elem选择指定table，url为后台获取数据的地址，然后返回前台页面展示，可以使用toolbar选择自定义模板（修改，删除按钮。如果后台传1，2，3前台转换成对应的值也可以使用自定义模板），id赋值是为了搜索按钮模糊查询的，

reload重载

列表页必不可少的按照条件搜索使用reload

reload（"id",{}）,url为地址，where为传递的值

select渲染

form.render("select");这句话很必要，没有这句话的话，你会发现下拉选无法展示，

好像也没什么问题遇到，就一个下拉选多选遇到了问题layui不支持多选，但是有人写了插件

formSelects-v4.js；formSelects-v4.css。

layui.use(["formSelects"],function(){

formSelects = layui.formSelects;

formSelects.data('select1','server',{
url:"getCollege"
});

});

即可,这个格式是有限制的后台传的数据必须包括name，value，selected，disabled 四个属性

PS:好像我写的这个博客也没什么技术含量。如果你时间充裕的话，还是看官方文档吧。

PS：记录一下layui的学习，这个框架用的很舒服，觉得很有条理，但是功能不全（下拉选没有多选）。

一剑轻语

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初次使用Layui

背景：公司项目全面改为使用layui，刚好我现在负责一个新项目，第一次使用layui。刚改革的时候看了一下layui，但是当时负责的项目不用改成layui格式的。所以这是第一次做官网：https://www.layui.com/ 官网文件看了一会，但是我看的都是按照项目需要用的来看的因为主要负责监控项目进度，解决其他同事bug，和数据以及前端沟通，...
复制链接

扫一扫

专栏目录