layui-数据表格的实现

​话不多说，看效果​

​1. 下载layui的资源包​

​​​https://gitee.com/sentsin/layui?_from=gitee_search​​​

​2.导入到项目中​

​3.新建web项目​

3.1 项目中layui的引入，主要引入两个东西分别是css和js

css的引入

js的引入

3.2 建立json文件（前端展示不涉及数据库数据）

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [
    {
      "id": 10000,
      "username": "user-0",
      "sex": "男",
      "city": "武汉"
      
    },
    {
      "id": 10001,
      "username": "user-1",
      "sex": "女",
      "city": "兰州"
      
    },
    {
      "id": 10002,
      "username": "user-2",
      "sex": "男",
      "city": "天津"
      
    },
    {
      "id": 10003,
      "username": "user-3",
      "sex": "男",
      "city": "上海"
      
    },
    {
      "id": 10004,
      "username": "user-4",
      "sex": "女",
      "city": "重庆"
      
    }
    ]
}

3.2数据表格的实现

​注意事项​

1.在table标签中id的值必须要和script中elem 的值一致。
2.layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
      var $=layui.jquery;
      var table = layui.table;
      var form=layui.form;
      var layer=layui.layer;
      var laydate = layui.laydate;
      必须要指定用到的layui的属性。

​代码实现​

<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
  <script>
    layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
      var $=layui.jquery;
      var table = layui.table;
      var form=layui.form;
      var layer=layui.layer;
      var laydate = layui.laydate;
      //数据表格
    var tableIns=table.render({
        elem : '#userTable' //渲染的目标对象（table中id的值）
        ,
        url : 'resourse/json/person.json' //数据接口（json的数据的获取）
        ,
        title : '数据表格' //数据表格的标题
        ,
        page : true //开启分页
        ,
        toolbar : '#userToolBar'//表格的工具条
        ,
        defaultToolbar : [ 'filter', 'print', 'exports' ],
        cols : [ [ //表头
        {
          type : 'checkbox',
          fixed : 'left'
        } //表格的复选框 LAY_CHECKED 表示是否选中了复选框
        , {
          type : 'numbers'
        } //表格的数据配列
        , {
          field : 'id',
          title : 'ID',
          sort : true //sort 是否排序布尔值
        } 
        , {
          field : 'username',
          title : '用户名'
        }, {
          field : 'sex',
          title : '性别'
        }, {
          field : 'city',
          title : '城市',
          edit : true
        }, {
          fixed : 'right',
          title : '操作',
          toolbar : '#userBar',
          width : 200,
          align : 'center'
        } ] ]
      });

3.3 layui的表格中的监听事件

​3.3.1头部工具栏​

input中的id要与表单中的id值一致。
lay-verify="required"验证输入的类型 例如邮件则是lay-verify="required|Emile"
lay-submit=''用于验证输入的值是否为空，若为空则提醒用户输入
头部工具的事件要事先在script中定义好
  var tableIns=table.render({
        elem : '#userTable' //渲染的目标对象
        ,
        url : 'resourse/json/person.json' //数据接口
        ,
        title : '数据表格' //数据表格的标题
        ,
        page : true //开启分页
        ,
        toolbar : '#userToolBar'//表格的工具条
        ,
        defaultToolbar : [ 'filter', 'print', 'exports' ],

<fieldset class="layui-elem-field layui-field-title"
    style="margin-top: 20px">
    <legend>查询条件</legend>
    <form class="layui-form" action="" method="post">
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="id" placeholder="请输入标题"
              autocomplete="off" class="layui-input">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入标题"
              autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
          <button
            class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search"
            id="doSearch">查询</button>
          <button type="reset"
            class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
            lay-filter="submit">重置</button>
        </div>
      </div>
    </form>
  </fieldset>

//监听头部事件

var tableTns = table.on("toolbar(userTable)", function(obj) {
        switch (obj.event) {
        case 'add':
          openAddUser(); //对应的事件
          break;
        case 'delete':
          layer.msg('删除');
          break;
        case 'update':
          layer.msg('编辑');
          break;
        };
      });

​3.3.2工具条监听事件​

工具条中的选项在div中样式中要写style="display: none;"
按钮的类型以及大小
layui-btn-lg大型
layui-btn-sm小型
layui-btn-xs迷你型
layui-btn-warm暖型
layui-btn-danger警告类型
在表格数据中添加
{fixed:'right',title:'操作',toolbar:'#userBar',width:170,align:'center'}

<div id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
     <a class="layui-btn layui-btn-xs" lay-event="del">删除</a> 
     <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="update">修改</a>
  </div>

table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    if(layEvent === 'edit'){ //查看
      layer.msg("修改")
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'update'){ //编辑
       layer.msg("修改")
    }
  });

