Bootstrap Table -detailView和detailFilter的使用

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值