本文介绍了视图在CodeIgniter 3中呈现了多次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是CodeIgniter 3,在我的index()
函数中,我将一些数据传递给我的视图并执行其他一些函数。但在我看来,相同的元素被渲染了3次。我想这是因为我在其他两个函数中也加载了相同的视图。我需要一次渲染这些元素。我怎么能这么做呢?这!视图屏幕快照。缩小以捕获完整视图:
控制器代码:
<?php
class Insight extends CI_Controller
{
public function index()
{
$this->load->Model('Insight_Model');
$data['donorcount'] = $this->Insight_Model->donorCount();
$this->load->Model('Insight_Model');
$data['packetcount'] = $this->Insight_Model->packetCount();
$this->load->view('insight', $data);
$this->bloodTypesChart();
$this->genderCountsChart();
}
public function bloodTypesChart()
{
$query=" SELECT BloodType as blood_type, COUNT(PacketID) as packetcount FROM packets WHERE isAvailable = 1 GROUP BY blood_type";
$packetChartData = [];
$blood_types = $this->db->query($query)->result_array();
foreach($blood_types as $row)
{
$packetChartData['packetLabel'][] = $row['blood_type'];
$packetChartData['packetData'][] = $row['packetcount'];
}
$packetChartData['chart_data'] = json_encode($packetChartData);
$this->load->view('insight',$packetChartData);
}
public function genderCountsChart()
{
$query=" SELECT DonorGender as donor_gender, COUNT(DonorID) as donor_count FROM donors GROUP BY donor_gender";
$genderChartData = [];
$genderCount = $this->db->query($query)->result_array();
foreach($genderCount as $row)
{
$genderChartData['genderLabel'][] = $row['donor_gender'];
$genderChartData['genderData'][] = $row['donor_count'];
}
$genderChartData['chart_data'] = json_encode($genderChartData);
$this->load->view('insight',$genderChartData);
}
}
查看代码:
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assests/styles/table.css'); ?>">
<title>Kegalle Blood Bank - Blood Types Insight</title>
</head>
<body style="margin-bottom: 50px">
<?php include_once 'navbars/navbar2.php' ?>
<?php
if (!($this->session->userdata('isStaffLoggedIn'))) {
redirect('home/login');
}
?>
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-5">
<h1>Insight</h1>
</div>
<div class="row text-center m-5">
<div class="col-md-6">
<div class="card border-info mx-sm-1 p-3 shadow-lg">
<div class="card border-danger shadow text-danger p-3 my-card"><span class="fa fa-heart"
aria-hidden="true"></span>
</div>
<div class="text-danger text-center mt-3"><h4>Total Donors</h4></div>
<div class="text-danger text-center mt-2"><h1><?php echo $donorcount; ?></h1></div>
</div>
</div>
<div class="col-md-6">
<div class="card border-success mx-sm-1 p-3 shadow-lg">
<div class="card border-success shadow text-success p-3 my-card"><span class="fa fa-eye"
aria-hidden="true"></span>
</div>
<div class="text-success text-center mt-3"><h4>Total Available Packets</h4></div>
<div class="text-success text-center mt-2"><h1><?php echo $packetcount; ?></h1></div>
</div>
</div>
</div>
</div>
</div>
<div class="chart-container container mb-4">
<div class="bar-chart-container">
<canvas id="packet-count-chart" style="background: #ecf5ec"></canvas>
</div>
</div>
<div class="chart-container container">
<div class="doughnut-chart-container">
<canvas id="gender-count-chart" style="background: #ecf5ec"></canvas>
</div>
</div>
<?php include_once 'footer/footer.php' ?>
</body>
<script>
const ctx1 = document.getElementById('packet-count-chart');
const chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: <?php echo json_encode($packetLabel)?>,
datasets: [{
label: '# of packets available',
data: <?php echo json_encode($packetData)?>,
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive:true,
scales: {
y: {
beginAtZero: true
}
}
}
});
const ctx2 = document.getElementById('gender-count-chart');
const chart2 = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: <?php echo json_encode($genderLabel)?>,
datasets: [{
label: '# of donors',
data: <?php echo json_encode($genderData)?>,
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</html>
推荐答案
收集所有数据,打包成$Data,然后将其传递给查看。顺便说一句,
,太可怕了。使用AJAX获取此数据
控制器
<?php
class Insight extends CI_Controller
{
public function index()
{
$this->load->Model('Insight_Model');
$data['donorcount'] = $this->Insight_Model->donorCount();
$data['packetcount'] = $this->Insight_Model->packetCount();
$data['packetChartData'] = $this->bloodTypesChart();
$data['genderChartData'] = $this->genderCountsChart();
$this->load->view('insight', $data);
}
public function bloodTypesChart()
{
$query=" SELECT BloodType as blood_type, COUNT(PacketID) as packetcount FROM packets WHERE isAvailable = 1 GROUP BY blood_type";
$packetChartData = [];
$blood_types = $this->db->query($query)->result_array();
foreach($blood_types as $row)
{
$packetChartData['packetLabel'][] = $row['blood_type'];
$packetChartData['packetData'][] = $row['packetcount'];
}
return $packetChartData;
}
public function genderCountsChart()
{
$query=" SELECT DonorGender as donor_gender, COUNT(DonorID) as donor_count FROM donors GROUP BY donor_gender";
$genderChartData = [];
$genderCount = $this->db->query($query)->result_array();
foreach($genderCount as $row)
{
$genderChartData['genderLabel'][] = $row['donor_gender'];
$genderChartData['genderData'][] = $row['donor_count'];
}
return $genderChartData;
}
}
查看
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assests/styles/table.css'); ?>">
<title>Kegalle Blood Bank - Blood Types Insight</title>
</head>
<body style="margin-bottom: 50px">
<?php include_once 'navbars/navbar2.php' ?>
<?php
if (!($this->session->userdata('isStaffLoggedIn'))) {
redirect('home/login');
}
?>
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-5">
<h1>Insight</h1>
</div>
<div class="row text-center m-5">
<div class="col-md-6">
<div class="card border-info mx-sm-1 p-3 shadow-lg">
<div class="card border-danger shadow text-danger p-3 my-card"><span class="fa fa-heart"
aria-hidden="true"></span>
</div>
<div class="text-danger text-center mt-3"><h4>Total Donors</h4></div>
<div class="text-danger text-center mt-2"><h1><?php echo $donorcount; ?></h1></div>
</div>
</div>
<div class="col-md-6">
<div class="card border-success mx-sm-1 p-3 shadow-lg">
<div class="card border-success shadow text-success p-3 my-card"><span class="fa fa-eye"
aria-hidden="true"></span>
</div>
<div class="text-success text-center mt-3"><h4>Total Available Packets</h4></div>
<div class="text-success text-center mt-2"><h1><?php echo $packetcount; ?></h1></div>
</div>
</div>
</div>
</div>
</div>
<div class="chart-container container mb-4">
<div class="bar-chart-container">
<canvas id="packet-count-chart" style="background: #ecf5ec"></canvas>
</div>
</div>
<div class="chart-container container">
<div class="doughnut-chart-container">
<canvas id="gender-count-chart" style="background: #ecf5ec"></canvas>
</div>
</div>
<?php include_once 'footer/footer.php' ?>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
const ctx1 = document.getElementById('packet-count-chart');
const chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: <?php echo isset($genderChartData['genderLabel'])?json_encode($packetChartData['packetLabel']):'[]';?>,
datasets: [{
label: '# of packets available',
data: <?php echo isset($genderChartData['genderLabel'])?json_encode($packetChartData['packetData']):'[]';?>,
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)',
'rgba(75, 192, 192)',
'rgba(153, 102, 255)',
'rgba(255, 159, 64)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive:true,
scales: {
y: {
beginAtZero: true
}
}
}
});
const ctx2 = document.getElementById('gender-count-chart');
const chart2 = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: <?php echo isset($genderChartData['genderLabel'])?json_encode($genderChartData['genderLabel']):'[]';?>,
datasets: [{
label: '# of donors',
data: <?php echo isset($genderChartData['genderLabel'])?json_encode($genderChartData['genderData']):'[]'; ?>,
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</html>
查看
这篇关于视图在CodeIgniter 3中呈现了多次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!