3.4 layui的表格中弹出层

<div style="display: none; padding: 20px;" id="saveOrupdate">
    <form action="" class="layui-form" lay-filter="dateFrm" id="dateFrm">
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="id" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="男" checked="checked">
            <input type="radio" name="sex" value="女" title="女">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <input type="text" name="city" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
          <button
            class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
            lay-filter="doSubmit">提交</button>
            <!-- lay-submit=''判断提交的form表单是否为空 -->
          <button type="reset"
            class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
            lay-filter="submit">重置</button>
        </div>
      </div>
    </form>
  </div>

openAddUser在监听事件中写的方法
content:$("#saveOrupdate")中注意必须要在layui的script中定义jquery
修改的弹出层中方法中的data值为传值
success:function(index){
            form.val('dateFrm',data); 
            url='date/update/updateUser';
          }
成功回调后把值放到弹出层的input中，dateFrm为绑定的事件。

var url;
      var mainIndex;
      //弹出层方法 添加页面
      function openAddUser() {
        mainIndex=layer.open({
          type:1,
          title:'添加用户',
          content:$("#saveOrupdate"),
          area:['700px','300px'],
          success:function(index){
            //清空数据表格
            $('#dateFrm')[0].reset();
            url='da  ta/add/addUser';
          }
        })
      }
      //保存
      form.on("submit(doSubmit)",function(obj){
        //序列化表单数据
        var param=$('#dateFrm').serialize();
        alert(param);
        $.post(url,param,function(obj){
          layer.msg("成功");
          //关闭弹出层
          layer.close(mainIndex);
          //刷新数据表格
          ltableIns.reload(); //回调表格数据
        })
        
      })
      //弹出层方法 修改页面
      function openUpdateUser(data) {
          mainIndex=layer.open({ 
          type:1,
          title:'修改用户',
          content:$("#saveOrupdate"),
          area:['700px','300px'],
          success:function(index){
            form.val('dateFrm',data); 
            url='date/update/updateUser';
          }
        })
      }

