Как использовать цикл foreach в php для извлечения данных из базы данных в jquery-ui accordion - PullRequest
Новая
       7

Как использовать цикл foreach в php для извлечения данных из базы данных в jquery-ui accordion

0 голосов
/ 25 октября 2019

Как использовать цикл foreach в php для извлечения данных из базы данных в jQuery-ui accordion. Я хочу использовать jQuery accordion для получения данных из базы данных. Я пробовал много способов, но я не могу этого сделать из-за недостатка знаний. Я использовал jQuery-UI для этого.

Это код, который я написал для этого 

<body>
    <div class="container" style="width:900px;">
   <div id="accordion"></div>
  </div>
</body>
</html>
<script>
$(document).ready(function(){
 $.ajax({ 
   url: "fetch.php",
   method:"POST",
   dataType: "json",       
   success: function(data)

   {
  console.log(data);
    $( function() {
    $( "#accordion" ).accordion();
    //console.log(data);
    var device_ID;
    var sensor_ID;
} );
   }   
 });

});
</script>

Это часть PHP: 

<code><?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "kapra_iot");
$query = "
 SELECT * FROM `view_sensor`
";
$result = mysqli_query($connect, $query);
//$output = array();
while($row = mysqli_fetch_array($result))
{
 $sub_data["device_ID"] = $row["device_ID"];
 $sub_data["device_Name"] = $row["device_Name"];
 $sub_data["sensor_ID"] = $row["sensor_ID"];
 $sub_data["sensor_Name"] = $row["sensor_Name"];
 $sub_data["lower_Value"] = $row["lower_Value"];
 $sub_data["mid_Value"] = $row["mid_Value"];
 $sub_data["upper_Value"] = $row["upper_Value"];
 $data[] = $sub_data;
}
foreach($data as $key => &$value)
{
 $output[$value["device_ID"]] = &$value;
}
foreach($data as $key => &$value)
{
 if($value["sensor_ID"] && isset($output[$value["sensor_ID"]]))
 {
  $output[$value["sensor_ID"]]["nodes"][] = &$value;
 }
}
foreach($data as $key => &$value)
{
 if($value["sensor_ID"] && isset($output[$value["sensor_ID"]]))
 {
  unset($data[$key]);
 }
}
echo json_encode($data);
//echo '<pre>';
//print_r($data);
//echo '
';?>

Ответы [ 2 ]

0 голосов
/ 26 октября 2019

Используя Widget Factory , вы можете расширить аккордеон до удаленного источника. 

$(function() {
  var testData = [{
    "device_ID": 1001,
    "device_Name": "Device 1",
    "sensor_ID": 597,
    "sensor_Name": "Sensor 1",
    "lower_Value": 0,
    "mid_Value": 50,
    "upper_Value": 100
  }, {
    "device_ID": 1002,
    "device_Name": "Device 2",
    "sensor_ID": 598,
    "sensor_Name": "Sensor 1",
    "lower_Value": 0,
    "mid_Value": 500,
    "upper_Value": 1000
  }, {
    "device_ID": 1003,
    "device_Name": "Device 3",
    "sensor_ID": 599,
    "sensor_Name": "Sensor 1",
    "lower_Value": 0,
    "mid_Value": 0.05,
    "upper_Value": 0.1
  }];

  $.widget("custom.buildList", $.ui.accordion, {
    options: $.extend(this.options, {
      source: "",
      data: []
    }),
    _create: function() {
      console.log("Init");
      this.element.addClass("custom-list");
      var action;
      if (this.options.source == "") {
        action = "html";
      } else if (typeof this.options.source == "string") {
        action = "ajax";
      } else {
        action = "array";
      }
      console.log("Action", action);
      if (action !== "html") {
        if (action === "ajax") {
          this.options.data = this._getData(this.options.source);
        }
        this._makeList(this.element);
      }
      console.log("Return to _create");
      return this._super();
    },
    _getData: function(url) {
      console.log("Getting Data", url);
      $.getJSON(url, function(resp) {
        this.options.data = resp;
      });
    },
    _makeList: function(tObj) {
      console.log("Making List");
      var myData;
      if (this.options.data.length == 0) {
        myData = this.options.source;
      } else {
        myData = this.options.data;
      }
      console.log("List Data", myData);
      $.each(myData, function(i, d) {
        var hd = $("<h3>").html(d.device_Name);
        var bd = $("<div>");
        var ls = $("<ul>").appendTo(bd);
        $.each(d, function(k, v) {
          $("<li>").html(k + ": " + v).appendTo(ls);
        });
        tObj.append(hd, bd);
      });
    }
  });

  $("#accordion").buildList({
    source: testData
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" style="width:900px;">
  <div id="accordion"></div>
</div>

Это расширение позволяет передавать URL или массив как параметр источника. Поэтому, если вы хотите использовать его для получения данных из PHP-скрипта, вы можете сделать следующее: 

$("#accordion").buildList({
  source: "fetch.php"
});

Расширенный виджет будет собирать данные из URL-адреса или массива и создавать необходимый HTML-код перед вызовом остальных. виджета. Я должен был проверить с массивом. Вам также понадобится изменить функцию _makeList(), чтобы удовлетворить различные потребности.

Она также создана для возврата по умолчанию к HTML, если вы того пожелаете. Также у вас есть все те же опции, что и для стандартного виджета Accordion.

0 голосов
/ 25 октября 2019

Я бы указал на документы так же, как это сделал Кумар Правин. Аккордеон будет отображать названия различных разделов, используя тег h3, и внутренний раздел каждого из них внутри тегов div.

Зацикливать результаты и добавлять его в ваш div аккордеона в соответствии с синтаксисом, описанным ранее. 

$(document).ready(function () {

    $.ajax({
        url: "fetch.php",
        method: "POST",
        dataType: "json",
        success: function (data) {

            for (device in data)
            {
                $("#accordion").append("<h3>"+device['device_id']+" " + device['device_Name'] + "</h3>");
                $("#accordion").append("<div><p> Insert here all the relevant data of your device including all the other variables</p></div>");
            }

            $("#accordion").accordion();

        }
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...