Layui实现二级数据表格

qq_57398284

已于 2022-03-12 00:12:00 修改

阅读量3.1k

点赞数 6

文章标签： layui javascript elementui

于 2022-03-12 00:10:12 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57398284/article/details/123436599

版权

本文档展示了如何使用Layui框架来创建一个包含学院宿舍资源分配信息的表格，并实现数据的查询功能。表格通过指定id和lay-filter进行标识，配置了请求数据接口、分页、默认工具栏和自定义查询。JavaScript部分定义了查询提交事件，通过form提交触发查询。后端使用Java Spring MVC和MyBatis进行数据处理，提供查询接口，返回分页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html代码

详细参考layui官网文档

注意 table标签的id 和lay-filter 必须填写后面做查询要用到

url 请求数据接口

https://layui.itze.cn/doc/modules/table.html#parseTablela

  <table id="datagrid" lay-filter="datagrid" class="layui-table"
               lay-data="{
                id:'exportTable',
                title: '学校宿舍资源分配信息',
                height:315,
                request: {pageName: 'current', limitName: 'size'},
                url:'/dorm/allot/page',
                page:true,toolbar: '#datagrid-toolbar',
                defaultToolbar: [{layEvent: 'refresh', icon: 'layui-icon-refresh'}],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10}"
              >
            <thead>
            <tr>
                <th lay-data="{type: 'checkbox',rowspan: 2}"></th>
                <th lay-data="{field:'yx', width: 200,rowspan: 2,align: 'center'}">学院名称</th>
                <th lay-data="{width: 200,colspan: 2,align: 'center'}">学院人数</th>
                <th lay-data="{width: 200,colspan: 2,align: 'center'}">已分配人数</th>
                <th lay-data="{colspan: 2,align:'center'}">未分配人数</th>
                <th lay-data="{field:'',rowspan: 2,align:'center'}">操作</th>
                <th lay-data="{field:'',rowspan: 2,align:'center'}">状态</th>
             </tr>
            <tr>
                <th lay-data="{field:'man'}">男</th>
                <th lay-data="{field:'woman'}">女</th>
                <th lay-data="{field:'manacd'}">男</th>
                <th lay-data="{field:'womanacd'}">女</th>
                <th lay-data="{field:'mannacd'}">男</th>
                <th lay-data="{field:'womannacd'}">女</th>
            </tr>
            </thead>
        </table>

2.js代码 (不做查询可不要)

 form.on('submit(datagrid-query)', function(data) {
            table.reload('datagrid', {
                page: {curr: 1},
                where : {
                    // 查询条件传值
                    xqdm : $('#xqdm').val(),
                    ssqdm : $('#ssqdm').val(),
                    sslmc : $('#sslmc').val()
                }
            },'data')
            return false;
        });

3.java代码

controller

package vip.jzbao.dhu.pc.controller.dorm;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import vip.jzbao.dhu.common.dto.LayuiGrid;
import vip.jzbao.dhu.common.student.dto.StudentRoomAllotDto;
import vip.jzbao.dhu.common.student.service.IStudentRoomCarefulService;
import java.util.List;

/**
 * 学院宿舍资源分配情况
 */
@Controller
@RequestMapping("/dorm/allot")
@PreAuthorize("hasAuthority('dorm:allot')")
public class AllotController {

    @Autowired
    private IStudentRoomCarefulService studentRoomCarefulService;

    @GetMapping("/list")
    public void list() {
    }

    @GetMapping("/add")
    public void add() {

    }

    @PostMapping("/queryList")
    @ResponseBody
    public List<StudentRoomAllotDto> queryList() {
        return studentRoomCarefulService.queryList();
    }

    @ResponseBody
    @RequestMapping("/page")
    public LayuiGrid selectPage(Page<StudentRoomAllotDto> page) {
        Page<StudentRoomAllotDto> pages = studentRoomCarefulService.selectStudentRoomAllot(page);
        return new LayuiGrid(pages);
    }

}

service

package vip.jzbao.dhu.common.student.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import vip.jzbao.dhu.common.student.dto.StudentNewDormDto;
import vip.jzbao.dhu.common.student.dto.StudentRoomAllotDto;
import vip.jzbao.dhu.common.student.entity.StudentRoomCareful;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

/**
 * <p>
 *  服务类
 * </p>
 *
 * @author 唐小恕
 * @since 2022-03-04
 */
public interface IStudentRoomCarefulService extends IService<StudentRoomCareful> {
    /**
     * 新生住宿信息
     * @param page
     * @return
     */
    Page<StudentNewDormDto> selectStudentNewDorm(Page<StudentNewDormDto> page);

