无法在bootstarap bootgrid中打印子表值

时间:2015-07-28 08:25:32

标签: jquery-bootgrid

JSON回复:

{
    "current": 1,
    "rowCount": 10,
    "rows": [
        {
            "id": 19,
            "sender": "123@test.de",
            "received":"[
        {
            "name":"received1"
        }
    ]
        }
    ]
},
{
    "id": 14,
    "sender": "123@test.de",
    "received":  [
        {
            "name":"received2"
        }
    ]
},
    ...],
"total": 1123}

我想使用bootgrid打印收到的名称。

示例:

<th data-column-id="id" data-identifier="true">Id</th>
<th data-column-id="received.name">Name</th>

我可以打印received.name,但无法打印id

2 个答案:

答案 0 :(得分:0)

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="incomesModalLabel">Este ingreso se relaciona mejor con...</h4>

</div>
<div class="modal-body">

    <div id="incomeSelectType">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                <div class="income-type " id="income-type-first" data-type="unit">
                    <h5>Ingreso por Venta de Unidades</h5>

                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-second" data-type="hour">
                    <h5>Ingreso por Facturación de Horas</h5>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-third" data-type="recurring">
                    <h5>Ingreso Recurrente/Subscripciones</h5>

                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="income-type " id="income-type-fourth" data-type="other">
                    <h5>Otro tipo de Ingreso</h5>

                </div>
            </div>
        </div>
    </div>


    <div id="income-type-first-box" style="display: none;">
        VU
    </div>
    <div id="income-type-second-box" style="display: none;">
        FH
    </div>
    <div id="income-type-third-box" style="display: none;">

        @include("incomes.recurringCharges.create")

    </div>
    <div id="income-type-fourth-box" style="display: none;">
        OI
    </div>

</div>

<div class="row" id="controles">
    <div class="col-md-3">
        <p align="left" class="mar-l20 delete"  data-dismiss="modal" >
            <span class="glyphicon glyphicon-trash" style="display:block;"></span> Eliminar
        </p>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <p align="right"  class="mar-r20 mar-t20">
                            <span style="display:none;">
                                <span class="glyphicon glyphicon-arrow-left" style="color:orange;"></span> <a id="incomes-back">Regresar</a> |
                            </span>
            <a id="incomes-next">Siguiente</a> <span class="glyphicon glyphicon-arrow-right" style="color:orange;"></span>
        </p>
    </div>
</div>
<div class="modal-footer">
    <div class="row">
        <div class="col-md-6">
            <p align="left">
                Avance para completar este dato:
            </p>
        </div>
        <div class="col-md-6">
            <p align="right">
                100%
            </p>
        </div>
        <div class="col-md-12">
            <div class="progress" id="incomeProgress">
                <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 00%">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</div>

//这是填充我的朋友网格的方法。

答案 1 :(得分:-1)

对于上述问题,我们必须在bootstrap bootgrid中使用data-formatter。

我在这里附上了代码,希望它会有所帮助。

<script>  $("#MyTable").bootgrid({
            ajax: true,formatters: {
                "link": function (column, row) 
                {
                    return "<span>" + row.received.name+ "</span>";
                }
            }}); 
</script>

你的Html会喜欢

 <table>
 <th data-column-id="received.name" data-formatter="link">Anything</th> 
 </table>