layui一个表格中怎么接两个接口的值_layui数据接口相关参数

本文详细介绍了layui表格如何渲染并对接两个接口的值,包括elem、toolbar、title、defaultToolbar、cols、limits、limit、page、skin、id等关键参数的用法,并提供了示例代码,展示了如何使用templet和toolbar自定义列模板和操作栏。
摘要由CSDN通过智能技术生成

# 渲染表格相关参数说明

### 渲染表格需要的格式:

```

layui.use(['form', 'table'], function () {

var $ = layui.jquery,

form = layui.form,

table = layui.table;

table.render({

});

});

```

* 参数说明:elem

~~~

// 指定原始 table 容器的选择器或 DOM,方法渲染方式必填

//实例说明 elem: '#currentTableId', 对应table容器的id值**

~~~

* 参数说明:toolbar

~~~

添加学员

// 此处使用script标签是方便在html中不显示出来,也可以使用div加样式display : none

toolbar: '#toolbarDemo',

// table头部左侧的按钮

// 当toolbar的值为true时,左侧按钮为空只显示右侧按钮

~~~

* 参数说明:title

~~~

title : '学员登记表', // 数据导出时的文件名

~~~

* 参数说明:defaultToolbar

~~~

defaultToolbar: ['filter', 'exports', 'print', { // table头部右侧的按钮

title: '提示',

layEvent: 'LAYTABLE_TIPS',

icon: 'layui-icon-tips'

}],

~~~

* 参数说明:cols

~~~

cols: [[ // 数据

{type: "checkbox", width: 50},

{field: 'id', width: 80, title: 'ID', sort: true},

{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}

]],

// 接口数据对应的数据个数

~~~

* 参数说明: limits

~~~

limits: [10, 15, 20, 25, 50, 100],

// 自定义分页选择框中的每页显示多少数据

~~~

* 参数说明:limit

~~~

limit: 15,

// 每页显示多少条数据

~~~

* 参数说明:page

~~~

page: true,

// 开启数据分页

~~~

* 参数说明:skin

~~~

skin: 'line'

// 开启表格数据隔行背景

~~~

* 参数说明:id

~~~

// 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引

~~~

* cols中的参数:templet

~~~

cols: [[ //表头

{field:'create_time', title:'领取时间',

templet:function(data){

return layui.util.toDateString(data.create_time*1000, "yyyy-MM-dd HH:mm:ss");

}

},

{fixed: 'sex', title: '性别',templet:function (d) {

return d.sex == '男' ? '汉子':'妹子';

// 此处的 d 代表此行的数据

}}

]],

~~~

* cols中的toolbar

~~~

编辑

删除

{fixed: 'right',title: '操作', width: 220, align:'center', toolbar: '#barDemo'}

// 标示表格中单行数据的操作,区别于table.render({ });中的toolbar参数

~~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值