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 相关文章推荐
js中split函数的使用方法说明
Dec 26 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
Vue项目History模式404问题解决方法
Oct 31 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
js实现圆形菜单选择器
Dec 03 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
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Django模板Templates使用方法详解
2019/07/19 Python
python psutil监控进程实例
2019/12/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python利用faker库批量生成测试数据
2020/10/15 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
前台文员岗位职责及工作流程
2013/11/19 职场文书
机械专业应届生求职信
2013/12/12 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
计划生育诚信协议书
2014/11/02 职场文书
幼儿教师个人总结
2015/02/05 职场文书
义诊活动通知
2015/04/24 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
七年级作文之雪景
2019/11/18 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python