学习layui分享

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

layui的存在价值(摘自百度百科)

甩一个layui的官网

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

我给大家甩一个很简单的数据表格使用:

(adsbygoogle =window.adsbygoogle ||[]).push({});

    <!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.给数据表格加一个名字

2.写查询方法

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

Q:数据表格的回显 数据表格放到后台即可。返回参数map加上这个参数即可

以上就是数据表格的基本使用欢迎大家可以给我交流。

下面继续跟大家分享一下弹出层。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券