Bootstrap Table -detailView和detailFilter的使用

tianyawhl

发布于 2019-10-24 15:18:57

2.5K0

发布于 2019-10-24 15:18:57

文章被收录于专栏：前端之攻略

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

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

<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({});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

data