首页 > 其他 > 详细

layui表格使用实例

时间:2020-11-09 17:54:49      阅读:23      评论:0      收藏:0      [点我收藏+]

layui表格使用实例

1、编写jsp页面

  • 编写jsp页面

    <%--
      Created by IntelliJ IDEA.
      User: cheng
      Date: 2020/11/9
      Time: 14:55
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <meta charset="utf-8">
        <title>table模块快速使用</title>
        <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/layui/css/layui.css" media="all">
    </head>
    <body>
    
    <table id="demo" lay-filter="test"></table>
    
    <script src="${pageContext.servletContext.contextPath}/layui/layui.js"></script>
    <script>
        layui.use(‘table‘, function(){
            var table = layui.table;
    
            //第一个实例
            table.render({
                elem: ‘#demo‘
                ,height: 312
                ,url: ‘${pageContext.servletContext.contextPath}/getData‘ //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: ‘id‘, title: ‘ID‘, width:80, sort: true, fixed: ‘left‘}
                    ,{field: ‘title‘, title: ‘标题‘, width:200}
                    ,{field: ‘demoNumber‘, title: ‘数字‘, width:200, sort: true}
                ]]
            });
    
        });
    </script>
    </body>
    </html>
    
    

2、数据接口

  • 新建controller,实现数据接口,返回json数据格式

    package com.gec.oasys.controller;
    
    import com.gec.oasys.pojo.DemoBean;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @Controller
    public class LayuiTestController {
    
    
        @RequestMapping("/getData")
        @ResponseBody
        public Map<String,Object> getData()
        {
    
            Map<String,Object> mapData=new HashMap<>();
    
            //组装数据
            List<DemoBean> demoBeanList=new ArrayList<>();
            demoBeanList.add(new DemoBean(1,"标题一",10.00));
            demoBeanList.add(new DemoBean(2,"标题一",10.00));
            demoBeanList.add(new DemoBean(2,"标题一",10.00));
            demoBeanList.add(new DemoBean(3,"标题一",10.00));
            demoBeanList.add(new DemoBean(4,"标题一",10.00));
            demoBeanList.add(new DemoBean(5,"标题一",10.00));
            demoBeanList.add(new DemoBean(6,"标题一",10.00));
            demoBeanList.add(new DemoBean(7,"标题一",10.00));
    
    
            mapData.put("data",demoBeanList);
            mapData.put("code","0");
            mapData.put("msg","");
    
    
            return mapData;
        }
    
    
    }
    
    

layui表格使用实例

原文:https://www.cnblogs.com/Y-wee/p/13949350.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!