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

 更新时间:2019年09月19日 15:22:04   作者:郑清  
今天小编就为大家分享一篇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数据格式:

我们可以自己抽一个工具类出来封装成前端需要返回的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数据接收的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS动态加载当前时间的方法

    JS动态加载当前时间的方法

    这篇文章主要介绍了JS动态加载当前时间的方法,涉及html的onload方法及javascript操作时间的技巧,需要的朋友可以参考下
    2015-02-02
  • JavaScript使用addEventListener添加事件监听用法实例

    JavaScript使用addEventListener添加事件监听用法实例

    这篇文章主要介绍了JavaScript使用addEventListener添加事件监听的方法,实例分析了addEventListener方法的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • JS实现CheckBox复选框全选全不选功能

    JS实现CheckBox复选框全选全不选功能

    在网站的管理后台应用此功能居多,如一次性处理多个产品,或对文章的删除对产品的下架等处理,一条一条的点显然有一些麻烦,如果能每一行放一个checkbox,然后统一处理就好办的多了,今天我就用简单的篇幅来讲解一下这个功能的实现原理和实现过程。
    2015-05-05
  • js实现超简单的展开、折叠目录代码

    js实现超简单的展开、折叠目录代码

    这篇文章主要介绍了js实现超简单的展开、折叠目录代码,通过javascript操作鼠标点击事件控制页面元素样式的动态改变实现该功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JS 文件本身编码转换 图文教程

    JS 文件本身编码转换 图文教程

    JS编码转换,这句话本身就是一句具有二重义的话。通常理解为JS文件里能转换编码的代码,但是,我所碰到的问题并不是这样的,是要解决JS文件本身的编码问题,它是UTF-8编码的还是ANSI编码的?
    2009-10-10
  • js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口及检查浏览器关闭事件

    js关闭浏览器窗口,不弹出提示框。支持ie6+,火狐,谷歌等浏览器,下面以一个示例为大家详细介绍下具体的实现方法,感兴趣的朋友可以参考下
    2013-09-09
  • Javascript实现倒计时(防页面刷新)实例

    Javascript实现倒计时(防页面刷新)实例

    本文分享了Javascript实现倒计时并且页面不刷新的实例,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 一文掌握new Date() 方法

    一文掌握new Date() 方法

    大家平时在开发的时候有没被new Date()折磨过,反正我是踩过很多坑,今天小编通过本文给大家详细讲解下new date()方法应用思考,感兴趣的朋友一起看看吧
    2023-04-04
  • 微信小程序页面间传值与页面取值操作实例分析

    微信小程序页面间传值与页面取值操作实例分析

    这篇文章主要介绍了微信小程序页面间传值与页面取值操作,结合实例形式分析了微信小程序页面间传值及页面取值操作相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-04-04
  • 微信小程序监听用户登录事件的实现方法

    微信小程序监听用户登录事件的实现方法

    这篇文章主要介绍了微信小程序监听用户登录事件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论