layui之table.render使用(含后台详细代码实现)

最新推荐文章于 2025-04-08 14:34:44 发布

weixin_38168696

最新推荐文章于 2025-04-08 14:34:44 发布

阅读量2.4w

点赞数 2

文章标签： javascript java json ViewUI

原文链接：http://www.cnblogs.com/youcong/p/11342366.html

版权

本文介绍了一个使用LayUI实现的前端数据表格案例，包括代码示例和后端分页逻辑。展示了如何配置表格样式、工具栏事件、行工具事件，并详细解释了后端接口的实现，包括控制层、Service、DAO层和实体类的设计。

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

效果图如下:

前端实现代码如图(完整代码):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>开启头部工具栏</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">开启头部工具栏</div>
          <div class="layui-card-body">
            <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
            
            <script type="text/html" id="test-table-toolbar-toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
              </div>
            </script>
             
            <script type="text/html" id="test-table-toolbar-barDemo">
              <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>
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="../../layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var admin = layui.admin
    ,table = layui.table;
  
    table.render({
      elem: '#test-table-toolbar'
       ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userId=youcongtech"
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,title: '程序设计题绑定'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'problemId', width:300, title: 'ID', sort: true}
        ,{field:'title', width:400, title: '题目'}
        ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-barDemo'}
      ]]
      ,page: true
    });
    
    //头工具栏事件
    table.on('toolbar(test-table-toolbar)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
        break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
        break;
      };
    });
    
    //监听行工具事件
    table.on('tool(test-table-toolbar)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        layer.prompt({
          formType: 2
          ,value: data.email
        }, function(value, index){
          obj.update({
            email: value
          });
          layer.close(index);
        });
      }
    });
  
  });
  </script>
</body>
</html>

核心js代码如下:

table.render({
   elem: '#test-table-toolbar'
 ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userId=youcongtech"
   ,toolbar: '#test-table-toolbar-toolbarDemo'
   ,title: '程序设计题绑定'
,cols: [[
  {type: 'checkbox', fixed: 'left'},
     {field:'problemId', width:300, title: 'ID', sort: true}
     ,{field:'title', width:400, title: '题目'}
     ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-barDemo'}
   ]]
   ,page: true
 });

要求后台返回数据格式必须为:

{
  "msg": "success",
  "code": "0",
  "data": [
    {
      "title": "for循环输出",
      "problemId": 1139
    },
    {
      "title": "测试2",
      "problemId": 1138
    },
    {
      "title": "测试1",
      "problemId": 1137
    },
    {
      "title": "for循环-Plus",
      "problemId": 1140
    },
    {
      "title": "第一个C++程序",
      "problemId": 1141
    }
  ]
}

