这是我第一次使用Yii2框架,所以我对它的特性和提供的东西了解不多。
目前,我将 AJAX 与所有项目集成在一起,并使用脚本和一个表来根据您选择的选项更新数据。
问题是,项目占用了GridView的表,我被要求所有的表都是一样的,也就是说,我现在使用的表是GridView的,不知道如何使用GridView实现 AJAX 。
我把我的HTML作品留给你:
HTML格式
<div class="course-index container">
<div class="row">
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
Cursos
</div>
<div class="panel-body">
<div class="refresh-course">
<table class="table">
<tbody id="course-item">
<?php foreach ($courses as $key): ?>
<tr class="course-<?= $key['id'] ?> course-tr" id="<?= $key['id'] ?>">
<td class="name"><?= $key['name'] ?></td>
<td><span class="badge badge-info"><?= $key['amount'] ?></span></td>
<td><a title="Listar estudiantes" class="list-course" data-id="<?= $key['id'] ?>"><i class="fa fa-chevron-right"></i></a></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="panel">
<div class="panel-heading">
Estudiantes inscritos
</div>
<div class="panel-body">
<div class="refresh-students">
<table class="table table-striped table-bordered tablesorter" id="report-table">
<thead>
<th>Email</th>
<th>Fecha inicio</th>
<th>% Completados</th>
<th>Tiempo realizado</th>
</thead>
<tbody id="resultData">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
脚本
<script type="text/javascript">
initializate();
function initializate(){
$('#report-table > tbody').empty();
$("#course-item tr[id]").click(function(){
var order = $(this).attr('id');
$.ajax({
url: '<?= Url::to(['default/load/']); ?>',
type: 'POST',
data : {id: order},
success:function(data){
$('#report-table > tbody').empty();
var html = '';
data.data.forEach(element => {
html += '<tr>' +
'<td>' + element.email + '</td>' +
'<td style="text-align: center;">' + (element.start_date == null ? '-' : new Date(element.start_date).toLocaleDateString("en-US") ) + '</td>' +
'<td style="text-align: center;">' + element.percent + '</td>' +
'<td>' + element.time + '</td>' +
'</tr>';
});
$('#resultData').html(html);
}
});
});
};
</script>
1条答案
按热度按时间fdbelqdn1#
您可以使用Pjax。请参阅文档https://www.yiiframework.com/doc/api/2.0/yii-widgets-pjax
您还可以在使用jquery单击刷新按钮时刷新表
boxPjax是Pjax容器ID