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 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 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字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Django添加sitemap的方法示例
2018/08/06 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python 用struct模块解决黏包问题
2020/11/07 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
2014年应届大学生自我评价
2014/01/09 职场文书
歌唱比赛主持词
2014/03/18 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
走近毛泽东观后感
2015/06/04 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript