zoukankan      html  css  js  c++  java
  • layui表格使用实例

    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', 80, sort: true, fixed: 'left'}
                      ,{field: 'title', title: '标题', 200}
                      ,{field: 'demoNumber', title: '数字', 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;
          }
      
      
      }
      
      
    记得快乐
  • 相关阅读:
    linux内核中的subsys_initcall是干什么的?
    linux内核中的MFD子系统
    linux内核中有哪些子系统(框架)呢?
    软件架构师书籍
    求最大公约数和最小公倍数
    写一个函数判断字符串中"{"与"}","["与"]","("与")"匹配,"{"必须在"}"前面,"["必须在"]"前面,"("必须在")"前面,可以嵌套
    请用程序写出冒泡排序算法,并做相应改进使得排序效率更高
    50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
    js同比例缩放图片
    oracle 10g函数大全--其他函数
  • 原文地址:https://www.cnblogs.com/Y-wee/p/13949350.html
Copyright © 2011-2022 走看看