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}
          ]]
        }
      }

    });

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("加载出错");
            }
          });
        }
      });

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

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

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

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