---

---

新增展開(kāi)數(shù)據(jù)可從網(wǎng)絡(luò)加載

---

  //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 使用案例  簡(jiǎn)單版↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

  layui.config({
    //配置 layui 第三方擴(kuò)展組件存放的基礎(chǔ)目錄
    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: '用戶(hù)名', edit: true}
        , {field: 'city', title: '城市', edit: true}
        , {title: '操作', toolbar: '#barDemo', width: 150}
      ]]

      //注：展開(kāi)的列Items
      , openCols: [
        {
          field: 'sign', title: '簽名', templet: function (item) {
            // 重新定義排版
            return "<div style='background: #333333;color: white'>" + item.sign + "</div>"
          }
        }
        , {
          field: 'wealth', title: '財(cái)富', onDraw: function (it, item) {
            // 使用默認(rèn)風(fēng)格排版 【左邊title+右邊值+下劃線(xiàn)】
            return item['wealth'];
          }
        }
        , {field: 'experience', title: '積分'}
        , {field: 'classify', title: '職業(yè)'}
      ]

      //注：監(jiān)聽(tīng)排序 {openTable}
      , sort: function (obj) {
        console.log(obj)
      }
      //注：0：同時(shí)只展開(kāi)一項(xiàng) 1：一直展開(kāi)不關(guān)閉之前  def：0 {openTable}
      , openType: 0

    });

    // 工具欄點(diǎn)擊案例
    layui.table.on('toolbar(test)', function (obj) {
      layer.msg("點(diǎn)擊了");
    });

    //注：表格重載案例
    layui.jquery(".btn-demo-reload").click(function () {
      layui.table.reload("#test", {where: {text: "測(cè)試搜索條件"}});
    });


    //TODO 注：其他相關(guān)案例與layui官網(wǎng)同步,需要使用[layui.table]

    //注：更新樣例代碼格式化展示 實(shí)際開(kāi)發(fā)可忽略不管
    setTimeout(function () {
      layui.$('.layui-code').text(layui.$('#demo-script').html())
    }, 20)
  });

---

需要注意的是：1、監(jiān)聽(tīng)排序需使用sort回調(diào)函數(shù)
2、以上為簡(jiǎn)單案例，完整版支持展開(kāi)列的修改(展開(kāi)列支持layui select下拉控件)



碼云 https://gitee.com/Hbangmao/layui_extend_openTable

相關(guān)帖子 https://fly.layui.com/jie/62195/

在線(xiàn)體驗(yàn) https://hbangmao.gitee.io/?href=1&type=1

此項(xiàng)目以碼云更新為準(zhǔn)，長(zhǎng)期維護(hù) 。
祝你使用開(kāi)心