项目中的layui总结(表单/表格/弹出层)

本次项目使用到layui以下将对其进行总结
https://www.layui.com/
附上layui网站

  • layui的基础引用
  • layui–upload文件上传
  • layui–form表单
  • layui–rate评分
  • layui–table表格（针对传输数据同官方文档不同）
  • layui–layer弹出层
  • layui-导航

一、layui的基础引用

npm i layui -S

安装全局

1、模块化的使用（官方推荐）

./layui/css/layui.css
./layui/layui.js
*引入这两个文件
遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化的使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!--引入这个JS-->
    <script type="text/javascript" src="./layui/layui.js"></script>

</head>
<body>


<script>
    //必须使用这个方法先引用对应的模块
    layui.use(['layer'],function () {
        var layer = layui.layer;
        layer.alert("xxxxxxxxxxxxxxxxxxxxxxxx")
    })
</script>


</body>
</html>

/**
 * 一次性自调函数初始化两个全局变量
 */
var layer,form;
(function () {
    layui.use(['layer','form'],function () {
        layer=layui.layer,form=layui.form;
    })
})();

/**
 * 页面加载完成后执行一些函数
 */
$(function () {
    layer.msg("消息框")
});

根据官方文档阐述，这样的办法可以在需要他的时候进行加载。

当然也可以非模块化，一次性加载完成

2、非模块化使用

注意：引入的JS是 /layui/layui.all.js

<script src="../layui/layui.all.js"></script>  
<script>
function(){
  //无需再执行layui.use()方法加载模块，直接使用即可
  var form = layui.form
  ,layer = layui.layer;
}();
</script>

二、layui–upload文件上传

本次项目是采用本地图片上传，通过formdata的方式进行文件上传
html

  <div class="layui-upload">
             <button type="button" class="layui-btn our-btn our-up-btn" id="upicon">
                        上传图片
             </button>
             <div class="layui-upload-list">
                       	 <img class="layui-upload-img our-img our-up-img" id="imgBox" />
             </div>
</div>

js

// 公用上传图片
//定义全局图片上传
(function () {
    layui.use('upload',function () {
        upload = layui.upload;
    })
})();
//页面加载完成后引用图片上传函数；
$(function(){
	golayuiUpload('#upicon', '#imgBox', "icon");
})
//封装公用  golayuiUpload(按钮, 图片展示区域, 图片的field名)
function golayuiUpload(btnId, imgShowId, imgName) {
  let uploadInst = upload.render({
    elem: btnId
    , auto: false
    , field: imgName
    , choose: function (obj) {
      //预读本地文件
      obj.preview(function (index, file, result) {
        // $(imgShowId).append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')  //展示文件名
        layui.use('jquery', function () {
          var $ = layui.$ //重点处
          $(imgShowId).attr('src', result)
        });
      })
    }

  });
}

FormData格式的提交表单，要求将form表单元素的name与value进行组合

三、layui–form表单

layui封装了一套表单提交的简单方法，只要按照layui规定的html就能实现简单的formdata提交；

1、普通方法的提交（非formdata格式）

      <form action="url" method="POST"> 
        用户名:<input type="text"  name="username">
        密码:<input type="password" name="password">
        <input type="submit" value="提交">
    </form>

2、formdata格式提交（非layui）

html

<form action="url" method="POST" enctype="multipart/form-data" id="myform"> 
        用户名:<input type="text"  name="username">
        密码:<input type="password" name="password">
      	<input type="submit" value="提交">
 </form>

ajax带上FormData

 $("#btnUp").click(function () {
            var myform = new FormData($("#myform"));
            //新增
            var input = '<input type="text" name="code">';
            myform.append(input);
            //定义myform.append('name',value);
			myform.append('kind',1);
			myform.append('avg_price',666);
			//传输
            $.ajax({
                url: "",
                type: "post",
                data: myform,
                processData: false,
          		  contentType: false,
                success: function (res) {
                    console.log("res")
                }
            })
        })

3、layui的formdata

html
此为官方文档提供的表单，只要按照这个格式，就能通过data. 获取到值

<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="givebTN">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

