springboot的layui数据表格的使用

2023-10-04 20:17:46

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;
  }

码农公寓

相关文章