需要动态地将类添加到由json数据填充的表并使用bootstrapTable

时间:2015-03-30 07:21:56

标签: jquery json twitter-bootstrap-3 feed bootstrap-table

我已经设法解决了如何通过json提取数据并使用bootstraptable()填充表。

其中一列是城市名称 - 我想在td上创建一个类,以便我可以通过css添加国家/地区标志。

这是我到目前为止所拥有的:

    $(document).ready(function(){
        var i = 0;
        var stockInterval;
        var doRequest = function(selector, reportName){
            var jsonpCallback = 'jsonCallback' + (i++)
            $.ajax({
                type: 'GET',
                url: 'ipaddressgoesheere' + reportName + '/' + jsonpCallback,
                async: true,
                selector: selector,
                jsonpCallback: jsonpCallback,
                contentType: "application/json",
                dataType: 'jsonp',
                success: function (data) {
                    $(selector)
                        .bootstrapTable('load', data);
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }

        $('#allReport').bootstrapTable({
            data: []
        });
        doRequest('#allReport', 'misIntradaySummary')
        setInterval(function () {
            doRequest('#allReport', 'misIntradaySummary');
        }, 1000);

        $('#marketsReport').bootstrapTable({
            data: [],
            columns: [{
            field: 'state',
            checkbox: true
        }, {
            field: 'city',
            title: 'City',
            align: 'right',
            valign: 'bottom',
            sortable: true
        }, {
            field: 'name',
            title: 'Item Name',
            align: 'center',
            valign: 'middle',
            sortable: true,
            formatter: nameFormatter
        }, {
            field: 'price',
            title: 'Price',
            align: 'left',
            valign: 'top',
            sortable: true,
    }],
            onClickRow: function(row){
                doRequest('#stockReport', 'topStocks_'+row.marketId)
                clearInterval(stockInterval);
                stockInterval = setInterval(function () {
                    doRequest('#stockReport', 'topStocks_' + row.marketId)
                }, 1000);
            }
        });

        $('#stockReport').bootstrapTable({
            data: []
        });
        doRequest('#marketsReport', 'misIntradayMarket')
        setInterval(function () {
            doRequest('#marketsReport', 'misIntradayMarket');
        }, 1000);
    });

当我将数据分解为列时,如何将“城市”用作TD的类名称时的任何想法?

1 个答案:

答案 0 :(得分:1)

您可以按照bootstrap-table document

在字段选项中添加课程
    $('#marketsReport').bootstrapTable({
        data: [],
        columns: [{
        field: 'state',
        checkbox: true
    }, {
        field: 'city',
        title: 'City',
        class : 'city',
        align: 'right',
        valign: 'bottom',
        sortable: true
    }] 

将此事件添加到侧文档就绪功能

中的页面中
   $('#marketsReport').on('load-success.bs.table',function(e, text){
       $('#marketsReport').find('.city').each(function(){
           $(this).addClass($(this).text());
        });
   });
文件上的

演示表

$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
    field: 'id',
    title: 'Item ID'
    class : 'id',
}, {
    field: 'name',
    title: 'Item Name'
    class : 'name',
}, {
    field: 'price',
    title: 'Item Price'
    class : 'price',
}, ]
});