layui之数据表格--与后台交互获取数据的方法


Posted in Javascript onSeptember 29, 2019

jsp或html

<table id="userList" lay-filter="userList"></table>

js

//用户列表
var tableIns = table.render({
 elem: '#userList',
 url : 'userAction_findAll.action',
 cellMinWidth : 95,
 page : true,
 height : "full-125",
 limits : [10,15,20,25],
 limit : 10,
 id : "userListTable",
 cols : [[
  {type: "checkbox", fixed:"left", width:50},
  {field: 'userName', title: '用户名', minWidth:100, align:"center"},
  {field: 'userEmail', title: '用户邮箱', minWidth:200, align:'center',templet:function(d){
   return '<a class="layui-blue" href="mailto:'+d.userEmail+'" rel="external nofollow" >'+d.userEmail+'</a>';
  }},
  {field: 'userSex', title: '用户性别', align:'center'},
  {field: 'userStatus', title: '用户状态', align:'center',templet:function(d){
   return d.userStatus == '0' ? "正常使用":"<span class='layui-red'>限制使用</span>";
  }},
  {field: 'userGrade', title: '用户等级', align:'center'},
  {field: 'userEndTime', title: '最后登录时间', align:'center',minWidth:150},
  {title: '操作', minWidth:175, templet:'#userListBar',fixed:"right",align:"center"}
 ]]
});

UserAction.java

// 接收前端发送来的分页参数
private int page = 1;
public void setPage(int page) {
 this.page = page;
}
public int getPage() {
 return page;
}
private int limit = 2;
public int getLimit() {
 return limit;
}
public void setLimit(int limit) {
 this.limit = limit;
}

public String findAll(){
 List<User> allUser = this.getUserService().findAllUser(this.getPage(), this.getLimit());
 Map<String, Object> result = new HashMap<String, Object>();
 result.put("code", 0);
 result.put("msg", "");
 result.put("count", this.getUserService().findTotalRecord(key));
 JSONArray array = JSONArray.fromObject(allUser);
 result.put("data", array);
 // 将其转换为JSON数据,并压入值栈返回
 ActionContext.getContext().getValueStack().set("jsonData", JSONObject.fromObject(result));
 return "success";
}

struts.xml配置

<!-- 用户配置 -->
<package name="user" namespace="/" extends="common,json-default">
 <action name="userAction_*" class="userAction" method="{1}">
  <result name="success" type="json">
   <param name="root">jsonData</param>
  </result>
 </action>
</package>

返回JSON数据格式,也是layui数据表格要求的格式

{
 "code": 0,
 "msg": "",
 "count": 15,
 "data": [
 {
  "usersId": "1",
  "userName": "user12",
  "userEmail": "123@qq.com",
  "userSex": "女",
  "userStatus": "0",
  "userGrade": "倔强青铜",
  "userEndTime": "2018-11-11 15:22:33"
 },{
  "usersId": "2",
  "userName": "asd",
  "userEmail": "123@qq.com",
  "userSex": "男",
  "userStatus": "1",
  "userGrade": "秩序白银",
  "userEndTime": "2018-11-11 15:22:33"
 },
 ......
 ]
}

注意:

1.js中table的field需要与返回的数据key相对应,比如field: “userName”与“userName”: “asd”

2.layui的数据表格向url发送请求时,会附上page以及limit这两个参数,所以服务端需要接收并以此为条件查找数据

前端展示效果

layui之数据表格--与后台交互获取数据的方法

以上这篇layui之数据表格--与后台交互获取数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
js实现下拉框二级联动
Dec 04 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 #Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 #Javascript
react用Redux中央仓库实现一个todolist
Sep 29 #Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 #Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 #Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
You might like
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python实现自动打卡的示例代码
2020/10/10 Python
python热力图实现简单方法
2021/01/29 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
家长给老师的道歉信
2014/01/13 职场文书
计算机毕业生求职信
2014/06/10 职场文书
普通党员对照检查材料
2014/09/24 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript