Question

我参考下面的例子，

http://adamalex.github.io/fuelux-dgdemo/

我的代码：

更新

       <!DOCTYPE html>
<html class="fuelux" lang="en">
   <head>
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />
       <style>
          body {
             padding-top: 60px;
          }
       </style>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Fuel UX Datagrid</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Demo</a></li>
                        <li><a href="https://github.com/ExactTarget/fuelux">GitHub</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <table id="MyGrid" class="table table-bordered datagrid">
            <thead>
                <tr>
                    <th>
                        <span class="datagrid-header-title">Flickr Search</span>
                        <div class="datagrid-header-left"></div>
                        <div class="datagrid-header-right">
                            <div class="input-append search">
                                <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>
                        <div class="datagrid-footer-left" style="display:none;">
                            <div class="grid-controls">
                                <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
                                <select class="grid-pagesize"><option>5</option><option>10</option></select>
                                <span>Per Page</span>
                            </div>
                        </div>
                        <div class="datagrid-footer-right" style="display:none;">
                            <div class="grid-pager">
                                <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
                                <span>Page</span>
                                <div class="input-append dropdown combobox">
                                    <input class="span1" type="text">
                                </div>
                                <span>of <span class="grid-pages"></span></span>
                                <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                            </div>
                        </div>
                    </th>
                </tr>
            </tfoot>
        </table>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script>
    <script src="~/datasource.js"></script>
    <script>
        $('#MyGrid').datagrid({
            dataSource: new FlickrDataSource({

                columns: [{
                    property: 'image',
                    label: 'Image',
                    sortable: false
                }, {
                    property: 'title',
                    label: 'Title',
                    sortable: false
                }],

                formatter: function (items) {
                    $.each(items, function (index, item) {
                        item.image = '<img src="' + flickrUrl(item) + '"></a>';
                    });
                }
            })
        });

        function flickrUrl(image) {
            return 'http://farm' + image.farm + '.staticflickr.com/' + image.server + '/' + image.id + '_' + image.secret + '_t.jpg';
        }
    </script>

</body>
</html>

当我运行项目时，我会看到下面的页面

Chrome浏览器控制台上没有错误。

enter image description here

更新

浏览器网络端：

enter image description here

我不知道我错过了什么？

我们将不胜感激。

感谢。

Answer 1

更新到此，看看是否有帮助：

<!DOCTYPE html>
<html class="fuelux" lang="en">
   <head>
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />
       <style>
          body {
             padding-top: 60px;
          }
       </style>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>

See a Demo @ jsbin.

Answer 2

我很高兴CSS问题得到了解决。所有FuelUX控件必须放在.fuelux类中。这与您的问题无关，但我建议您通过FuelUX CDN使用最新的2.x版FuelUX。我们现在正在开发FuelUX 3，并希望今年夏天能够推出它。

Jquery Datagrid无法显示

2 个答案:

See a Demo @ jsbin.