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 相关文章推荐
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
django实现类似触发器的功能
2019/11/15 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
linux面试题参考答案(5)
2014/09/01 面试题
文明教师事迹材料
2014/01/16 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014年度考核工作总结
2014/12/24 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书