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中如何处理引号编码&amp;#034;
Aug 15 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Javascript创建类和对象详解
May 31 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
JS遍历树层级关系实现原理解析
Aug 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
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
原生JS实现留言板
2020/03/26 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python操作redis方法总结
2018/06/06 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
pandas取出重复数据的方法
2019/07/04 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
django orm模块中的 is_delete用法
2020/05/20 Python
详解Python高阶函数
2020/08/15 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
小学生操行评语大全
2014/04/22 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
污水处理保证书
2015/05/09 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript