bootstrap table组件实现点击行 在行下面展示数据列表

工作遇到这个样一个需求类似于下面，当我点击2这一行的加号时，在当前行之后添加详细数据列表

但是 这个数据我个人当时考虑的时候首先考虑做成tree  但是奈何个人技术不行   用不了bootstrap table的树组件，无法定义这个数据的PID以及CID，这里的子列表是子ID中是否包含父ID来查找的，所以当时就没有用tree来解决

 

 

后来找到bootstrap table 的官网https://examples.bootstrap-table.com/，在里面看到这样一个范例，觉得不错 ，就用了这个，如下所示：

在这里呢 他的源码中是  点击+号之后，在当前行的下一行生成一个新的<tr><td></td></tr>这样的标签，就用这样的想法实现了自己想要的样子，自己实现后的样子:

 

下面是实现的代码：

首先在table中定义属性 data-detail-view="true"  以及方法 data-detail-formatter="treeDetail"

<table id="tb_departments"
               class="datatable"
               data-height="800"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-detail-view="true"
               data-striped="true"
               <#--data-filter-control="true"-->
               data-detail-formatter="treeDetail"
               data-url="queryProcurementDetail.z">
           
        </table>

定义好了以后  就会在表格的首列添加展开行的加减号，接下来   写点击加号之后的方法

function treeDetail(index, row) {
        var alldate = {
            putype: row.putype,
            shareorderno: row.shareorderno
        };
        var str = "";
        var cggys = "";
        $.ajax({
            url: "queryProcurementTreeDetail.z",
            method: 'post',                      //请求方式（*）
//            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            data: alldate,
            beforeSend: function () {
                close = layer.load(2);
            },
            success: function (data) {
                layer.close(close);
                $.each(data, function (index, DesignEchartsDetail) {
                    var num = index + 1;
                    cggys = DesignEchartsDetail.cggys == null ? "-" : DesignEchartsDetail.cggys;
                    var ondblclick = "dblclick" + num;
                    tree = "tree" + num;
                    str += "<tr id=" + "'" + ondblclick + "'" + " class='detail-view'>";
                    str += "<td style='width: 50px' align='center'></td>";
                    str += "<td style='width: 50px' align='center'>" + num + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.shareorderno + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.putype + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.planstarttime + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.planfinishtime + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.planpercent + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.orderpercent + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.receivepercent + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.checkpercent + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.inpercent + "</td>";
                    str += "<td class='colStyle' align='center'>" + cggys + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.wzbm + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.lxdh + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.jhid + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.qty + "</td>";
                    str += "<td class='colStyle' align='center'>" + DesignEchartsDetail.status + "</td>";
                    str += "<td class='colStyle' align='center'><a>" + DesignEchartsDetail.jd + "</a></td>";
                    str += "</tr>";
                });
                //获取到加减号的class .detail-icon，然后获取第index个  拿到他的父亲的父亲（也就是当前行）
                $(".detail-icon").eq(index).parent().parent().after(str);
            }
        })
        return '';
    }

 这样我们就把数据动态写入到行之下，但是这样还有一个问题，这个时候你写入这些行在执行关闭的时候并没有全部收起来，最后一步我们查看源码，更改他的再次点击之后，关闭当前行的子列表数据的代码，如下：

我们找到 if ($tr.next().is('tr.detail-view'))这个判断  注释掉$tr.next().remove();更换成如下所示的代码：

这里当我们点击减号关闭详情的时候，会先获取到当前行的加减号和下一个加减号，然后用nextUntil选择区间内的所有元素，然后移除掉！

 这样  我们就实现我们需要的功能啦！！！！