不然的话，会出现相关提示(如code对于的值必须为0，而不能为000000，以及data对应数据必须像上面这样的，不然cols里面不好自动对应上。

后台实现代码如下:
控制层代码(路由)

@GetMapping("/page_list")
@ApiOperation(value="根据用户ID获取题目分页列表",httpMethod="GET",notes="根据用户ID获取题目分页列表")
public JSONObject page_list(@RequestParam String userId, @RequestParam (value="page") String pageno, @RequestParam (value="limit") String pagesize) {
    
    System.out.println("userId:"+userId+"|| pageno:"+pageno+"||pagesize:"+pagesize);
    
    JSONObject json = new JSONObject();
    
    //当前页
    Integer page = Integer.parseInt(pageno.trim());
    //每页的数量
    Integer size = Integer.parseInt(pagesize.trim());

    Map<String, Object> paramMap = new HashMap<>();
    paramMap.put("userId", userId);
    paramMap.put("start", (page - 1) * size);  //当前页的数量
    paramMap.put("size", size);  //当前页
    
    List<Problem> problemList = problemService.getProblemPageListInfo(paramMap);
     
    int count =problemService.getProblemPageTotalCount(paramMap);

    if(!problemList.isEmpty()) {

        json.put("msg", "success");
        json.put("code", "0");
        json.put("data", problemList);
        json.put("count", count);
        
    }else {
        
        json.put(CommonEnum.RETURN_MSG, "error");
        json.put(CommonEnum.RETURN_CODE, "222222");
    }
    
    return json;

}

Service及其实现类:
Service:

public interface ProblemService extends IService<Problem> {

    

    List<Problem> getProblemPageListInfo(Map<String,Object> paramMap);
    

    Integer getProblemPageTotalCount(Map<String,Object> paramMap);

}

Service实现类:

@Service
public class ProblemServiceImpl extends ServiceImpl<ProblemDao, Problem> implements ProblemService {

    @Autowired
    private ProblemDao problemDao;
    


    @Override
    public List<Problem> getProblemPageListInfo(Map<String, Object> paramMap) {

        return problemDao.getProblemPageListInfo(paramMap);
    }

    @Override
    public Integer getProblemPageTotalCount(Map<String, Object> paramMap) {

        return problemDao.getProblemPageTotalCount(paramMap);
    }

}

ProblemDao.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.test.sass.mapper.ProblemDao">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.test.sass.entity.Problem">
        <id column="problem_id" property="problemId" />
        <result column="title" property="title" />
        <result column="description" property="description" />
        <result column="input" property="input" />
        <result column="output" property="output" />
        <result column="sample_input" property="sampleInput" />
        <result column="sample_output" property="sampleOutput" />
        <result column="spj" property="spj" />
        <result column="hint" property="hint" />
        <result column="source" property="source" />
        <result column="in_date" property="inDate" />
        <result column="time_limit" property="timeLimit" />
        <result column="memory_limit" property="memoryLimit" />
        <result column="defunct" property="defunct" />
        <result column="accepted" property="accepted" />
        <result column="submit" property="submit" />
        <result column="solved" property="solved" />


        <result column="p_ladder_level" property="pLadderLevel" />
        <result column="p_ladder_type" property="pLadderType" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        problem_id AS problemId, title, description, input, output, sample_input AS
        sampleInput, sample_output AS sampleOutput, spj, hint, source, in_date
        AS inDate, time_limit AS timeLimit, memory_limit AS memoryLimit,
        defunct, accepted, submit, solved
    </sql>


    <select id="getProblemPageListInfo" resultMap="BaseResultMap">
    SELECT DISTINCT problem.problem_id,problem.title FROM privilege AS p LEFT JOIN
        problem ON( REPLACE(p.rightstr,'p','') = problem.problem_id) WHERE
        p.user_id =#{userId} AND problem.problem_id !=0 AND p.rightstr !=
        'problem_editor' AND p.rightstr != 'contenst_creator' limit #{start},#{size}
    </select>

    <select id="getProblemPageTotalCount" resultType="Integer">
        SELECT COUNT(DISTINCT problem.problem_id) FROM privilege AS p LEFT JOIN
        problem ON( REPLACE(p.rightstr,'p','') = problem.problem_id) WHERE
        p.user_id =#{userId} AND problem.problem_id !=0 AND p.rightstr !=
        'problem_editor' AND p.rightstr != 'contenst_creator' 
    </select>
</mapper>

实体类:

public class Problem extends Model<Problem> {

    private static final long serialVersionUID = 1L;

    @TableId(value = "problem_id", type = IdType.AUTO)
    private Integer problemId;
    private String title;
    private String description;
    private String input;
    private String output;
    @TableField("sample_input")
    private String sampleInput;
    @TableField("sample_output")
    private String sampleOutput;
    private String spj;
    private String hint;
    private String source;
    @TableField("in_date")
    private String inDate;
    @TableField("time_limit")
    private String timeLimit;
    @TableField("memory_limit")
    private String memoryLimit;
    private String defunct;
    private Integer accepted;
    private Integer submit;
    private Integer solved;
    
    @TableField(exist=false)
    private String pLadderLevel;
    
    @TableField(exist=false)
    private String pLadderType;

    

    public Integer getProblemId() {
        return problemId;
    }

    public void setProblemId(Integer problemId) {
        this.problemId = problemId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getInput() {
        return input;
    }

    public void setInput(String input) {
        this.input = input;
    }

    public String getOutput() {
        return output;
    }

    public void setOutput(String output) {
        this.output = output;
    }

    public String getSampleInput() {
        return sampleInput;
    }

    public void setSampleInput(String sampleInput) {
        this.sampleInput = sampleInput;
    }

    public String getSampleOutput() {
        return sampleOutput;
    }

    public void setSampleOutput(String sampleOutput) {
        this.sampleOutput = sampleOutput;
    }

    public String getSpj() {
        return spj;
    }

    public void setSpj(String spj) {
        this.spj = spj;
    }

    public String getHint() {
        return hint;
    }

    public void setHint(String hint) {
        this.hint = hint;
    }

    public String getSource() {
        return source;
    }

    public void setSource(String source) {
        this.source = source;
    }

    public String getInDate() {
        return inDate;
    }

    public void setInDate(String inDate) {
        this.inDate = inDate;
    }

    public String getTimeLimit() {
        return timeLimit;
    }

    public void setTimeLimit(String timeLimit) {
        this.timeLimit = timeLimit;
    }

    public String getMemoryLimit() {
        return memoryLimit;
    }

    public void setMemoryLimit(String memoryLimit) {
        this.memoryLimit = memoryLimit;
    }

    public String getDefunct() {
        return defunct;
    }

    public void setDefunct(String defunct) {
        this.defunct = defunct;
    }

    public Integer getAccepted() {
        return accepted;
    }

    public void setAccepted(Integer accepted) {
        this.accepted = accepted;
    }

    public Integer getSubmit() {
        return submit;
    }

    public void setSubmit(Integer submit) {
        this.submit = submit;
    }

    public Integer getSolved() {
        return solved;
    }

    public void setSolved(Integer solved) {
        this.solved = solved;
    }

    
    
    public String getpLadderLevel() {
        return pLadderLevel;
    }

    public void setpLadderLevel(String pLadderLevel) {
        this.pLadderLevel = pLadderLevel;
    }

    public String getpLadderType() {
        return pLadderType;
    }

    public void setpLadderType(String pLadderType) {
        this.pLadderType = pLadderType;
    }

    @Override
    protected Serializable pkVal() {
        return this.problemId;
    }

    @Override
    public String toString() {
        return "Problem [problemId=" + problemId + ", title=" + title + ", description=" + description + ", input="
                + input + ", output=" + output + ", sampleInput=" + sampleInput + ", sampleOutput=" + sampleOutput
                + ", spj=" + spj + ", hint=" + hint + ", source=" + source + ", inDate=" + inDate + ", timeLimit="
                + timeLimit + ", memoryLimit=" + memoryLimit + ", defunct=" + defunct + ", accepted=" + accepted
                + ", submit=" + submit + ", solved=" + solved + ", pLadderLevel=" + pLadderLevel + ", pLadderType="
                + pLadderType + "]";
    }
}

转载于:https://www.cnblogs.com/youcong/p/11342366.html