学习layui分享

最新推荐文章于 2022-07-21 03:37:29 发布

猿码优创

最新推荐文章于 2022-07-21 03:37:29 发布

阅读量752

点赞数 1

分类专栏：技术猿码优创文章标签： layui 数据表格回显复选框回显单选框回显 layui使用

本文为猿码优创原创文章，猿码优创博客地址：https://cnbuilder.cn 未经猿码优创允许不得转载。

本文链接：https://blog.csdn.net/weixin_39984161/article/details/88538628

版权

技术同时被 2 个专栏收录

48 篇文章 5 订阅

订阅专栏

猿码优创

47 篇文章 8 订阅

订阅专栏

嘿，我回来。感觉好久好久没有维护博客了。这篇文章应该是2019年第一篇文章。。又换一份工作，是不是感觉博主一点都不稳定，一年换了三家公司呵呵呵呵呵。。。

既然说到这里做为一个北漂打工来说，我真心觉得稳定点好，感觉真的老了。。。
选工作一定要选好公司！！！选好公司！！！选好公司！！！

北漂是一种情怀，但是没人会认这种情怀，在这适者生存的大环境里你只能加倍努力，充实自己。。加油北漂游子。

最近玩layui回显玩的挺爽的。。给大家分享一下。

	说到写layui，我前两家公司基本没写过前段代码，做app开发和小程序开发做多了，真的感觉很省事，直接提供API接口就可以了。一个超级牛逼的前段真的很让后端省劲啊。给大家爆一张前端技术超牛逼的小哥哥（单身哦！）。

file

我刚到我新换的这家公司，写layui代码都写哭了。。各种回显--数据表格回显、复选框回显、单选框回显各种js各种写，第一次用layui感觉这么难用。很晚的时候独自发了一个朋友圈，北上广深不相信眼泪（加油~北漂游子们越努力越幸运！）然后通宵把layui文档吃了一遍。。真的好艰难。。。

file

熬过来了，就是春天呢。不过现在layui基本的开发我感觉已经没问题了。

终、我的故事结束了。现在给大家分享一下layui爬过的坑，已经各种回显的使用。

先给大家介绍一下什么是layui file

layui的存在价值（摘自百度百科）

file

甩一个layui的官网点我chua的一下就进官网了

layui官网下载layui的开发包目录结构如下：
然后就可以进行开发了。

我给大家甩一个很简单的数据表格使用：点我快速进layui的数据表格DOC

file

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>动态数据表格dev</title>
      <link rel="stylesheet" href="layui.css路径" media="all">
    </head>
    <body>
     
    <table id="dataTable" lay-filter="user"></table>
     
    <script src="layui.js路径"></script>
    <script>
	//使用layui的table
    layui.use('table', function(){
	//用layui的table
      var table = layui.table;
      
      //第一个实例
 serach =   table.render({
        elem: 'dataTable'
        ,height: 312
        ,url: 'user/getUsers' //后台数据接口路径如果有参数直接用get形式发送？拼接
        ,page: true //开启分页 layui的分页我觉得真的好强大。。。直接开启然后就会往后台传输页面和每页显示大小layui分页加上mybatisPlus一起用真的是绝配。
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}//field是数据接口返回的字段名称 自动填充数据 
          ,{field: 'username', title: '用户名', width:80}//width ：宽度 title数据表格的标题 
          ,{field: 'sex', title: '性别', width:80, sort: true}//sort排序
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'sign', title: '签名', width: 177}
          ,{field: 'experience', title: '积分', width: 80, sort: true}
          ,{field: 'score', title: '评分', width: 80, sort: true}
          ,{field: 'classify', title: '职业', width: 80}
          ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
      });
    });
    </script>
    </body>
    </html>

以上就是数据表格的基本使用。

下面是我自己总结的常用问题解决方案。

Q：返回的数据格式怎么出 答：随意格式取出即可，把下面的代码放入即可取参数。

 parseData: function (res) { //res 即为原始返回的数据
		return {
			"code": 0, //解析接口状态
			"msg": "ok", //解析提示文本
			"count": res.total, //解析数据长度
			"data": res.rows //解析数据列表
		};
	}

