layui 第三方组件平台

返回首页 发布组件

可展开显示更多内容的Table【应用在表格列过多时,支持layui.table的所有参数 + 4个扩展参数详情见文档】

文档

## 下面是示例代码,只需要将cols数组中的参数搬到openCols数组中即可 。 
layui.config({
//配置 layui 第三方扩展组件存放的基础目录
base: '../../../layui_exts/'
}).extend({
openTable: 'openTable/openTable'
}).use(['openTable'], function () {

var openTable = layui.openTable;
openTable.render({
elem: '#test'
, id: '#test'
, url: 'test.json'
, cols: [[
{field: 'id', title: 'ID', sort: true}
, {field: 'username', title: '用户名', edit: true}
, {field: 'city', title: '城市', edit: true}
, {title: '操作', toolbar: '#barDemo', width: 150}
]]

//注:展开的列Items
, openCols: [
{field: 'sign', title: '签名'}
, {field: 'wealth', title: '财富'}
, {field: 'experience', title: '积分'}
, {field: 'classify', title: '职业'}
]

//注:监听排序 {openTable}
, sort: function (obj) {
console.log(obj)
}
//注:0:同时只展开一项 1:一直展开不关闭之前 def:0 {openTable}
, openType: 0

});
需要注意的是:1、监听排序需使用sort回调函数
2、以上为简单案例,完整版支持展开列的修改(展开列支持layui select下拉控件)

详情见【码云】 https://gitee.com/hbm_461/layui_extend_openTable
组件相关异常反馈帖子: https://fly.layui.com/jie/60060/