layui有自己的一套特定的数据格式交互,必须参数code:0,msg:"",count:数据size(int),data:"数据List"

<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
<script type="text/javascript" src="static/layui/layui.js"></script><table class="layui-hide" id="test" lay-filter="table"></table>
  • js代码
layui.use(['form','layer','table'], function(){var table = layui.table,form = layui.form,$=layui.$;table.render({elem: '#test'  //绑定table id,url:'sys/menu/list'  //数据请求路径,cellMinWidth: 80,cols: [[{type:'numbers'},{field:'name', title:'菜单名称'},{field:'parentName', title:'父菜单名称',width:150},{field:'url', title: '菜单路径'},{field:'perms', title: '菜单权限'},{field:'type', title:'类型'},{field:'icon', title:'图标'},{field:'orderNum', title:'排序'},{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#toolBar'}//一个工具栏  具体请查看layui官网]],page: true   //开启分页,limit:10   //默认十条数据一页,limits:[10,20,30,50]  //数据分页条,id: 'testReload'  ,where:{} // 传参数});
});
  • java后台
@RequestMapping("/list")
@ResponseBody
@RequiresPermissions("sys:menu:list")
public Layui list(@RequestParam Map<String, Object> params){//查询列表数据Query query = new Query(params);List<SysMenuEntity> menuList = sysMenuService.queryList(query);int total = sysMenuService.queryTotal(query);PageUtils pageUtil = new PageUtils(menuList, total, query.getLimit(), query.getPage());return Layui.data(pageUtil.getTotalCount(), pageUtil.getList());
}
  • Layui工具类
public class Layui  extends HashMap<String, Object> {public static Layui data(Integer count,List<?> data){Layui r = new Layui();r.put("code", 0);r.put("msg", "");r.put("count", count);r.put("data", data);return r;}
}
  • PageUtils
@Data
public class PageUtils implements Serializable {private static final long serialVersionUID = -1202716581589799959L;//总记录数private int totalCount;//每页记录数private int pageSize;//总页数private int totalPage;//当前页数private int currPage;//列表数据private List<?> list;/*** 分页* @param list        列表数据* @param totalCount  总记录数* @param pageSize    每页记录数* @param currPage    当前页数*/public PageUtils(List<?> list, int totalCount, int pageSize, int currPage) {this.list = list;this.totalCount = totalCount;this.pageSize = pageSize;this.currPage = currPage;this.totalPage = (int)Math.ceil((double)totalCount/pageSize);}
}

Layui数据表格(table)前后台交互相关推荐

  1. html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...

    layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整 需要把heigh高度写死 table.render({ elem: ...

  2. layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题

    解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...

  3. layui数据表格table在选项卡tabs中分页条不显示的解决

    layui数据表格table在选项卡tabs中分页条不显示的解决 解决:渲染后重新设置高度:$(".layui-table-box").css("height" ...

  4. layUI数据表格(table)

    <!--引入 layui.css--> //定义表格 <table class="layui-table" lay-data="{id:'myTable ...

  5. layui数据表格与后台交互进行渲染

    文章目录 准备工作 1.下载 2.引入样式和js 3.引入控件 4.数据格式 代码实现 1.思路 2.BookAction业务处理类 3.LayuiResult类 实现效果 准备工作 1.下载 先去官 ...

  6. Layui数据表格table排序(后端PHP)

    一.需要添加 二.html代码 三.PHP部分代码 四.其他 一.需要添加 1.需要排序的字段加上 sort: true 属性 2.table.on('sort(lay-filter的值)', fun ...

  7. LAYUI 数据表格table 监听switch/checkbox事件

    注意:监听switch/checkbox这种表单事件,是属于表单(from),而不是表格(table),用的不是layui.table.on,而是layui.form.on. var table = ...

  8. layui 数据表格 table的一些技巧,及自定义模板的使用

    table数据 有时总会有判断男女  类型之类的,所以通过下列方法即可轻松解决. 当然,这样在前台直接写死的 貌似不大好,没关系,我们可以通过自定义模板的方法 数据都来自后台,前台只做判断,如: 效果 ...

  9. 解决layui数据表格table固定列行高不一致的情况

    在回调函数done中添加如下代码: //动态监听表头高度变化,冻结行跟着改变高度$(".layui-table-header tr").resize(function () {$( ...

最新文章

  1. 打造数字化服务能力,中国联通如何借助云原生技术实现增长突围?
  2. 简单聊聊Python协程
  3. couldn't find libweibosdkcore.so
  4. VC编译选项 /EHa 异常处理
  5. 决策树——信息熵的学习笔记
  6. ERROR:connect ETIMEDOUT
  7. Access-Control-Allow-Origin跨域问题,使用Nginx配置来解决
  8. 企业为什么要建立档案管理?具体如何实现?
  9. 敏捷开发产品管理系列之四:新产品研发
  10. 高德地图定位、画线 基础功能
  11. anaconda的正确安装
  12. golang || gin运行,出现类似这种的错误: missing go.sum entry; to add it:
  13. 测试 | 让每一粒尘埃有的放矢
  14. 2016校招薪资汇总
  15. Android 音视频入门/进阶教程
  16. 自由天空综合驱动包集合
  17. v-infinite-scroll无限滚动无法触发
  18. 亚马逊美国站自行车16 CFR 1512测试报告、GCC合格证具体要求细则
  19. 什么是高新技术企业?高新认定领域有哪些?
  20. 三部门联合推进“互联网+不动产登记”,国图一体化平台响应升级!

热门文章

  1. matlab 机器学习相关函数、api
  2. auxiliary variable(辅助变量)的引入
  3. Python 基础 —— time(时间,日期)
  4. boost基础——随机数生成器
  5. URL vs URI
  6. numpy中多维数组的轴(axis)
  7. 一些实用的在线编辑器、在线转换工具
  8. python是什么 自学-这是大多数新手入门之后强烈推荐的python自学入门指南秘笈...
  9. python下载-Python下载和安装图文教程[超详细]
  10. python所有软件-这些Python开源软件解决了程序员几乎所有的问题