关于LayUIAdminPro使用table.render分页时,需要修改分页携带的参数的办法(LayUI踩坑篇三)

文中的LayUIAdminPro版本为v2020.4.1。使用的软件是IDEA,你问我为什么不用vsCode?为了偷懒,就使用IDEA。

虽然实习的岗位是Java后端,但是工作的内容还是需要负责前端的一些东西,例如后台页面,公司前端使用的是LayUI框架。对于已经使用了三个月LayUI的我来说,LayUI的坑还是挺多的。闲话少说,接下来进入正片。

我们使用LayUI时的table.reder()获取数据时,LayUI关于分页携带的参数为page和limit两个参数。
在这里插入图片描述
如果只是小项目的话,我们可以在接口里单独使用这两个参数去获取数据,然而,在公司里,可能会把分页的信息封装成一个类,例如我在实习的时候,公司就是把分页信息封装成一个pageable类,这样的话,我们就需要LayUI传递过来的参数是一个pageable类。

public class Pageable {
    private int page;
    private int size;
    private String sort;
    private boolean desc;
	...
}

LayUI传递的两个参数不满足我们的需求,需要让LayUI传递过来的是一个pageable对象,那么我们就需要修改LayUI的js文件。下面是LayUIAdminPro项目的目录,我们需要修改start/layui/lay/modules/table.js文件。
在这里插入图片描述
打开后看到的是这样的,这显然不是给人看的东西,我们需要使用快捷键Ctrl+Alt+L对代码进行格式化。
在这里插入图片描述
在这里插入图片描述
Idea的快捷键可以看下面这篇文章,很全。
https://blog.csdn.net/qq_38963960/article/details/89552704

格式化后,代码长这个样子,这才是给人看的东西。
在这里插入图片描述
同样使用IDEA的同学,可以直接翻到187行。用其他软件进行格式化,位置可能不同(例如我同事使用vsCode就不是187行)。其他同学复制下面这一句,进行搜索即可。

if (i.startTime = (new Date).getTime(), a.url) {

在这里插入图片描述
分页携带的参数就是图中圈起来的代码,对文中圈起来的代码进行修改。
在这里插入图片描述

let pageable ={};
pageable['pageable']={}
pageable.pageable['size']=a.page.limit;
pageable.pageable['page']=a.page.curr;
pageable.pageable['sort']=a.page.sort;
pageable.pageable['desc']=a.page.desc;

var d = t.extend(pageable, a.where);

修改完后,重新点击分页按钮,携带的参数就是我们需要的pageable对象啦~
在这里插入图片描述

实用小知识:IDEA使用Ctrl+E键,可以查看刚关闭的文件。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在使用 layui table.render 方法,可以传递一个对象作为参数,其中包含表格的配置项和数据。 常用的配置项有: - elem: 表格的容器选择器 - url: 获取数据的 URL - cols: 表格的列配置 - data: 表格的数据 - page: 分页配置 示例: ``` table.render({ elem: '#table', url: '/data', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '名称'}, {field: 'age', title: '年龄'}, ]], page: true }); ``` 在这个示例中,表格将渲染在页面中 id 为 "table" 的元素中,数据将从 "/data" URL 获取,表格有列,分别是 "ID"、"名称"、"年龄",并且启用分页。 ### 回答2: layui是一个轻量级的前端UI框架,其table模块可以用于快速构建表格。 在使用table.render方法,我们可以通过传递参数来对数据表格进行配置和渲染。 1. elem:指定表格容器的选择器,用于将数据表格渲染到页面上的指定位置。 2. url:指定要加载的数据接口地址,可以是本地数据文件的路径,也可以是后台接口的URL。如果数据是通过后台接口获取的,可以将url设置为接口的URL,通过异步请求获取数据并渲染表格。 3. cols:指定表头和每一列的字段。cols参数是一个二维数组,每个数组表示一列数据,可以设置字段名、标题、宽度、对齐方式等属性。可以根据需要设置多列数据。 4. id:指定表格的唯一标识,用于处理一些表格的操作和事件。如果没有设置id,默认会自动生成一个唯一的标识。 5. page:是否开启分页,默认值为false,设置为true表示开启分页功能。可以通过设置limit参数来指定每页显示的数据条数。 6. limit:指定每页显示的数据条数,默认值为10。如果开启了分页,可以通过设置limit参数来自定义每页显示的数据条数。 7. height:指定表格的高度,默认为自适应高度。可以设置固定的高度值,也可以设置'full'表示铺满父容器。 通过传递这些参数,我们可以自定义配置数据表格的样式、表头、数据接口等,从而实现对数据表格的定制化操作。 ### 回答3: layuitable.render方法用于渲染表格,参数包括id(表格容器id)、cols(表头、列配置)、data(表格数据),详细解释如下: 1. id:表示表格容器的id,通常是一个<div>元素的id。通过该id可以定位到表格容器,实现表格的展示和交互操作。 2. cols:表示表头和列的配置,是一个数组。每个元素对应一列的配置。配置中需要指定字段名(field)、标题(title)、最小宽度(minWidth)等。 3. data:表示表格的数据来源,是一个二维数组。每一行表示一条数据,每一列对应一条数据的某个属性值。 参数传递的具体步骤如下: 1. 导入layui模块,并初始化该模块。 2. 定义表格容器的HTML结构,给需要展示表格的<div>元素添加一个id。 3. 使用table.render方法进行表格的渲染,传入参数id、cols和data。 示例代码如下: ```javascript layui.use('table', function(){ var table = layui.table; //定义表格容器 <div id="test"></div> //渲染表格 table.render({ id: 'test', cols: [[ {field: 'id', title: 'ID', minWidth: 80}, {field: 'name', title: '名称', minWidth: 100}, {field: 'age', title: '年龄', minWidth: 80} ]], data: [ {id: 1, name: '张', age: 18}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 20} ] }); }); ``` 以上代码实现了一个带有表头和数据的表格渲染效果。开发者可以根据实际需求,调整cols和data参数的值来适配不同的表格数据展示需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值