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实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
详解php用static方法的原因
2018/09/12 PHP
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python新手如何理解循环加载模块
2020/05/29 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
C#实现启动一个进程
2016/10/01 面试题
给老师的一封建议书
2014/03/13 职场文书
中学生运动会口号
2014/06/07 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
python实现网络五子棋
2021/04/11 Python
golang 实现时间戳和时间的转化
2021/05/07 Golang
教你使用TensorFlow2识别验证码
2021/06/11 Python