php - 如何使用javascript和PHP导入数据Fuel UX datagrid

Question

燃料用户体验在这里: http://exacttarget.github.com/fuelux/

具体来说，我正在尝试使用 Datagrid。

举个例子: http://code.exacttarget.com/code-examples/datagrid.html

我试图重新创建这个: https://raw.github.com/ExactTarget/fuelux/master/sample/data.js

并通过PHP文件输出即可。我能够让 PHP 正确输出正确的数据并将其转储到主文件中，因此 data.js 文件现在输出到主 PHP/HTML 文件中，我的所有信息都在标题中使用这些标签:

<script></script>

并使用了来自 GitHub 网站的示例标记。

我似乎无法让它正常工作，还有其他方法可以将数据从 PHP 导入数据网格吗？ data.js 的一些代码是否应该更改，因为它现在正在主 php/html 文件中输出？

基本上是尝试使用 PHP 从 MySQL 中提取数据，然后将其转储到数据网格中。我似乎找不到太多文档，我想我真正的问题是将数据从我的 php 应用程序导入 Fuel UX Datagrid 的最佳方法是什么？

Answer 1

用php/mysql写入data.js，以sample/data.js为例。 (或将您的 .php 重命名为 data.js 并解析为 php ( Parse js/css as a PHP file using htaccess ))。

setting fuelux datagrid source from backbone collection给出了正确的方向。

假设您有一个包含以下字段的数据数据库表:id、title 和 city，并且您想在数据网格中显示它。

创建从您的 mysql 返回 json 格式的 php 文件(示例):

data.php:

<?
error_reporting(E_ALL);
ini_set('report_errors','on');
$mysqli = new mysqli('localhost', 'root', '*******', 'cities');
if ($mysqli->connect_error) {
    die('Connect Error (' . $mysqli->connect_errno . ') '
            . $mysqli->connect_error);
}

$data = array();
if ($result = $mysqli->query('SELECT `id`,`title`,`city` FROM `poi`')) 
{

        //$data['testdata'] = mysqli_fetch_all($result,MYSQLI_ASSOC);
        while(($row=$result->fetch_assoc())){$data[]=$row;}
        $result->close();
}


header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($data);
exit;

创建一个静态数据源testdatasource.js:

/*
 * Fuel UX Data components - static data source
 * https://github.com/ExactTarget/fuelux-data
 *
 * Copyright (c) 2012 ExactTarget
 * Licensed under the MIT license.
 */

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['underscore'], factory);
    } else {
        root.TestDataSource = factory();
    }
}(this, function () {

    var TestDataSource = function (options) {
        this._formatter = options.formatter;
        this._columns = options.columns;
        this._delay = options.delay || 0;
    };

    TestDataSource.prototype = {

        columns: function () {
            return this._columns;
        },

        data: function (options, callback) {
            var self = this;

            setTimeout(function () {
                var data;
                $.ajax({
                    url: '/data.php',
                    dataType: 'json',
                    async: false,
                    success: function(result) {
                        data = result;
                    }
                });

                                    // SEARCHING
                if (options.search) {
                    data = _.filter(data, function (item) {
                        var match = false;

                        _.each(item, function (prop) {
                            if (_.isString(prop) || _.isFinite(prop)) {
                                if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
                            }
                        });

                        return match;
                    });
                }


                var count = data.length;

                // SORTING
                if (options.sortProperty) {
                    data = _.sortBy(data, options.sortProperty);
                    if (options.sortDirection === 'desc') data.reverse();
                }

                // PAGING
                var startIndex = options.pageIndex * options.pageSize;
                var endIndex = startIndex + options.pageSize;
                var end = (endIndex > count) ? count : endIndex;
                var pages = Math.ceil(count / options.pageSize);
                var page = options.pageIndex + 1;
                var start = startIndex + 1;

                data = data.slice(startIndex, endIndex);

                if (self._formatter) self._formatter(data);

                callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });

            }, this._delay)
        }
    };

    return TestDataSource;
}));

