# layui_extend_openTable

**Repository Path**: Hbangmao/layui_extend_openTable

## Basic Information

- **Project Name**: layui_extend_openTable
- **Description**: 新版地址：https://gitee.com/Hbangmao/layui-op-table
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://hbangmao.gitee.io/
- **GVP Project**: No

## Statistics

- **Stars**: 29
- **Forks**: 7
- **Created**: 2019-11-18
- **Last Updated**: 2024-09-24

## Categories & Tags

**Categories**: layui-components

**Tags**: None

## README

这是一个老版本，新版本请：[前往](https://gitee.com/Hbangmao/layui-op-table)



###  专业解决表格列过多问题

####  Layui表格 可展开显示更多内容的Table【应用在表格列过多时，支持layui.table的所有参数 + 4个扩展参数详见本页的底部】

#### [在线体验效果](https://hbangmao.gitee.io/?href=1&type=1)

![效果GIF](https://images.gitee.com/uploads/images/2019/1119/173139_53ab40df_734930.gif "demo.gif")

***
####  _3.0_ 从网络加载
***
![支持从网络加载](https://images.gitee.com/uploads/images/2020/0116/183057_018769c4_734930.gif "网络加载.gif")


```
  //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 使用案例  简单版↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  layui.config({
    //配置 layui 第三方扩展组件存放的基础目录
    base: '../../../layui_exts/'
  }).extend({
    openTable: 'openTable/openTable'
  }).use(['openTable'], function () {
    layui.openTable.render({
      elem: '#test'
      , id: '#test'
      , url: 'test.json'
      , toolbar: '#barDemo'
      , 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: '签名', templet: function (item) {
            // 重新定义排版
            return "<div style='background: #333333;color: white'>" + item.sign + "</div>"
          }
        }
        , {
          field: 'wealth', title: '财富', onDraw: function (it, item) {
            // 使用默认风格排版 【左边title+右边值+下划线】
            return item['wealth'];
          }
        }
        , {field: 'experience', title: '积分'}
        , {field: 'classify', title: '职业'}
      ]

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

    });

    // 工具栏点击案例
    layui.table.on('toolbar(test)', function (obj) {
      layer.msg("点击了");
    });

    //注：表格重载案例
    layui.jquery(".btn-demo-reload").click(function () {
      layui.table.reload("#test", {where: {text: "测试搜索条件"}});
    });


    //TODO 注：其他相关案例与layui官网同步,需要使用[layui.table]

    //注：更新样例代码格式化展示 实际开发可忽略不管
    setTimeout(function () {
      layui.$('.layui-code').text(layui.$('#demo-script').html())
    }, 20)
  });


```
#### BUG修复列表

- V2.0 
1. 新增表格重载案例
2. 工具栏toolbar监听案例
3. 统一说明table的其他操作事项

- V3.0  
1、支持展开的数据从网络加载 。  
2、修复bug优化代码 。  



#### 其他的信息

- [简单版使用详情](https://gitee.com/Hbangmao/layui_extend_openTable/blob/master/layui_exts/openTable/demo/index1.html)
- [完整版使用详情(支持展开列可修改)](https://gitee.com/Hbangmao/layui_extend_openTable/blob/master/layui_exts/openTable/demo/index2.html)
- [从网络加载数据](https://gitee.com/Hbangmao/layui_extend_openTable/blob/master/layui_exts/openTable/demo/index3.html)
- [如有问题咨询帖子](https://fly.layui.com/jie/62195/) ||  issues
- QQ：1414430109

 :facepunch: 祝你使用开心


#### 一些案例 
1. user-山枫
![山枫](https://images.gitee.com/uploads/images/2020/0102/120139_ab24634e_734930.png "山峰.png")


****

####     感谢支持
![支付宝](https://images.gitee.com/uploads/images/2020/0102/101525_207b41b2_734930.png "1577929878990.png")
![微信](https://images.gitee.com/uploads/images/2020/0117/103850_7a940476_734930.png "微信.png")

##### 感谢好兄弟 支持


 <u> 1.  张 * 强 【1元 支付宝】 </u>  
 <u> 2.     * 明 【5元 支付宝】 </u>  
 <u> 3.   自紫 * 【10元 微信】  </u>