Q:数据表格的序号怎么处理： 答：直接在标题添加下面代码

//表头
	{
		field: 'index',
		title: '序号',
		width: '6%',
		templet: '#indexTpl'
	}
<!--序号自增-->
<script type="text/html" id="indexTpl">
   {{d.LAY_TABLE_INDEX+1}}
</script>

Q:如果把数据表格根据状态回显相应的信息比如1可用 0不可用 答：

{
	field: 'status',//后端返回的字段值
	title: '状态',  
	templet:'#statusTypes'
}
<script type="text/html" id="statusTypes">
//d是固定写法不用管。
{{# if (d.status=='1') { }}
        <span>可用</span>
    {{# } else if(d.status=='2'){ }}
        <span>不可用</span>
    {{# } else{ }}
       <span>数据有误</span>
    {{# }}}
</script>

Q:数据表格的查询 答： 1.给数据表格加一个名字 file 2.写查询方法

	 //监听查询按钮
       form.on("submit(query)", function (data) {
           console.info(data)
           var keyWord = data.field.keyWord;
           //表格重新加载
           search.reload({
               where: {
                   keyword: keyWord
               }
           });
           return false;
       });

Q:数据表格的回显 数据表格放到后台即可。返回参数map加上这个参数即可 file 以上就是数据表格的基本使用欢迎大家可以给我交流。

下面继续跟大家分享一下弹出层。点我快速进入弹出层地址：

file

 layer.open({
		type: 2,//layui类型
		title: ['添加用户'],
		area: ['73%', '90%'],//弹出层的大小
		shadeClose: true,//是否显示关闭按钮
		btnAlign: 'c',//
		 btn: ['确定', '取消'],//弹出层按钮
		content: 'user_add.html',//弹出层页面
		success: function (layero, index) {
			打开弹出层执行方法
		},
		yes: function (index, layero) {
		   //点击弹出层确定执行方法
		},
		 cancel: function (index, layero) {
		  //取消弹出层执行的放
		}

	});

弹出层多少东西，可以从layui直接粘代码，就是最后三个按钮事件使用方法。给大家说一下下拉框的数据动态填充

 <div class="layui-inline">
	<label class="layui-form-label">KingYiFan是男是女：</label>
	<div class="layui-input-inline   layui-form">
		<select lay-verify="" lay-search="" id="sex">
			<option value="">请选择</option>
		</select>
	</div>
</div>
 //初始化下拉框数据 页面数据
    function initSexData() {
        $.ajax({
            type: "get",//接口请求方式
            url:  "initSex",//接口地址
            async: false,//是否异步
            dataType: 'json',
            success: function (res) {
                $.each(res, function (index, data) {
                    var option = $("<option>").val(data.id).text(data.sex);
                    $("select[id=sex]").append(option);
                });
            }
        });
    }
以上是下拉框动态添加 下面是数据下拉框回显
 $("[name='sex']").val("1");
 以上就是下拉框的回显。layui是双向绑定的所以直接赋val值即可回显
  //多选框赋值
                var sex = $("input[name='sex']");
                for (var i = 0; i < sex.length; i++) {
                    var val = sex[i].value;
                    if (data.sex == val) {//data的sex是后台传过来的
                        sex[i].checked = true;
                    }
                }
不管怎么操作别忘记
layui.form.render();//重新绘制表单，让修改生效

由于有公司信息我部分打码，请大家理解。

这就是layui学习分享，哪里不懂可以私信我哦！下一篇文章给大家分享layui动态三级菜单展示。

鼓励作者写出更好的技术文档，就请我喝一瓶哇哈哈哈哈哈哈哈。。

微信：

支付宝：

感谢一路支持我的人。。。。。

Love me and hold me
QQ:69673804（16年老号）
EMAIL:69673804@qq.com
友链交换
如果有兴趣和本博客交换友链的话，请按照下面的格式在评论区进行评论，我会尽快添加上你的链接。

网站名称：KingYiFan’S Blog
网站地址：http://blog.cnbuilder.cn
网站描述：年少是你未醒的梦话，风华是燃烬的彼岸花。
网站Logo/头像：[头像地址](https://blog.cnbuilder.cn/upload/2018/7/avatar20180720144536200.jpg)