记录jsp使用bootstrapTable 点击展开子级页面

效果图

 

1. 重要属性

detailView: 'true', // 子级展示

2.重要方法

// 可以监听 点击 ＋ 时执行的方法index，行数，row 点击本条信息的对象，$detial html 信息
onExpandRow: function (index,row,$detial) {
   
} 

3.案例：

// 初始化表格信息

function test() {
        method: "POST",
        url: '***/***',
        queryParams: function (params) {
          // 传参
        },
        detailView: 'true', // 子级展示（重要属性）
        columns: [
            {
                field: 'lxsj',
                align: 'center',
                title: '联系时间',
              
            },
            {
                field: 'lxfs',
                align: 'center',
                title: '联系方式',
            },
            {
                field: 'lxr',
                align: 'center',
                title: '联系人',
            },
            {
                field: 'recid',
                align: 'center',
                title: '操作',
              
            }
        ],
        onClickRow: function(row,$element){

        },
        //（重要方法）
        onExpandRow: function (index,row,$detial) {
            initJqlxqk(index,row,$detial);
        }
    });

//展示近期联系情况 附件展示
function initJqlxqk(index,row,$detial) {
     //获取父类 id，用于查询子类的信息
    var parentid = row.id;
      // 渲染 子类表格页面
    var uploadQueryLsTable = $detial.html('<table></table>').find("table");

    $(uploadQueryLsTable).bootstrapTable({
        method: "POST",
        url: '***\***?parentid=' + parentid,
        queryParams: function (params) {
           
        },
        columns: [
            {
                field: 'filename',
                align: 'center',
                title: '文件名称',
                
            },

            {
                field: 'recid',
                align: 'center',
                title: '操作',
            }
        ]
    });
}