5 Star 28 Fork 7

胡邦茂 / layui_extend_openTable

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 4.01 KB
一键复制 编辑 原始数据 按行查看 历史
胡邦茂 提交于 2020-03-17 13:35 . update README.md.

这是一个老版本,新版本请:前往

专业解决表格列过多问题

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

在线体验效果

效果GIF


3.0 从网络加载


支持从网络加载

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

  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优化代码 。

其他的信息

:facepunch: 祝你使用开心

一些案例

  1. user-山枫 山枫

感谢支持

支付宝 微信

感谢好兄弟 支持

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

1
https://gitee.com/Hbangmao/layui_extend_openTable.git
git@gitee.com:Hbangmao/layui_extend_openTable.git
Hbangmao
layui_extend_openTable
layui_extend_openTable
master

搜索帮助