使用DreamFactory API填充表格&使用Javascript

时间:2017-03-18 01:58:56

标签: javascript html dreamfactory

我正在尝试使用仅属于一家餐馆的产品填充产品表,到目前为止,我设法填充餐厅餐桌,但是当我点击餐厅时,它没有显示属于该餐厅的产品地点。我遵循此处提供的代码:https://github.com/dreamfactorysoftware/javascript-sdk

到目前为止,关于产品表

,我得到了这个

route.js

            case 'restaurantes':
                setButton('left', template, 'index', 'redirect', null);

                $.api.getRecords('restaurante', null, getToken('token'), populateRestaurantesTable);
                break;

            case 'produto_show':
                setButton('left', template, 'restaurantes', 'redirect', null);
                setButton('right', template, 'restaurantes/' + pathArray[1] + '/edit', 'redirect', null);

                var params = 'filter=id%3D' + pathArray[1] + '&fields=nomeRestaurante';
                $.api.getRecords('produto', params, getToken('token'), populateProdutoShowName);

                break;

的script.js

    var tableProduto = $('#table_produto').DataTable({
    "paging":   false,
    "info":     false,
    "order": [
        [2, "asc" ],
        [3, "asc"],
        [1, "asc"]
    ],
    "columnDefs": [
        { "visible": false, "targets": 0 },
        { "visible": false, "targets": 2 },
        { "visible": false, "targets": 3 }
    ],

    "drawCallback": function () {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(2, {page:'current'} ).data().each( function ( produto, i ) {
            if ( last !== produto) {
                $(rows).eq( i ).before(
                    '<tr class="produto info"><td colspan="4">'+produto+'</td></tr>'
                );

                last = produto;
            }
        } );

        $("#table_produto thead").remove();
        $("#table_produto tfoot").remove();
    }
});

var populateProdutoShowName = function(data) {
    $('#produto_show_name').text(data[0].name);
};


var populateProdutoTable = function(data) {
    var produtos = [];

    $.each(data, function(idProduto, produto){
        produtos.push([
            produto.idProduto,
            produto.nomeProduto + ' ' + produto.precoProduto,
            produto.nomeProduto.charAt(0).toUpperCase(),
            produto.precoProduto
        ])
    });

    $('#table_produto').dataTable().fnClearTable();
    $('#table_produto').dataTable().fnAddData(produtos);
    $('#table_produto').dataTable().fnDraw();
};

$('#table_produto tbody').on( 'click', 'tr', function () {
    var produtoId = $('#table_produto').DataTable().row(this).data();

    if (produtoId !== undefined)
        $.route('produto/' + produtoId[0]);
});

$('#table_produto_search').keyup(function(){
    $('#table_produto').DataTable().search($(this).val(), false, true).draw() ;
});

的index.html

   <div id="template_produto_show">
            <nav class="navbar navbar-fixed-top df-nav cen col-md-12" role="navigation" style="">
                <ul class="nav navbar-nav" style="width: 100%">
                    <li class="pull-left"><button type="button" id="produto_menu_left" class="btn btn-default btn-menu">Voltar</button></li>
                    <li class="pull-left"><button type="button" id="produto_menu_logout" class="btn btn-default btn-menu-logout">Sair</button></li>
                    <li style="float: none; display: inline-block; position: relative; text-align: center"><a href="#index"><img src="Leanline1503-Leanline1503/img/icone.png" height="25"></a></li>
                </ul>
            </nav>
            <div class="row vert-offset-top-30"></div>
            <div class="col-md-2"></div>
            <div class="col-md-8">

                <div style="text-align: center"><h2><span id="produto_show_name"></span></h2></div>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </div>
                    <input type="text" id="table_produto_search" class="form-control" placeholder="Procurar produtos">
                </div>
                <table class="table table-hover" id="table_produto">
                    <thead>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="col-md-2"></div>
        </div>

我在这里所做的类比是,这些团体是我的&#34;餐馆&#34;和&#34; Group_Show&#34;是显示组内的联系人,这对我来说是显示&#34; Produtos&#34;在集团内部。 我不知道是否需要帮助我的所有信息,但如果您需要更多信息,请告诉我。感谢大家的时间和帮助!

1 个答案:

答案 0 :(得分:0)

所以我改变了route.js,现在是

case 'produto_show':
            setButton('left', template, 'restaurantes', 'redirect', null);
            setButton('right', template, 'restaurantes/' + pathArray[1] + '/edit', 'redirect', null);

            var params = 'filter=restaurante_id_restaurante%3D' + pathArray[1] + '&fields=nomeProduto';
            $.api.getRecords('produto', params, getToken('token'), populateProdutoShowName);

            break;