使用这个文件我们可以得到一个CRUD表但是我不能把数据放在这个表中因为我是初学者而且在这种情况下很低。数据必须是jJSON数据,我想通过代码PHP从mysql数据库中获取数据。
这是整个文件:https://github.com/Askedio/jQuery-Cruddy/
默认文件索引:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery CRUDdy</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="../src/css/jquery-cruddy.css" rel="stylesheet">
<style>
/* For example page only. Not part of cruddy. */
body{ margin: 40px 0 200px 0}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>CRUD<sup>dy</sup></h1>
<p>A jQuery plugin to assist with JSON API driven CRUD tasks.</p>
</div>
</div>
<div class="container container-user">
<div class="row">
<div class="col-md-12">
<div id="modal-create-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
<script id="create-edit" type="text/x-jsrender">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
{{if id}}
Edit #{{:id}}
{{else}}
Create
{{/if}}
</h4>
</div>
<div class="modal-body">
<div class="alert-control alert"></div>
<p></p>
<div class="form-group row">
<label class="col-md-4 control-label">Full Name</label>
<div class="col-md-6">
<input name="name" class="form-control" value="{{:attributes.name}}">
<span class="help-block hide">
<strong></strong>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input name="email" class="form-control" value="{{:attributes.email}}">
<span class="help-block hide">
<strong></strong>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<input name="id" class="hide" value="{{:id}}">
<button type="submit" class="btn btn-success">
{{if id}}
Save
{{else}}
Create
{{/if}}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</script>
<form action="https://cruddy.io/app/api/admin/user" class="create-edit"></form>
</div>
</div>
<div class="alert-control alert"></div>
<div class="row">
<div class="col-sm-6 hidden-xs">
<h1 style="margin:0">User Management</h1>
</div>
<div class="col-sm-6 col-xs-12 text-right">
<button type="button" class="btn btn-default btn-refresh"><em class="fa fa-refresh"></em></button>
<button type="button" class="btn btn-primary btn-create" data-toggle="modal" data-target="#modal-create-edit">Create New</button>
</div>
</div>
<hr>
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-7 col-md-9">
<h3 class="panel-title"> </h3>
</div>
<div class="col col-xs-5 col-md-3 text-right">
<form class="form-inline search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button type="submit" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-list" data-href="test.php">
<thead>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs" data-col="id">ID <em class="fa fa-fw fa-sort pull-right em-sort"></th>
<th data-col="name">Name <em class="fa fa-fw fa-sort pull-right em-sort"></em></th>
<th data-col="email">E-mail <em class="fa fa-fw fa-sort pull- right em-sort"></em></th>
</thead>
<tbody>
<tr><td colspan="4">Loading...</td></tr>
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">
<form class="form-inline">
<select name="limit" class="form-control">
<option>1
<option>10
</select>
</form>
</div>
<div class="col col-xs-8 list-pagination">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="no-results" type="text/x-jsrender">
<tr>
<td colspan="5"><strong>No Results Found.</strong></td>
</tr>
</script>
<script id="row-item" type="text/x-jsrender">
<tr>
<td align="center">
<button type="button" class="btn btn-default" data-action="read" data-href="https://cruddy.io/app/api/admin/user/{{:id}}" data-toggle="modal" data-target="#modal-create-edit"><em class="fa fa-pencil"></em></button>
<button type="button" class="btn btn-danger" data-action="delete" data-href="https://cruddy.io/app/api/admin/user/{{:id}}"><em class="fa fa-trash"> </em></button>
</td>
<td class="hidden-xs">{{:id}}</td>
<td>{{:attributes.name}}</td>
<td>{{:attributes.email}}</td>
</tr>
</script>
<script id="list-pagination" type="text/x-jsrender">
<ul class="pagination pull-right">
{{if links.prev}}<li><span data-href="{{:links.prev}}">«</span></li> {{/if}}
<li><span disabled>{{:meta.currentPage}} of {{:meta.total}}</span></li>
{{if links.next}}<li><span data-href="{{:links.next}}">»</span></li>{{/if}}
</ul>
</script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.73/jsrender.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="../src/js/jquery-cruddy.js"></script>
<script>
$('.container-user').cruddy({'onLog': function($this, data) {console.log(data)}});
</script>
</body>
</html>
我正在尝试这种方式,但我确信这是不对的。
一个简单的测试(test.php):
$array = array('id' => 1, 'name' => 'Luciano', 'email' => 'lucianop@hotmail.com');
echo json_encode($array);
答案 0 :(得分:0)
感谢您使用我的包裹。对不起,我有一段时间没用过它。
默认设置使用Laravel 5s分页提供的数据,通过我的Laravel Cruddy软件包https://github.com/Askedio/laravel-Cruddy
您可以自己提供数据,似乎是
['data' => [], 'meta' => []]
查看此处的数据: https://github.com/Askedio/laravel-Cruddy/blob/master/src/Transformers/ApiTransformer.php#L157
我也传递链接以获取下一组数据。该插件使用listLaravel
方法使用laravel包进行分页。