springboot的layui数据表格的使用

最新推荐文章于 2024-04-01 18:02:53 发布

星空迷途

最新推荐文章于 2024-04-01 18:02:53 发布

阅读量685

点赞数 1

分类专栏： java 文章标签： layui html jquery intellij-idea

本文链接：https://blog.csdn.net/weixin_44540111/article/details/120382029

版权

本文详细介绍了如何在SpringBoot项目中使用Layui实现数据表格的功能。首先在HTML头部引入必要的依赖，包括layui和jQuery库。接着配置了Layui的分页配置。在Mapper层、Service层和服务实现层分别进行了相关操作的展示，最后在控制器层展示了两种不同的实现方式。

摘要由CSDN通过智能技术生成

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