Layui数据表格前后端json数据接收的方法

2024-04-04 16:09:38

先上效果图：

前端数据表格：


 <div class="x-body">
  <%-- 数据表格 --%>
  <table class="layui-table" lay-data="{
   id:'test',
   url:'/menu/page',
   page:true,
   limits: [10,20,50], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]
   limit: 10, //每页默认显示的数量
   method:'post' //提交方式
   }" lay-filter="test">
   <thead>
    <tr>
     <th lay-data="{field:'id', width:80, sort: true}">编号</th>
     <th lay-data="{field:'name'}">菜单名称</th>
     <th lay-data="{field:'url', sort: true}">菜单路径</th>
     <th lay-data="{field:'icon'}">菜单图标</th>
     <th lay-data="{field:'parent'}">菜单</th>
     <th lay-data="{field:'children', sort: true}">子菜单</th>
     <th lay-data="{fixed: 'right', toolbar: '#barDemo', width:250, align:'center'}">操作</th>
    </tr>
   </thead>
  </table>
 </div>

 <%-- 这里可以放CRUD按钮 --%>
 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>

js代码

$(function () {
 //注意：这里是数据表格的加载数据，必须写
 layui.use(['table', 'layer', 'form'], function () {
  var table = layui.table;
  layer = layui.layer;
  form = layui.form;
  //CURD...
 });

});

后端需要返回的json数据格式：

我们可以自己抽一个工具类出来封装成前端需要返回的json数据格式哦

public class PageUtil<T> {

 private int code=0;
 private String msg;
 private Long count; //总条数
 private List<T> data = new ArrayList(); //装前台当前页的数据
 //getter/setter方法...

}

以上这篇Layui数据表格前后端json数据接收的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

解决layui数据表格排序图标被超出的表头挤出去的问题

如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right: 7px; top: 5px; } $('.layui-table-header tr th').each(function(i,ths){ $(this).find('span:first').attr('title',$(this).find('span:first').text()); //
Layui表格行工具事件与数据回填方法

使用Layui数据表格实现行工具事件与Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type="text/html" id="barDemo2"> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="compile">编辑</a> <a class
解决layui数据表格Date日期格式的回显Object的问题

有属性: private Date createtime; 但是回显的时候,显示{ Object object },想要转换成字符串格式显示. layui中显示: 在对应的实体类中添加属性:private String createtimestr; 然后添加对应的set/get方法,但是方法处理的是createtime 但是在Mybatis-plus框架映射时,数据库表里面又没有该字段,获取数据的时候会报异常,unknown field "createtimestr" in table
转换layUI的数据表格中的日期格式方法

转换layUI的数据表格中的日期格式前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da
layui使用表格渲染获取行数据的例子

需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () { // var id = JSON
解决layui轮播图有数据不显示的情况

最近接触了一个项目,要实现一个轮播图的功能,因为是在原有的项目上进行二次开发,项目前端用的是layui框架,楼主是后台方向,没怎么接触过前端,在用layui实现轮播图时,发现异步从后台获取数据,但是轮播图片不显示,显示如下: 用浏览器调试发现,<div carousel-item="">下面已经有几个<div>了,说明是有数据的.那怎么不显示呢?后来发现是在获取数据之前,页面已经初始化了,当然不能显示啦,这是时候需要在获取数据填充html时,回调reload(o
layui异步加载table表中某一列数据的例子

layui中table加载数据时如果数据存放在不同数据表中那样一个请求拼接每行表格数据然后统一返回太慢 //页面加载时请求另一张表的数据 var slotGroup; admin.req({ url: '请求地址' , method: 'POST' , dataType: "json" , async: false , success: function (res) { slotGroup = res.data; console.log(slotGroup) } }); ta
layui使用templet格式化表格数据的方法

增加js /*---------------------格式化时间开始--------------------------*/ //对Date的扩展,将 Date 转化为指定格式的String //月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, //年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) //例子: //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S")
layui-table表复选框勾选的所有行数据获取的例子

项目需求,可以用复选框勾选项目进行提交,如下表 <table class="layui-table" lay-data="{url:'******', id:'test3'}" lay-filter="test3"> <thead> <tr> <th lay-data="{type:'checkbox'}">ID</th> <th lay-data="
Layui数据表格前后端json数据接收的方法

先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量
SpringBoot前后端json数据交互的全过程记录

目录一.参考文献二.勇敢尝试三.最终选择交互方式总结一.参考文献原生Ajax与JQuery Ajax SpringMVC接受JSON参数详解及常见错误总结提交方式为 POST 时, JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象 , 后端用 @RequestParam 或者Servlet 获取参数. JQuery Ajax 以 application/json 上传 JSON字符串, 后端用 @RquestBody
关于前后端json数据的发送与接收详解

前言最近因为笔者后台使用的是flask框架接收和前端使用的是原生的JavaScript和jQuery的ajax发送,能力有限,在此仅写下我开发项目过程中所得,分享出来供大家参考学习,下面话不多说,跟着小编来一起看看详细的介绍: 一.flask中的json数据接收 1.利用flask的request.form.get()方法 Python后台部分代码 from flask import Flask from flask import jsonify from flask import reque
vue+mockjs模拟数据实现前后端分离开发的实例代码

本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回
layui数据表格 table.render 报错的解决方法

一.报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal Server Error, status=500). An error happened during temp
解决Layui数据表格中checkbox位置不居中的方法

1.情景使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,
jQuery动态生成不规则表格(前后端)

一.需求:有这么一张表前四个属性当作联合主键需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行.类似这种: 二.初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面.像这样json.put("activities",activities); 到js页面了,然后就开始蒙蔽了.本来
JavaScript前后端JSON使用方法教程

汇总整理下JSON在JavaScript前后端中的使用方法,包括字符串和JSON对象的互转,JSON数组的遍历,JSON对象key值的获取,JSON内容格式化输出到文件,读取JSON内容文件转化为JSON对象等. 一.JavaScript后端JSON操作方法 1.JavaScript JSON字符串转JSON对象 var testStr = '{"name":"will","age":18,"hobby":"foot
实现SQL Server 原生数据从XML生成JSON数据的实例代码

实现SQL Server 原生数据从XML生成JSON数据的实例代码 SQL Server 是关系数据库,查询结果通常都是数据集,但是在一些特殊需求下,我们需要XML数据,最近这些年,JSON作为WebAPI常用的交换数据格式,那么数据库如何生成JSON数据呢?今天就写了一个DEMO. 1.创建表及测试数据 SET NOCOUNT ON IF OBJECT_ID('STATS') IS NOT NULL DROP TABLE STATS IF OBJECT_ID('STATIONS

Layui数据表格 前后端json数据接收的方法

相关推荐

随机推荐

Layui数据表格前后端json数据接收的方法