学习layui分享

约定不等于承诺〃 2022-04-23 14:08 235阅读 0赞

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

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

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

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

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

![file][]

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

![file][file 1]

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

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

先给大家介绍一下什么是layui ![file][file 2]

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

![file][file 3]

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

1.  layui官网下载layui的开发包 目录结构如下： ![file][file 4]
2.  然后就可以进行开发了。

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

![file][file 5]

<!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][file 6] 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 7] 以上就是数据表格的基本使用欢迎大家可以给我交流。

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

![file][file 8]

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动态三级菜单展示。

--------------------

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

微信：

[![E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg][]][E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]

支付宝：

[![E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png][]][E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]

--------------------

感谢一路支持我的人。。。。。
    
    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)

[file]: https://blog.cnbuilder.cn/upload/2019/2/image-155246609397320190313163457823.png
[file 1]: https://blog.cnbuilder.cn/upload/2019/2/image-155246629661620190313163818857.png
[file 2]: https://blog.cnbuilder.cn/upload/2019/2/image-155246675129120190313164551311.png
[file 3]: https://blog.cnbuilder.cn/upload/2019/2/image-155246677700320190313164617457.png
[chua]: https://www.layui.com/
[file 4]: https://blog.cnbuilder.cn/upload/2019/2/image-155246705318620190313165053491.png
[layui_DOC]: https://www.layui.com/doc/modules/table.html/
[file 5]: https://blog.cnbuilder.cn/upload/2019/2/image-155246727159720190313165431328.png
[file 6]: https://blog.cnbuilder.cn/upload/2019/2/image-155246863235520190313171712259.png
[file 7]: https://blog.cnbuilder.cn/upload/2019/2/image-155247095970620190313175600631.png
[Link 1]: https://www.layui.com/doc/modules/layer.html
[file 8]: https://blog.cnbuilder.cn/upload/2019/2/image-155246951190020190313173152786.png
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E5_9B_BE_E7_89_87_20180718143757_meitu_220180718150018666.jpg 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180718143757_meitu_220180718150018666.jpg
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png]: https://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png
[E5_BE_AE_E4_BF_A1_E6_88_AA_E5_9B_BE_2018071814381620180718143910635.png 1]: http://blog.cnbuilder.cn/upload/2018/7/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_2018071814381620180718143910635.png