表格不会使用jquery sheetrock显示

时间:2014-12-22 14:30:48

标签: javascript jquery html plugins sheetrock

您好我试图使用jquery插件Sheetrock显示来自Google Spreadsheet的表格。当我在jsfiddle中执行它时它显示正常,但它在html上加载时没有显示。这是代码:

!DOCTYPE html
<html>
    <head>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="/dist/jquery.sheetrock.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/sheetrock.css">
        <script>
        $(document).ready(function() {
            var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0';

            $('#statistics').sheetrock({url: mySpreadsheet});
        });
        </script>
        <meta charset="utf-8">
        <title>table</title>
    </head>
    <body>
        <table id="statistics" class="table table-condensed table-striped"></table>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

“jquery.sheetrock.min.js”库没有得到正确的路径。也许这就是为什么,它没有显示出来。

<script>
            $(document).ready(function() {
                //Tomo el nodo al que luego le agrego li según correspondan
                //<li class="dropdown-header">Rubro</li> Para los rubros
                //<li><a href="#tipo">Tipo</a></li> 
                var lista = $("ul.dropdown-menu");

                var navbarProductosLista = undefined;

                //Chequea hasta que la variable navbarList de ProductosController esta asignada
                function checkVariable() {
                    //Toma la variable navbarList del scope de ProductosController
                    //para agregar la lista de manera dinámica
                    navbarProductosLista = angular.element($("[ng-controller=ProductosController]")).scope().navbarList;

                    if(navbarProductosLista != undefined) {
                        for(var i = 0; i < navbarProductosLista.length; i++) {
                            if(navbarProductosLista[i].isHeader === true) {
                                var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" +  navbarProductosLista[i].descripcion + "</a></li>");
                                nodo.children().addClass("dropdown-header");
                                lista.append(nodo);
                            }
                            else {
                                var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" +  navbarProductosLista[i].descripcion + "</a></li>");
                                lista.append(nodo);
                            }
                        }
                        clearInterval(id);
                    }

                    $("ul li:first-child")
                    .addClass("active");

                    //This is the line that causes the problem
                    $(".tab-content div:first-child")
                    .addClass("in active");

                    //And this the line that fix it
                    $(".panel-heading")
                    .removeClass("in active");
                };

                var id = setInterval(checkVariable, 250);
            });
        </script>