这从 data.php $.ajax({
网址:'/data.php'，
数据类型:'json'，
异步:错误，
成功:功能(结果){
数据=结果；
}
});

在您的 html 中调用您的数据集并创建列:

var dataSource = new TestDataSource({
columns: [
{
property: 'id',
label: 'ID',
sortable: true
},
{
property: 'title',
label: 'Title',
sortable: true
},
{
property: 'city',
label: 'City',
sortable: true
}
],
delay: 250
});

使用此数据源初始化网格:

$('#MyGrid').datagrid({
dataSource: dataSource
});

让数据网格工作:

1. 从/fuelux-master/下载源代码 (zip) 并解压缩
2. 创建/index.html

index.html:

<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="./fuelux-master/dist/css/fuelux.css" rel="stylesheet">

<script src="./fuelux-master/lib/require.js"></script>

<style type="text/css">
body {
padding-bottom: 200px;
}
</style>

<script>
requirejs.config({
paths: {
'jquery': './fuelux-master/lib/jquery',
'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
'bootstrap': './fuelux-master/lib/bootstrap/js',
'fuelux': './fuelux-master/src',
'sample': './fuelux-master/sample'
}
});

require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], 


function ($, sampleData, StaticDataSource,datasourceTree) {


// DATAGRID
var dataSource = new StaticDataSource({
columns: [
{
property: 'toponymName',
label: 'Name',
sortable: true
},
{
property: 'countrycode',
label: 'Country',
sortable: true
},
{
property: 'population',
label: 'Population',
sortable: true
},
{
property: 'fcodeName',
label: 'Type',
sortable: true
}
],
data: sampleData.geonames,
delay: 250
});

$('#MyGrid').datagrid({
dataSource: dataSource
});

});
</script>


</head>

<body>

<div class="container">


<!-- DATAGRID -->
<table id="MyGrid" class="table table-bordered datagrid">

<thead>
<tr>
<th>
<span class="datagrid-header-title">Geographic Data Sample</span>

<div class="datagrid-header-left">
<div class="input-append search datagrid-search">
<input type="text" class="input-medium" placeholder="Search">
<button class="btn"><i class="icon-search"></i></button>
</div>
</div>
<div class="datagrid-header-right">
<div class="select filter" data-resize="auto">
<button data-toggle="dropdown" class="btn dropdown-toggle">
<span class="dropdown-label"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-value="all" data-selected="true"><a href="#">All</a></li>
<li data-value="lt5m"><a href="#">Population &lt; 5M</a></li>
<li data-value="gte5m"><a href="#">Population &gt;= 5M</a></li>
</ul>
</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>
<div class="select grid-pagesize" data-resize="auto">
<button data-toggle="dropdown" class="btn dropdown-toggle">
<span class="dropdown-label"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li data-value="5" data-selected="true"><a href="#">5</a></li>
<li data-value="10"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="50"><a href="#">50</a></li>
<li data-value="100"><a href="#">100</a></li>
</ul>
</div>
<span>Per Page</span>
</div>
</div>
<div class="datagrid-footer-right" style="display:none;">
<div class="grid-pager">
<button type="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">
<button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
<ul class="dropdown-menu"></ul>
</div>
<span>of <span class="grid-pages"></span></span>
<button type="button" class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>

</div>
</body>
</html>

请参阅 requirejs 配置路径中的 ./fuelux-master/。另请参阅 var dataSource 的初始化以定义您的列。至少您需要编写带有 id="MyGrid"的表格的完整 html。

CDN 示例的一些重构和使用:http://plnkr.co/hZRjry5vG8ZcOG4VbjNq

• 通过 CDN 和 requirejs 使用 bootstrap 和 jQuery，参见 Loading Bootstrap from CDN with Require.js
• 用 datagrid.js 替换 all.js 的包含(注意没有 select.js datagrid 将无法工作，select.js 需要 util.js)
• 删除示例/数据源树，因为我们不需要它