    /**
     * 查询学生宿舍分配
     * @param page
     * @return
     */
    Page<StudentRoomAllotDto> selectStudentRoomAllot(Page<StudentRoomAllotDto> page);

    List<StudentRoomAllotDto> queryList();

    /**
     * 新生住宿情况 导出
     * @return
     */
    List<StudentNewDormDto> queryNewList();
}

serviceImpl

package vip.jzbao.dhu.pc.controller.dorm;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import vip.jzbao.dhu.common.dto.LayuiGrid;
import vip.jzbao.dhu.common.student.dto.StudentRoomAllotDto;
import vip.jzbao.dhu.common.student.service.IStudentRoomCarefulService;
import java.util.List;

/**
 * 学院宿舍资源分配情况
 */
@Controller
@RequestMapping("/dorm/allot")
@PreAuthorize("hasAuthority('dorm:allot')")
public class AllotController {

    @Autowired
    private IStudentRoomCarefulService studentRoomCarefulService;

    @GetMapping("/list")
    public void list() {
    }

    @GetMapping("/add")
    public void add() {

    }

    @PostMapping("/queryList")
    @ResponseBody
    public List<StudentRoomAllotDto> queryList() {
        return studentRoomCarefulService.queryList();
    }

    @ResponseBody
    @RequestMapping("/page")
    public LayuiGrid selectPage(Page<StudentRoomAllotDto> page) {
        Page<StudentRoomAllotDto> pages = studentRoomCarefulService.selectStudentRoomAllot(page);
        return new LayuiGrid(pages);
    }

}

mapper

package vip.jzbao.dhu.common.student.mapper;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.apache.ibatis.annotations.Results;
import org.apache.ibatis.annotations.Select;
import vip.jzbao.dhu.common.student.dto.StudentNewDormDto;
import vip.jzbao.dhu.common.student.dto.StudentRoomAllotDto;
import vip.jzbao.dhu.common.student.entity.StudentRoomCareful;
import org.apache.ibatis.annotations.Mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

import java.util.List;

/**
 * <p>
 *  Mapper 接口
 * </p>
 *
 * @author 唐小恕
 * @since 2022-03-04
 */
@Mapper
public interface StudentRoomCarefulMapper extends BaseMapper<StudentRoomCareful> {
    @Select("select  c.fprq , c.xq,c.ssl,c.lc,c.fjh,s.cwh,c.xh,c.xm,c.pycc,c.yx,c.zy,c.bj,c.stay " +
            "from student_room_careful  c left join student_stay s  on  c.xsbh = s.xsbh")
    Page<StudentNewDormDto> selectStudentNewDorm(Page<StudentNewDormDto> page);

  @Select("SELECT\n" +
          "yx,\n" +
          "COUNT( CASE WHEN XB = '男' THEN '男' END ) MAN,\n" +
          "count( CASE WHEN xb = '女' THEN '女' END ) woman,\n" +
          "COUNT( CASE WHEN stay = '1' AND XB = '男' THEN '1' END ) manacd,\n" +
          "COUNT( CASE WHEN stay = '1' AND XB = '女' THEN '1' END ) womanacd,\n" +
          "COUNT( CASE WHEN stay = '0' AND XB = '男' THEN '0' END ) mannacd,\n" +
          "COUNT( CASE WHEN stay = '0' AND XB = '女' THEN '0' END ) womannacd \n" +
          "FROM\n" +
          "student_room_careful \n" +
          "GROUP BY\n" +
          "yx")
    Page<StudentRoomAllotDto> selectStudentRoomAllot(Page<StudentRoomAllotDto> page);
    @Select("SELECT\n" +
            "yx,\n" +
            "COUNT( CASE WHEN XB = '男' THEN '男' END ) MAN,\n" +
            "count( CASE WHEN xb = '女' THEN '女' END ) woman,\n" +
            "COUNT( CASE WHEN stay = '1' AND XB = '男' THEN '1' END ) manacd,\n" +
            "COUNT( CASE WHEN stay = '1' AND XB = '女' THEN '1' END ) womanacd,\n" +
            "COUNT( CASE WHEN stay = '0' AND XB = '男' THEN '0' END ) mannacd,\n" +
            "COUNT( CASE WHEN stay = '0' AND XB = '女' THEN '0' END ) womannacd \n" +
            "FROM\n" +
            "student_room_careful \n" +
            "GROUP BY\n" +
            "yx")
    List<StudentRoomAllotDto> queryList();
    @Select("select  c.fprq , c.xq,c.ssl,c.lc,c.fjh,s.cwh,c.xh,c.xm,c.pycc,c.yx,c.zy,c.bj,c.stay " +
            "from student_room_careful  c left join student_stay s  on  c.xsbh = s.xsbh")
    List<StudentNewDormDto> queryNewList();
}