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 不能释放内存.
Sep 07 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
创建一个类Person的简单实例
May 17 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序删除处理详解
Aug 16 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
微信小程序实现留言功能
Oct 31 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
一个程序下载的管理程序(二)
2006/10/09 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
vue生命周期的探索
2019/04/03 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python八皇后问题的解决方法
2018/09/27 Python
python实现AES加密解密
2019/03/28 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
篝火晚会主持词
2014/03/25 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
个人授权委托书格式
2014/08/30 职场文书
重阳节标语大全
2014/10/07 职场文书
学校中秋节活动总结
2015/03/23 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
利用python调用摄像头的实例分析
2021/06/07 Python