Bootstrap Table -detailView和detailFilter的使用

查看表格

detailFilter 属性：data-detail-filter Type:Function Default:function(index,row){ return true}

detailView 属性：data-detail-view Type:Boolean Default:false

代码语言：javascript复制

<table id="table" data-toggle="table" data-height="460" data-detail-view="true" data-detail-formatter="detailFormatter" data-detail-filter="detailFilter">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

代码语言：javascript复制

<script>
console.log(data)
$("#table").bootstrapTable({ data: data })

function detailFormatter(index, row) {
    //var html=[];
    //$.each(row.children,function(key,value){
    //html.push('<p> key is ' key '</p>')
    //})
    //return html.join("")
    var html = `<ul class="list-unstyled">
        <li style="float:left;margin-right:20px;"><b>name</b>:${row.children["child-name"]}</li>
        <li style="float:left;margin-right:20px;"><b>price</b>:${row.children["child-price"]}</li>
        <li style="float:left;margin-right:20px;"><b>amount</b>:${row.children["child-amount"]}</li>
        </ul>`
    return html;
}

function detailFilter(index, row) {
    return row.children
    //return index % 2 === 0
}
</script>

(adsbygoogle = window.adsbygoogle || []).push({});

data default filter view window

0 人点赞