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 TextArea动态显示剩余字符
Oct 22 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP的FTP学习(一)
2006/10/09 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python采集微信公众号文章
2018/12/20 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python进行参数传递的方法
2020/05/12 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
Java里面如何创建一个内部类的实例
2015/01/19 面试题
退休教师欢送会主持词
2014/03/31 职场文书
文化建设工作方案
2014/05/12 职场文书
小学四年级学生评语
2014/12/26 职场文书
2015年护士节活动总结
2015/02/10 职场文书
校长个人总结
2015/03/03 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
KVM基础命令详解
2022/04/30 Servers
JavaScript实现音乐播放器
2022/08/14 Javascript