layui实现table表格的增删改查

layui实现表格的增删改查

效果如下：

官网:https://www.layui.com/demo/

引入

  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="./layui/layui/css/layui.css">
  <script src='./layui/layui/layui.js'></script>

样式：

body {
      margin: 10px;
    }

    .demo-carousel {
      height: 200px;
      line-height: 200px;
      text-align: center;
    }

html

 <table class="layui-hide" id="demo" lay-filter="test"></table>

  <script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

js

 layui.config({
      version: '1605714374741' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
      var laydate = layui.laydate //日期
        ,
        laypage = layui.laypage //分页
        ,
        layer = layui.layer //弹层
        ,
        table = layui.table //表格
        ,
        carousel = layui.carousel //轮播
        ,
        upload = layui.upload //上传
        ,
        element = layui.element //元素操作
        ,
        slider = layui.slider //滑块

      //向世界问个好
      layer.msg('欢迎');

      //监听Tab切换
      element.on('tab(demo)', function (data) {
        layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
          tips: 1
        });
      });

      //执行一个 table 实例
      var url =""//查询接口

      table.render({
        elem: '#demo',
        height: 420,
        url: url,
        initSort: {
			field: 'createtime', //排序字段，对应 cols 设定的各字段名
			type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
    },
    where: {
			"sort": "createtime",
			"order": "desc",
		},
        title: '用户表',
        id: 'listReload',
        page: true //开启分页
          ,
        response: {
          statusName: 'code' //规定数据状态的字段名称，默认：code
            ,
          statusCode: 200 //规定成功的状态码，默认：0
            /*,msgName: 'hint'*/ //规定状态信息的字段名称，默认：msg*/
            ,
          countName: 'total' //规定数据总数的字段名称，默认：count
            ,
          dataName: 'results' //规定数据列表的字段名称，默认：data
        },
        request: {
          pageName: 'page.pn', //页码的参数名称，默认：page
          limitName: 'page.size' //每页数据量的参数名，默认：limit

        },
        toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
          ,
        totalRow: true //开启合计行
          ,
        cols: [
          [ //表头
            {
              type: 'checkbox',
              fixed: 'left'
            }, {
              field: 'id',
              title: 'ID',
              sort: true,
              fixed: 'left',
              totalRowText: '合计：'
            }, {
              field: 'title',
              title: '标题',
              width: 150
            }, {
              field: 'createtime',
              title: '创建时间',
              sort: true
            }
            // ,{field: 'updateDate', title: '更新时间', width: 120, sort: true, totalRow: true}
            , {
              field: 'author',
              title: '作者',
            }, {
              fixed: 'right',
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ]
      });
      //监听排序事件 
      table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        console.log(obj.field); //当前排序的字段名
        console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('listReload', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            ,
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            sort: obj.field //排序字段
              ,
            order: obj.type //排序方式
          }
        });
      });



      //监听头工具栏事件
      table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id),
          data = checkStatus.data; //获取选中的数据
        // ,data = obj.data 
        switch (obj.event) {
          case 'add':
            // layer.msg('添加');
            layer.open({
              type: 2,
              area: ["100%", "100%"],
              title: "添加",
              shadeClose: true,
              cellMinWidth: 80,
              content: ['write.html', 'auto'], //跳转write页面即表单增加页面，详情查看之前博        
                        客，no代表不显示滚动条
              end: function () {//关闭iframe刷新页面
                location.reload()
              },
              success: function () {}
            });
            break;
          case 'update':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else if (data.length > 1) {
              layer.msg('只能同时编辑一个');
            } else {
              layer.open({
                type: 2,
                area: ["100%", "100%"],
                title: "编辑",
                shadeClose: true,
                cellMinWidth: 80,
                content: 'update.html?id=' + data[0].id, //跳转update页面，和write.html一样，但是update.html多调用了数据查询的接口，no代表不显示滚动条
                end: function () {
                  location.reload()
                },
                success: function () {

                }
              });

            }
            break;
          case 'delete':
            if (data.length === 0) {
              layer.msg('请选择一行');
            } else {
              layer.msg('删除');
              console.log(data);

              layer.confirm('真的删除行么', function (index) {
                console.log(data[0].id);

                $.ajax({
                  type: 'post',
                  url: 'http://admin/cms/cmsarticle/' + data[0].id +
                    '/delete',//调用删除接口，将选中行的id传给后端
                  success: function (data) {
                    if (data.ret == "0") {
                      layer.msg('删除成功');
                      layer.closeAll();
                      location.replace("index.html")

                    }
                  }
                });
              });
            }
            break;
        };
      });

      //监听行工具事件
      table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
          ,
          layEvent = obj.event; //获得 lay-event 对应的值

        if (layEvent === 'detail') {
          layer.msg('查看操作');
        } else if (layEvent === 'del') {
          layer.confirm('真的删除行么', function (index) {
            console.log(data.id);

            $.ajax({
              type: 'post',
              url: 'http://admin/cms/cmsarticle/' + data.id + '/delete',
              success: function (data) {
                if (data.ret == "0") {
                  obj.del();
                  layer.msg('删除成功');
                  layer.closeAll();
                }
              }
            });
          });
        } else if (layEvent === 'edit') {
          layer.msg('编辑操作');
          layer.open({
            type: 2,
            area: ["100%", "100%"],
            title: "编辑",
            shadeClose: true,
            cellMinWidth: 80,
            content: 'update.html?id=' + obj.data.id, //iframe的url，no代表不显示滚动条
            end: function () {
              location.reload()
            },                           
            success: function () {
              console.log(obj.data);

            
            }
          });

        }
      });

      //分页
      laypage.render({
        elem: 'pageDemo' //分页容器的id
          ,
        count: 100 //总页数
          ,
        skin: '#1E9FFF' //自定义选中色值
          //,skip: true //开启跳页
          ,
        jump: function (obj, first) {
          if (!first) {
            layer.msg('第' + obj.curr + '页', {
              offset: 'b'
            });
          }
        }
      });

   


    });

查询接口：sort按照什么排序，order排序方式，page.pn当前页数，page.size一页显示几条

详情接口：携带当前行的id，返回数据

删除接口