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


Posted in Javascript onSeptember 19, 2019

先上效果图:

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, //每页默认显示的数量
   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数据格式:

Layui数据表格 前后端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数据接收的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
vue.js实现图书管理功能
Sep 24 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
layui对工具条进行选择性的显示方法
Sep 19 #Javascript
基于js实现抽红包并分配代码实例
Sep 19 #Javascript
You might like
php 日期时间处理函数小结
2009/12/18 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
vue实现拖拽效果
2019/12/23 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python判断完全平方数的方法
2018/11/13 Python
python实现kmp算法的实例代码
2019/04/03 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
纠纷协议书
2014/04/16 职场文书
项目合作协议书
2014/04/16 职场文书
教师工作态度自我评价
2015/03/05 职场文书
干部理论学习心得体会
2016/01/21 职场文书