3.5 源码的实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table综合案例</title>
<link rel="stylesheet" href="resourse/layui/css/layui.css" media="all">
</head>
<body>
  <!-- 搜索条件 -->
  <fieldset class="layui-elem-field layui-field-title"
    style="margin-top: 20px">
    <legend>查询条件</legend>
    <form class="layui-form" action="" method="post">
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="id" placeholder="请输入标题"
              autocomplete="off" class="layui-input">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入标题"
              autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">开始时间</label>
          <div class="layui-input-inline">
            <input type="text" name="startTime" id="startTime"
              readonly="readonly" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">结束时间</label>
          <!--readonly="readonly"时间选择器  -->
          <div class="layui-input-inline">
            <input type="text" name="endTime" id="endTime" readonly="readonly"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
          <button
            class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search"
            id="doSearch">查询</button>
          <button type="reset"
            class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
            lay-filter="submit">重置</button>
        </div>
      </div>
    </form>
  </fieldset>
  <!-- 搜索结束 -->

  <!-- 数据表格开始 -->
  <div class="layui-btn-container" style="display: none;"
    id="userToolBar">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
  </div>
  <div id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a> <a
      class="layui-btn layui-btn-xs" lay-event="del">删除</a> <a
      class="layui-btn layui-btn-xs layui-btn-danger"  lay-event="update">修改</a>
  </div>
  <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
  <!-- 数据表格结束 -->

  <!-- 添加和修改的弹出层代码-->
  <div style="display: none; padding: 20px;" id="saveOrupdate">
    <form action="" class="layui-form" lay-filter="dateFrm" id="dateFrm">
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">编号</label>
          <div class="layui-input-inline">
            <input type="text" name="id" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-line">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="男" checked="checked">
            <input type="radio" name="sex" value="女" title="女">
            <!-- required lay-verify="required"验证 -->
          </div>
        </div>
        <div class="layui-line">
          <label class="layui-form-label">城市</label>
          <div class="layui-input-inline">
            <input type="text" name="city" lay-verify="required"
              placeholder="请输入标题" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
          <button
            class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
            lay-filter="doSubmit">提交</button>
            <!-- lay-submit=''判断提交的form表单是否为空 -->
          <button type="reset"
            class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
            lay-filter="submit">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 添加和修改的弹出层代码-->
  <script src="resourse/layui/layui.js"></script>
  <script>
    layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
      var $=layui.jquery;
      var table = layui.table;
      var form=layui.form;
      var layer=layui.layer;
      var laydate = layui.laydate;

      //绑定时间选择器
      laydate.render({
        elem : '#startTime'
      })
      laydate.render({
        elem : '#endTime'
      })

      //数据表格
    var tableIns=table.render({
        elem : '#userTable' //渲染的目标对象
        ,
        url : 'resourse/json/person.json' //数据接口
        ,
        title : '数据表格' //数据表格的标题
        ,
        page : true //开启分页
        ,
        toolbar : '#userToolBar'//表格的工具条
        ,
        defaultToolbar : [ 'filter', 'print', 'exports' ],
        cols : [ [ //表头
        {
          type : 'checkbox',
          fixed : 'left'
        } //表格的复选框 LAY_CHECKED 表示是否选中了复选框
        , {
          type : 'numbers'
        } //表格的数据配列
        , {
          field : 'id',
          title : 'ID',
          sort : true
        } //sort 是否排序布尔值
        , {
          field : 'username',
          title : '用户名'
        }, {
          field : 'sex',
          title : '性别'
        }, {
          field : 'city',
          title : '城市',
          edit : true
        }, {
          fixed : 'right',
          title : '操作',
          toolbar : '#userBar',
          width : 200,
          align : 'center'
        } ] ]
      });
      //监听头部事件
      var tableTns = table.on("toolbar(userTable)", function(obj) {
        switch (obj.event) {
        case 'add':
          openAddUser();
          break;
        case 'delete':
          layer.msg('删除');
          break;
        case 'update':
          layer.msg('编辑');
          break;
        };
      });
      //工具条事件
      table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent === 'edit') { //查看
          layer.msg("修改")
        } else if (layEvent === 'del') { //删除
          layer.confirm('真的删除行么', function(index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
          });
        } else if (layEvent === 'update') { //编辑
          openUpdateUser(data);
            console.log(data);
        }
      });
      
      var url;
      var mainIndex;
      //弹出层方法 添加页面
      function openAddUser() {
        mainIndex=layer.open({
          type:1,
          title:'添加用户',
          content:$("#saveOrupdate"),
          area:['700px','300px'],
          success:function(index){
            //清空数据表格
            $('#dateFrm')[0].reset();
            url='da  ta/add/addUser';
          }
        })
      }
      //保存
      form.on("submit(doSubmit)",function(obj){
        //序列化表单数据
        var param=$('#dateFrm').serialize();
        alert(param);
        $.post(url,param,function(obj){
          layer.msg("成功");
          //关闭弹出层
          layer.close(mainIndex);
          //刷新数据表格
          ltableIns.reload(); //回调表格数据
        })
        
      })
      //弹出层方法 修改页面
      function openUpdateUser(data) {
          mainIndex=layer.open({ 
          type:1,
          title:'修改用户',
          content:$("#saveOrupdate"),
          area:['700px','300px'],
          success:function(index){
            form.val('dateFrm',data); 
            url='date/update/updateUser';
          }
        })
      }

    });
  </script>
</body>
</html>

好了，今天的分享就到这里了，点赞支持一下吧