如何使用javascript和PHP导入数据燃料UX datagrid
燃料UX在这里: 具体来说,我正在尝试使用Datagrid 下面是一个例子: 我已尝试重新创建此: 然后通过PHP文件输出它。我能够让PHP正确地输出正确的数据,并将其转储到主文件中,因此data.js文件现在在主PHP/HTML文件中输出,我的所有信息在标题中使用以下标记:如何使用javascript和PHP导入数据燃料UX datagrid,php,javascript,jquery,twitter-bootstrap,fuelux,Php,Javascript,Jquery,Twitter Bootstrap,Fuelux,燃料UX在这里: 具体来说,我正在尝试使用Datagrid 下面是一个例子: 我已尝试重新创建此: 然后通过PHP文件输出它。我能够让PHP正确地输出正确的数据,并将其转储到主文件中,因此data.js文件现在在主PHP/HTML文件中输出,我的所有信息在标题中使用以下标记: <script></script> 并使用了GitHub网站上的示例标记 我似乎无法让它正常工作,是否有其他方法将数据从PHP导入datagrid?data.js的一些代码是否应该更改,
<script></script>
并使用了GitHub网站上的示例标记
我似乎无法让它正常工作,是否有其他方法将数据从PHP导入datagrid?data.js的一些代码是否应该更改,因为它现在是在主php/html文件中输出的
基本上是尝试使用PHP从MySQL中提取数据,然后将其转储到数据网格中。我似乎找不到太多文档,我想我真正的问题是,从php应用程序将数据导入Fuel UX Datagrid的最佳方式是什么?使用php/mysql write to data.js,以sample/data.js为例。(或者将.php重命名为data.js并解析为php())
给出了正确的方向
假设您有一个数据数据库表,其中包含以下字段:id、title和city,并且希望在datagrid中显示这些字段
创建从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;
这将从data.php$.ajax构建一个数据集({
url:“/data.php”,
数据类型:“json”,
async:false,
成功:功能(结果){
数据=结果;
}
});代码>
在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
});
让datagrid正常工作:
从/fuelux-master下载源代码(zip)并将其解压缩到/fuelux-master/
创建/index.html
index.html:
/*
* 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;
}));
<!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 < 5M</a></li>
<li data-value="gte5m"><a href="#">Population >= 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>
燃料UX2
身体{
垫底:200px;
}
requirejs.config({
路径:{
“jquery”:“./fuelux主机/lib/jquery”,
“下划线”:”http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
“bootstrap”:“./fuelux master/lib/bootstrap/js”,
“fuelux”:“./fuelux主控器/src”,
“样本”:“./fuelux主控/样本”
}
});
需要(['jquery'、'sample/data'、'sample/datasource'、'sample/datasourceTree'、'fuelux/all'],
函数($,sampleData,StaticDataSource,datasourceTree){
//数据网格
var dataSource=新的StaticDataSource({
栏目:[
{
属性:“地名名称”,
标签:“名称”,
可排序:正确
},
{
属性:“countrycode”,
标签:“国家”,
可排序:正确
},
{
财产:'人口',
标签:“人口”,
可排序:正确
},
{
属性:“fcodeName”,
标签:“类型”,
可排序:正确
}
],
数据:sampleData.geonames,
延误:250
});
$(“#MyGrid”).datagrid({
数据源:数据源
});
});
地理数据样本
-
属于
每页
页
属于
请参见requirejs配置路径中的/fuelux master/。另请参见var dataSource
的初始化以定义列。至少您需要使用id=“MyGrid”编写表的完整html
CDN的一些重构和使用示例:
- 通过CDN和requirejs使用引导和jQuery,请参阅
- 用datagrid.js替换include of all.js(注意如果没有select.js,datagrid将无法工作,select.js需要util.js)
- 删除示例/数据源树,因为我们不需要它
在我看来,您的方法是可靠的,但您可能需要按照您的建议进行一些轻微的调整。您的JavaScript控制台中是否有任何错误?你能发布一个data.js版本的示例吗?我有一个类似的问题。就我所见,我完全遵循了他们的教程,也使用了requirejs、下划线js,使用他们在示例页面上使用的data.js和datasource.js文件尝试复制示例,但我的datagrid中没有显示任何内容,控制台中没有错误,什么都没有。我是无知的atm。谢谢你的回复,我最终决定我需要学习javascript,特别是Node.js。。。。一个多月后,我无法想象在未来的项目中使用PHP,导入也不会更容易。。。。正是因为我缺乏知识,才使我无法做到这一点。。。。但现在它是如此简单,我笑了我花了多少时间试图找出它。谢谢你的回复!