js

   layui.use('form', function () {
      var form = layui.form;
      //'submit(givebTN)对应的是lay-filter="givebTN"；
      form.on('submit(givebTN)', function (data) {
      //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      //封装函数见下面 new FormData(data.form)转化为formdata格式
        myTAjaxGive('post', '/store/storeupdateinfo/', new FormData(data.form), giveOK);
        return false; 
      });
    });

封装ajax 传输格式为formdata

//传输数据的give带token giveAjax("get/post", "/url/", 传到数据库的对象, 结果函数的方法名);
function myTAjaxGive(type, url, data, fn) {
    Promise.all([
        $.ajax({
            url: "url路径" + url,
            type: type,
            data: data,
            processData: false,
            contentType: false
        })
    ]).then(
        resolve => { //成功的时候
                return fn(resolve);  
        },
        reject => {	//失败
            rejectTime(reject);
        }
    );
}

ps:文件上传在layui中虽然是独立的模块，但是其如果也在表单中的话，也是可以随着表单建立formData对象的。故此只需要将其模块中的提交去掉，从而用ajax来提交formDate表单就可以了。(见二、)

笔记（layui里的select）
layui里的select，html只有select和option
如下

 <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao" id="selectBox>
        <option value="0">写作</option>
        <option value="1">阅读</option>
      </select>
    </div>
  </div>

但是在实际的html中会生成一个input标签；
在动态生成下拉框时，就需要注意了

// 省市联动
// AJAX请求页面
$(document).ready(function () {
  getDataList();
});
// 请求市区
function getDataList() {
  // 请求
  $.ajax({
    type: "get",
    url: ''url路径'',
    success: function (res) {
      showSelect(res);
    }
  });
}
//  展示页面
function showSelect(res) {
  let str;
  for (let i = 0; i < res.data.length; i++) {
    str += `
        <option value="${res.data[i].id}">${res.data[i].name}</option>
      `;
  }
  $("#selectBox").append(str);
  layui.use("form", function () {
    let form = layui.form;
    form.render(); //更新全部
	form.render('select'); //刷新select选择框渲染
  });
}

总结一下：在layui的表单当中，一定要按照官方文档给出的格式，在使用formdata格式传输数据时，要 new FormData（）；在ajax中processData: false,contentType: false；

四、layui–rate评分

<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('rate', function(){
    var rate = layui.rate;
   
    //渲染
    var ins1 = rate.render({
      elem: '#test1'  //绑定元素
    });
  });
  </script>
</body>

在这里插入图片描述
value可以获取到评星的值

五、layui–table表格

不得不表演说一下layui的表格用得好，简直是前端数据渲染的福音，怪说不得官方介绍layui是----’‘准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。’’ O(∩_∩)O服气！！
想要什么样的表格
在这里插入图片描述
直接通过查看代码就Okla~
我主要是通过实际数据传输的不同；来编写基础表格
截取了一段获取到的数据
在这里插入图片描述
在实际的获取数据中发现，数据嵌套多个，返回code是200；数据的名称也大不相同，我们看下官方数据格式
在这里插入图片描述
值得注意的是官方给出的是code为0；数据在data中并且没有数据的嵌套，于是乎，我们要做的就是把我们的数据进行改装，改成官方文档的样子
就需要用到官方问题提供的parseData；

, parseData: function (res) { //res 即为原始返回的数据！！！重要
          var my_data = {
            "code": 0, //解析接口状态；将200改为0；
            "msg": res.msg, //解析提示文本
            "count": res.data.count, //解析数据长度；分页器需要
            "data": res.data.commodity_comment//解析数据列表；data>commodity_comment包裹着需要的数据
          };
          return my_data;//返回数据
        }

当遇到列表下嵌套数据就需要使用templet重新定义field了

{ field: 'task_num', title: '订单编号', width: 100, fixed: 'left', unresize: true, sort: true }
, {title: '订单标题', width: 125, edit: 'text', templet: function (data) { return data.commodity.name}}

总结一下对于layui可以直接通过官方文档来写表格，在获取数据的时候需要关注你自己本身返回的数据；可以通过,done:function(res){console.log(res)}来查看返回的数据；通过parseData来调试匹配到官方相同的返回数据格式；
po上实现代码

