[JavaScript知识库] springboot的layui数据表格的使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> springboot的layui数据表格的使用 -> 正文阅读

[JavaScript知识库]springboot的layui数据表格的使用

HTML层

html的头部要添加上<html lang="en" xmlns:th="http://www.thymeleaf.org">

<link rel="stylesheet" href="/layui/css/layui.css">
 <table id="changshang" lay-filter="changshang" style="width: 100%"></table>
 <script src="/layui/layui.all.js" type="text/javascript"></script>

**<script th:inline="none" type="text/javascript">**
  var changshang;
  var layer;
  var layuiTable, table;

  $(function () {
    layui.use(['layer', 'table'], function () {
      layer = layui.layer;
      layuiTable = layui.table;//
      changshang = layuiTable.render({
        elem: '#changshang',//html table id
        url: "/changshangchaxun",//数据接口
        cols: [[ //表头
          {type: 'radio', fixed: 'left', title: '选择', align: 'center', width: 10, hide: true},//单选框列,fixed:'left' 将列固定在左边
          {type: 'numbers', title: '序号', align: 'center', width: 100},//序号列，title设定标题名称
           {field: 'comanyid', title: 'comanyid', sort: false, fixed: 'left', hide: true}
          , {field: 'codingcs', title: '编码', width: 140, align: 'center'}
          , {field: 'comanyname', title: '厂商名称', align: 'center', sort: true}
          , {field: 'production', title: '生产标记', align: 'center'}
          , {field: 'dealerbiaoshi', title: '经销商标记', align: 'center'}
          , {field: 'settlementmarkers', title: '结算方式', align: 'center'}
          , {field: 'worktelephone', title: '单位电话', align: 'center'}
          , {field: 'woekdizi', title: '单位地址', align: 'center'}
          , {field: 'mailbox', title: '邮箱', align: 'center'}
          , {field: 'csstate', title: '状态', align: 'center', sort: true}
          , {title: '操作', templet: setOperates, align: "center",}
        ]],
        page: {
          limit: 5,//指定每页显示的条数
          limits: [5, 10, 15],//每页条数的选择项
        }, //开启分页
        data: [],
        toolbar: true,
        toolbar: "#ksla4",
      });
      layuiTable.on('row(changshang)', function (obj) {
        var data = obj.data;//获取点击行数据
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();
        $("#comanyidhj").val(data.comanyid);

      });
    });
  })

  /*操作按钮*/
  function setOperates(data) {
    var comanyid = data.comanyid;
    /*console.log(yitableid + "dgdgd");*/
    var btn = "";
    btn += '<button class="layui-btn layui-btn-xs layui-btn-green" οnclick="Editor(' + comanyid + ')">修改</button>'
    btn += '<button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="Deletel(' + comanyid + ')">删除</button>'
    return btn;
  }

第一种要导的包


<!--mybatis-plus-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.4.0</version>
    </dependency>
    <!-- 代码生成-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-generator</artifactId>
      <version>3.4.0</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>

要配置config的分页配置

package com.zhang.config;

import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @author zhang
 * @create 2021/9/16
 */
@Configuration
@MapperScan("com.zhang.mapper")//开启扫描mapper
public class MybatisPlusConfig {
  @Bean
  public MybatisPlusInterceptor mybatisPlusInterceptor() {

    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    //分页插件
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
    //防止全表更新插件
    interceptor.addInnerInterceptor(new BlockAttackInnerInterceptor());

    return interceptor;

  }
}

第二种要导的包

<!--mybatis-plus-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.4.0</version>
    </dependency>
  <!-- 分页 -->
    <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.8</version>
    </dependency>

Mapper层

第一种

 @Select({"<script>", "SELECT * FROM yyerjitable", "WHERE 1=1",
          "<when test='yitableid !=null'>",
          "AND yitableid like concat('%',#{yitableid},'%') ",
          "</when>",
          "<when test='fenleinuber !=null'>",
          "AND fenleinuber like concat('%',#{fenleinuber},'%') ",
          "</when>",
          "<when test='fenleiname !=null'>",
          "AND fenleiname like concat('%',#{fenleiname},'%') ",
          "</when>",
          "</script>"})
  IPage<Yyerjitable> selectAll(Page<Yyerjitable> page, Object o, @Param("yitableid") Integer yitableid, @Param("fenleiname") String fenleiname, @Param("fenleinuber") String fenleinuber);

service层

  LinkedHashMap<String, Object> Sousuochjj(int page, int limit, Integer yitableid, String fenleiname, String fenleinuber);

serviceimpl

  /*模糊查询*/
  @Override
  public LinkedHashMap<String, Object> Sousuochjj(int page, int limit, Integer yitableid, String fenleiname, String fenleinuber) {
    QueryWrapper<Yyerjitable> queryWrapper = new QueryWrapper<Yyerjitable>();
    Page<Yyerjitable> pages = new Page<Yyerjitable>(page, limit);
    IPage<Yyerjitable> iPage = yyerjitableMapper.selectAll(pages, queryWrapper, yitableid, fenleiname, fenleinuber);
    List<Yyerjitable> list = iPage.getRecords();
    long count = iPage.getTotal();
    LinkedHashMap<String, Object> linkedHashMap = new LinkedHashMap<String, Object>();
    linkedHashMap.put("code", 0);
    linkedHashMap.put("msg", "");
    linkedHashMap.put("count", count);
    linkedHashMap.put("data", list);
    return linkedHashMap;
  }

控制层

 /*模糊组合查询*/
  @ResponseBody //自动返回json格式的数据
  @RequestMapping(value = "/sougksks", produces = {"application/json;charset=UTF-8"})
  public LinkedHashMap<String, Object> sougksks(int page, int limit, Integer yitableid, String fenleiname, String fenleinuber) {
    return yyerjitableService.Sousuochjj(page, limit, yitableid, fenleiname, fenleinuber);
  }

第二种
mapper层

 @Select("SELECT * FROM yycomany")
  List<Yycomany> changshangchaxun();

service层

public List<Yycomany> changshangchaxun(Integer page, Integer limit);

serviceimpl层、

  @Override
  public List<Yycomany> changshangchaxun(Integer page, Integer limit) {
    PageHelper.startPage(page, limit);//page为申请查询的页码，limit为一页显示多少条数据
    List<Yycomany> yycomanies = yycomanyMapper.changshangchaxun();
    return yycomanies;
  }

控制器

  @ResponseBody
  @RequestMapping(value = "/changshangchaxun", produces = {"application/json;charset=UTF-8"})
  private Map<String, Object> changshangchaxun(Integer page, Integer limit) {
    List<Yycomany> list = yycomanyService.changshangchaxun(page, limit);
    PageInfo<Yycomany> yyyitablePageInfo = new PageInfo<Yycomany>(list);
    Map<String, Object> map = new HashMap<String, Object>();//将数据装换成JSON格式
    List<Yycomany> hk = new ArrayList<Yycomany>();
    for (Yycomany res : list) {
      hk.add(res);
    }
    map.put("code", 0);
    map.put("msg", "操作成功");
    map.put("count", yyyitablePageInfo.getTotal());
    map.put("data", hk);//最最最关键的代码，layui的table会自动获取并显示该数据集
    return map;
  }