0

PHP を使用して mysql データベースのデータを表示する JQuery でアコーディオンを作成するにはどうすればよいですか。したがって、次のようにアルファベット順にデータを表示したいと思います。ここに画像の説明を入力

...したがって、ユーザーが「A」をクリックするまで、データは表示されず、b などについても同じです。

これまでのところ、私はこれを持っています:

ここに画像の説明を入力

アコーディオンにないWhichの使用。誰かがこれを始めるのを手伝ってくれませんか。本当に感謝します。

[コード]

<div id="accordion">
<font face="Calibri" style="italic" size='10px' color="white">
  <?php
    mysql_connect("host","user","pass!") or die("Could not connect to localhost");
mysql_select_db("db") or die( "Could not connect to database");
?>
<?php
$result = mysql_query("SELECT * FROM table ORDER BY name ASC");
echo "<div class='scroll'>";
while ($row = mysql_fetch_array($result))
  {
   echo "<div style='margin: 0 auto;'>
                    <span style='display:inline-block; width:200px; text-align:left;'>" . ucwords($row['name']) . "</span>
                    <span style='display:inline-block; text-align:left;'>" . ucwords($row['number']) . "</span>
                </div>
                <br>";
  }
  echo "</div>";
?>
</div>
4

4 に答える 4

2

このようなことができます。

$names = ['alex', 'adam', 'bob', 'bryan'];
asort($names); // The list wasn't sorted, if you don't want sorting you can just remove this line.

// Prepare list for accordion.
$accordionData = [];
foreach($names as $name) {
  $accordionData[substr($name, 0, 1)][] = $name;
}

// Print accordion, change the echoes to reflect your accordion html.
foreach($accordionData as $index => $names) {
  echo strtoupper($index).'<br />';
  foreach($names as $name) {
    echo ucfirst($name).'<br />'; // ucfirst changes the first letter to upper case.
  }
}

出力：

A
Adam
Alex
B
Bob
Bryan

質問に実際のアコーディオンの作成方法が含まれている場合は、ここで入手できるコードを試してください: http://jqueryui.com/accordion/

そして、これはjquery uiに基づく実際の例です

// You should replace this with your DB data.
$names = ['alex', 'adam', 'bob', 'bryan'];

// The list wasn't sorted, if you don't want sorting you can just remove this line.
asort($names);

// Prepare list for accordion.
$accordionData = [];
foreach($names as $name) {
  $accordionData[substr($name, 0, 1)][] = $name;
}

?>
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  });
  </script>
</head>
<body>
<div id="accordion">
<?php
// Print accordion, change the echoes to reflect your accordion html.
foreach($accordionData as $index => $names) {
?>

  <h3><?php echo strtoupper($index); ?></h3>
  <div>
  <?php
  foreach($names as $name) {
  ?>
    <p><?php echo ucfirst($name); ?></p>
  <?php
  }
  ?>
  </div>
  <?php
}
?>
</div>
于 2013-06-15T17:52:30.520 に答える
0

enter link description hereUse the code provided by jquery UI :

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>


</body>

And replace your static html with your PHP calls, you can use something like this:

<? $pdo = new PDO('mysql:host=localhost; dbname=db01', $username, $password);
    $pdo->exec("SET CHARACTER SET utf8");
    $sql= "select name,age,height,weight from infoTable"
    $result = $pdo->query($sql);

    foreach($result as $row) {
             $accordion .= '                 
               <h3>'.$row['Name'].'</h3>
                <div>
               <p>                
                my age is ' .$row['Age']. '
                my height is' .$row['Height']. '
            </p></div>';
}
?>

Just make sure you put in the right place. Also, as a suggestion please note that Original MySQL API is deprecated , from the docs:

This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQL extension should be used. See also MySQL: choosing an API guide and related FAQ for more information.

于 2013-06-15T17:56:46.957 に答える
0

@isJustMe には最適なソリューションがあります。特に、関数PDOを使用する代わりに移行することをお勧めしmysql_*ます。

mysqli_*開始するのに役立つように、現在のコードを使用する方法を次に示します。PDO

<div id="accordion">
<font face="Calibri" style="italic" size='10px' color="white">
<?php
    mysql_connect("host","user","pass!") or die("Could not connect to localhost");
    mysql_select_db("db") or die( "Could not connect to database");
?>
<?php
    $headers = array(); // create array to hold <h3></h3> headers
    $result = mysql_query("SELECT * FROM table ORDER BY name ASC");
    while ($row = mysql_fetch_array($result)){

           // if 1st letter is not in array
           if(!in_array($row['name'][0],$headers){

                // add 1st letter
                $headers[] = $row['name'][0];

                // close the last 'content panel' if it is not the first
                if(count($headers) > 0){
                   echo "</div>";
                }

                // echo 1st letter as header
                echo "<h3>{$row['name'][0]}</h3>";

                // start the 'content panel'
                echo "<div style='margin: 0 auto;'>";

           }
           echo "<span style='display:inline-block; width:200px; text-align:left;'>" . ucwords($row['name']) . "</span>
                 <span style='display:inline-block; text-align:left;'>" . ucwords($row['number']) . "</span>";
    }

   // close the last 'content panel'
   echo "</div>";
?>
</div>
于 2013-06-15T18:25:05.660 に答える