前言：
而今我们对“js获取iframe所有内容”大概比较关切，同学们都想要剖析一些“js获取iframe所有内容”的相关文章。那么小编同时在网络上网罗了一些对于“js获取iframe所有内容””的相关资讯，希望各位老铁们能喜欢，兄弟们快快来了解一下吧！前面介绍了SpringBoot集成LayUI和前端模板Thymeleaf,今天介绍一下数据列表的实现，线上一个简单的支持查询条件的列表实现。话不多说上代码
上前端界面user.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>后台管理系统</title> <link rel="stylesheet" href="/css/layui.css"></head><body><div style="padding: 15px;"> <blockquote class="layui-elem-quote layui-text"> 系统用户 </blockquote> <form class="layui-form layui-row layui-col-space16"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">用户标识</label> <div class="layui-input-inline"> <input type="text" name="userId" value="" placeholder="" class="layui-input" lay-affix="clear"> </div> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="email" value="" placeholder="" class="layui-input" lay-affix="clear"> </div> <label class="layui-form-label">用户状态</label> <div class="layui-input-inline"> <input type="text" name="userStatus" value="" placeholder="" class="layui-input" lay-affix="clear"> </div> </div> </div> <div class="layui-form-item"> <button class="layui-btn" id="demo-table-search" lay-submit lay-filter="demo-table-search">查询</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">创建</button> </div> </form> <table class="layui-hide" id="ID-table-demo-search"></table></div><script src="/layui.js"></script><!-- 工具栏模板 --><script type="text/html" id="barDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </div></script><script> layui.use(function () { var table = layui.table; var form = layui.form; var laydate = layui.laydate; var $ = layui.$; var util = layui.util; // 创建表格实例 table.render({ elem: '#ID-table-demo-search', contentType: 'application/json', url: '/sysUser/list', method: 'POST', cols: [ [ {field: 'userId', title: '用户标识'}, {field: 'nickName', title: '昵称'}, {field: 'email', title: '邮箱'}, {field: 'userStatus', title: '用户状态'}, {field: 'createTime', title: '创建时间'}, {fixed: 'right', title: '操作', width: 234, minWidth: 125, templet: '#barDemo'} ] ], page: true, height: 510, limit: 10, // 每页默认显示的数量, }); // 搜索提交 form.on('submit(demo-table-search)', function (data) { var field = data.field; // 获得表单字段 // 执行搜索重载 table.reloadData('ID-table-demo-search', { page: { curr: 1 // 重新从第 1 页开始 }, where: field // 搜索的字段 }); return false; // 阻止默认 form 跳转 }); });</script></body></html>这里有个坑
表格渲染列的时候，注意 cols: [[ 不要连着写，尽量换个行，因为集成了Thymeleaf,会把 [[ 作为特殊符号LayUI列表页请求结构
// 忽略getset方法public class PageReq { // 返回数据量 public int limit; // 页数 public int page; // 排序字段 private String orderField; // 排序 private String orderBy; @JsonIgnore public int getOffset() { if (page == 0) { return 0; } int tmp = (page - 1) * limit; return tmp < 0 ? 0 : tmp; }}需要分页的请求参数// 忽略getset方法public class SysUserParam extends PageReq{ private Long userId; /** * 邮箱 */ private String email; /** * 用户状态 */ private String userStatus; private String nickNameFullLike;}LayUI列表页统一返回结构// 忽略getset方法 public class Response<T> implements Serializable { //错误信息 private String msg; //错误码 0 成功 -1024 失败 private Integer code; // 返回数据 private T data; // 返回数据量 private Integer count; public static <T> Response buildSuccess() { return new Response("", 0, null, null); } public static <T> Response buildFail() { return new Response("", -1024, null, null); } public static <T> Response buildFail(String msg) { return new Response(msg, -1024, null, null); } public static <T> Response buildSuccess(T data, Integer count) { return new Response("", 0, data, count); } public Response(String msg, Integer code, T date, Integer count) { this.msg = msg; this.code = code; this.data = date; this.count = count; } }Controller代码@RestController@RequestMapping("/sysUser")public class UserController { private Logger logger = LoggerFactory.getLogger(UserController.class); @Resource private SysUserBiz sysUserBiz; /** * 根据主键查询系统用户 */ @PostMapping("/list") public Response<List<SysUserVO>> queryByParam(@RequestBody SysUserParam sysUserParam){ try { return sysUserBiz.selectByCondition(sysUserParam.adaptor()); }catch (Exception e){ logger.error("queryUserList Exception",e); return Response.buildFail(); } }}后面的底层SQL就忽略了，主要是看前端和controller的交互，以及参数返回值的约定
看下实现效果
默认进入的截图
带查询条件的截图
总感觉有点水，下次努力
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js获取iframe所有内容
