dongshao8125 2012-11-24 23:00
浏览 71
已采纳

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

Fuel UX is here: http://exacttarget.github.com/fuelux/

Specifically i'm trying to use the Datagrid.

Here's an example: http://code.exacttarget.com/code-examples/datagrid.html

I've attempted to recreated this: https://raw.github.com/ExactTarget/fuelux/master/sample/data.js

And just output it through the PHP file. I was able to get PHP to correctly output the correct data and just dumped it into the main file so the data.js file is now output in the main PHP/HTML file with all my information in the header using these tags:

<script></script>

And used the sample markup from the GitHub website.

I can't seem to get it to work correctly, is there another way to import data from PHP to the datagrid? Should some of the code for the data.js be changed since it is now being output in the main php/html file?

Basically attempting to pull data from MySQL using PHP and then dump it into a data grid. I can't seem to find much documentation and I guess my real question would be what is the best way to import data from my php application into the Fuel UX Datagrid?

  • 写回答

1条回答 默认 最新

  • drmy1050 2013-06-05 04:37
    关注

    With php / mysql write to data.js, use sample/data.js as an example. (or rename your .php to data.js and parse as php (Parse js/css as a PHP file using htaccess)).

    setting fuelux datagrid source from backbone collection gives the right direction.

    Presume you got a data databases table with the fields: id, title and city and you want to show this in the datagrid.

    Create php file which return json format from your mysql (example):

    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;
    

    create a static datasource 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;
    }));
    

    This builds a data set from data.php $.ajax({ url: '/data.php', dataType: 'json', async: false, success: function(result) { data = result; } });

    In your html call your data set and create the columns:

    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
    });
    

    Initialize the grid grid with this data source:

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

    Get the datagrid working:

    1. download the source (zip) from and extract to /fuelux-master/
    2. create /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>
    

    see ./fuelux-master/ in the paths of the requirejs config. Also see the initializations of var dataSource to define your columns. At least you needto write the full html of the table with id="MyGrid".

    Some refactoring and use of CDNs example: http://plnkr.co/hZRjry5vG8ZcOG4VbjNq

    • use bootstrap and jQuery via CDN with requirejs, see Loading Bootstrap from CDN with Require.js
    • replace the include of all.js with datagrid.js (note the datagrid won't work without select.js and util.js is required for select.js)
    • remove sample/datasourceTree cause we don't need it
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 MATLAB解决问题
  • ¥20 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目