// 上部模糊查询区域
  layui.use(['laydate', 'form'], function () {
    var laydate = layui.laydate;
    //日期选择器
    laydate.render({
      elem: '#down'
      , range: true
      , done: function (value, date) {
        date__gte = value.substring(0, 10);
        date__lte = value.substring(13, 23);
      }
    });
    // 后台传输数据
    var form = layui.form;
    form.on('submit(findSql)', function (data) {
      let date__gte = data.form[2].value.substring(0, 10);
      let date__lte = data.form[2].value.substring(13, 23);
      urlBox = `?date__gte=${date__gte}&date__lte=${date__lte}&status=${statusVal}&name=${data.field.name}&task_num=${data.field.task_num}`
      tableGO();//下部分数据渲染
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  })
  //下部分数据表格
  tableGO(); 
  function tableGO() {
    layui.use('table', function () {
      var table = layui.table;
      table.render({
        elem: '#IMform' //表格id
        , url:"url路径"
        , toolbar: '#toolbarDemo' //绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮
        , headers: { "Authorization": "Bearer " + sessionStorage.getItem("tokenValSmall") } //头部
        , title: '订单数据表'
        , loading: true
        , parseData: function (res) { //res 即为原始返回的数据！！！重要
          var my_data = {
            "code": 0, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.data.count, //解析数据长度
            "data": res.data.results //解析数据列表
          };
          return my_data;
        }
        , cols: [[
          { type: 'checkbox', fixed: 'left' }
          , { field: 'task_num', title: '订单编号', width: 100, fixed: 'left', unresize: true, sort: true }
          , {
            title: '订单标题', width: 125, edit: 'text', templet: function (data) {
              return data.commodity.name
            }
          }
          , {
            title: '买家姓名', width: 110, edit: 'text', templet: function (data) {
              return data.user.username
            }
          }
          , { field: 'create_time', title: '下单时间', width: 100, sort: true }
          , { field: 'price', title: '支付金额', width: 100, sort: true }
          , {
            title: '买家地址', width: 180, templet: function (data) {
              return data.user.address_detail
            }
          }
          , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
        ]]
        , page: true  // 允许翻页
      });
      // 监听行工具事件
      table.on('tool(IMform)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
          layer.confirm('真的拒单么？', function (index) {
            obj.del();
            var dataVal = new FormData();
            dataVal.append('status', 4);
            myTAjaxGive("post", "/store/storetaskupdate/" + data.id + "/", dataVal, closeIndex);
            function closeIndex() {
              layer.msg('拒单成功', { icon: 1 });
            }
            layer.close(index);
          });
        } else if (obj.event === 'detail') {
          layui.use('table', function () {
            // 查看信息
            layer.open({
              type: 1
              , title: "订单详情"
              , content: '<div style="padding: 20px 100px;">' + "用户姓名：" + data.commodity.name + "<br/>用户具体信息：" + data.commodity.intro +
                "<br/>用户联系方式：" + data.user.phone + "<br/>用户地址：" + data.user.address_detail +
                '</div>'
              , btn: '确认接单'
              , btnAlign: 'c' //按钮居中
              , shade: 0 //不显示遮罩
              , yes: function () {
                var dataVal = new FormData();
                 dataVal.append('status', 1);
                myTAjaxGive("post", "/store/storetaskupdate/"+data.id+"/", dataVal,showfn)
                layer.closeAll();
              }
            });
          })
        }
      });
    });
  }

六、layui–layer弹出层

没什么好说的~O(∩_∩)O好用；看官方文档快速操作
小笔记
parent.location.reload()刷新父亲对象（用于框架）；页面刷新；
layui.use(‘layer’, function(){
var layer = layui.layer;
layer.open({
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层） 3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）;
content: ‘文字’ / ‘url网页链接’ / ${数据拼接}。。。
}）
}）

七、layui-导航

https://www.layui.com/doc/element/nav.html
见官方文档~~~
在这里插入图片描述
( ఠൠఠ )ﾉok ~
all in all;
layui好用的时候简直像爸爸，不好用的时候分分钟要叉人啊哈哈
强烈推荐看官方文档讲得很清楚！！
https://www.layui.com/
崇拜贤心?????

版权声明：本文为qq_45503686原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。