layui.config({
    base: '../opTable'
  }).extend({
    opTable: '/opTable'
  }).use(['opTable'], function () {
  var opTable = layui.opTable.render({
      elem: '#test'
      , id: '#test'
      , url: 'static/test.json'
      , toolbar: '#toolDemo'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'classify', title: '职业'}
        , {field: 'city', title: '城市', edit: true}
        , {title: '操作', toolbar: '#barDemo', width: 150, align: "center"}
      ]]

      //  展开的列配置
      , openCols: [
        {field: 'sex', title: '性别'}
        , {field: 'logins', title: '登录名', edit: true}
        , {field: 'sign', title: '签名'}
        , {field: 'wealth', title: '财富'}
        , {field: 'experience', title: '经验值'}
        , {field: 'experience', title: '积分'}
        , {field: 'score', title: '分数', edit: true}
      ]
    });
    
 });

 layui.opTable.render({
      elem: '#test1'
      , id: '#test1'
      , url: 'static/test.json'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'city', title: '城市', edit: true}
      ]],

     /**
       * 展开显示表格 参数支持layui所有参数
       * @param itemData 当前行数据
       * @returns 支持 layui table 的所有配置参数
       *
       * 说明子表的 lay-filter='filter' 值与ID参数相同(去掉 # .)
       */
      openTable: function (itemData) {

        return {
          // 由于同时支持展开多个表格 组装唯一的id
          elem: '#child' + itemData.LAY_INDEX
          , id: 'child' + itemData.LAY_INDEX
          , url: 'static/test.json'
          , page: true
          , where: {id: itemData.id}
          , cols: [[
            {field: 'id', title: 'ID'}
            , {field: 'username', title: '用户名'}
            , {field: 'logins', title: '登录名'}
            , {field: 'city', title: '城市'}
            , {field: 'classify', title: '职业'}
            , {field: 'wealth', title: '财产值'}
            , {field: 'experience', title: '人气值'}
            , {field: 'score', title: '分数'}
            , {title: '操作', toolbar: '#barDemo', width: 150}
          ]]
        }
      }

    });

  var opTable = layui.opTable.render({
      elem: '#test-tree'
      , id: '#test-tree'
      , url: 'static/test.json'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'city', title: '城市', edit: true}
      ]]
      /**
       * 展开显示树形表格
       * @param itemData 当前行数据
       * @returns
       *
       * 说明子表的 lay-filter='filter' 值与ID参数相同(去掉 # .)
       */
      , openTable: function (itemData) {
        return {
          elem: '#child_1_' + itemData.LAY_INDEX
          , id: 'child_1_' + itemData.LAY_INDEX
          , url: 'static/test2.json'
          , page: true
          , cols: [[
            {field: 'id', title: 'ID', edit: true}
            , {field: 'username', title: '用户名'}
            , {field: 'logins', title: '登录名'}
          ]]
          , openTable: function (itemData) {
            return {
              elem: '#child_2_' + itemData.LAY_INDEX
              , id: 'child_2_' + itemData.LAY_INDEX
              , url: 'static/test2.json'
              , page: true
              , cols: [[
                {field: 'id', title: 'ID', edit: true}
                , {field: 'username', title: '用户名'}
                , {field: 'logins', title: '登录名'}
              ]]
              , openTable: function (itemData) {
                return {
                  elem: '#child_3_' + itemData.LAY_INDEX
                  , id: 'child_3_' + itemData.LAY_INDEX
                  , url: 'static/test2.json'
                  , openVisible: false
                  , cols: [[
                    {field: 'id', title: 'ID', edit: true}
                    , {field: 'username', title: '用户名'}
                    , {field: 'logins', title: '登录名'}
                    , {field: 'city', title: '城市'}
                    , {field: 'classify', title: '职业'}
                    , {field: 'wealth', title: '财产值'}
                    , {field: 'experience', title: '人气值'}
                    , {field: 'score', title: '分数'}
                    , {title: '操作', toolbar: '#barDemo', width: 150}
                  ]]
                  , done: function () {
                    //  监听子表 修改
                    layui.table.on('edit(' + 'child' + itemData.LAY_INDEX + ')', function (obj) {
                      layer.msg(JSON.stringify(obj.data, null, "\t"));
                    });
                  }
                  , onEdit: function (data) {
                    console.log("表格4修改", data)
                  }
                }
              }
            }
          }
        }
      }
      , openType: 1
      , onEdit: function (data) {
        console.log("表格1修改", data)
        layer.msg(JSON.stringify(data));
      }
    });

layui.opTable.render({
      elem: '#test2'
      , id: '#test2'
      , url: 'static/test.json'
      , cols: [[
        {field: 'id', title: 'ID', sort: true}
        , {field: 'username', title: '用户名', edit: true}
        , {field: 'city', title: '城市', edit: true}
      ]],

      //  展开的列从网络加载
      openNetwork: {
        openCols: [
          {field: 'sign', title: '签名'}
          , {field: 'wealth', title: '财富'}
          , {field: 'experience', title: '积分'}
          , {field: 'classify', title: '职业'}
        ],
        /**
         *
         * @param data 当前行数据
         * @param success 成功
         * @param message 显示异常消息[没有数据 出错 等]
         */
        onNetwork: function (data, success, message) {
          // 从网络加载
          layui.$.ajax({
            type: "get",
            url: "static/test1.json",
            dataType: "json",
            data: {id: data.id},
            async: true,
            success: function (resp) {
              if (resp.code === 200) {
                setTimeout(function () {
                  if (data.id === 10000) {
                    message("加载出错");
                  } else {
                    success(resp.data);
                  }
                }, 200);
              } else {
                message("没有数据");
              }
            },
            error: function (err) {
              message("加载出错");
            }
          });
        }
      });

// 有时候我们需要对某一数据列新增说明，来提高使用者对该项数据的深入了解 。

...
 cols: [[
          {field: 'username', title: '用户名', opHelp: {text: '主要用于论坛中作为昵称展示。', tipOpt: {}}, edit: true}
      ]]
...


...
 openCols: [
        {field: 'sign', title: '签名', opHelp: {text: '设置属于你的签名吧 。', tipOpt: {}}}
      ]
...

过程中出问题了先自己捋一捋 

hubangmao 90后, 热爱 User interaction( UI ) 的Java程序猿 。

做完了一件非常开心非常Nice的事情。

此项目长期维护，以码云更新为准，祝你使用愉快 。