0

我将如何在 JQuery 中制作一个使用 PHP 显示来自我的 mysql 数据库的数据的手风琴。所以我希望它按字母顺序显示数据，如下所示：在此处输入图像描述

...所以在用户点击“A”之前，它不会显示数据，b 也一样，依此类推..

到目前为止，我有这个：

在此处输入图像描述

使用哪个不在手风琴中。有人可以帮我开始这个。这将不胜感激。

[代码]

<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

在此处输入链接描述使用 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>

并用你的 PHP 调用替换你的静态 html，你可以使用这样的东西：

<? $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>';
}
?>

只要确保你放在正确的地方。此外，作为建议，请注意原始 MySQL API 已弃用，来自文档：

此扩展自 PHP 5.5.0 起已弃用，并将在未来删除。相反，应该使用 MySQLi 或 PDO_MySQL 扩展。另请参阅 MySQL：选择 API 指南和相关的常见问题解答以获取更多信息。

于 2013-06-15T17:56:46.957 回答
0

你可以 ajax 的 jquery ：

1）制作一个fetchdata.php文件，基本上你可以在其中触发选择查询并构建一个json格式的输出。

2）使用$().ajax()：在此您可以调用该fetchdata.php文件，并将一个GET或POST参数传递给它，例如passed_param_name = 'A'在您的情况下。此参数将在 fetchdata.php 中检索，例如$_REQUEST['passed_param_name']。确保在元素 'A' 或 'B' 的点击时调用此函数（ajax）。

3）然后用由（或类似的东西）组成的 WHERE 子句fetchdata.php触发查询。这将返回您的数据，确保将其转换为 json 格式：您可以使用php 函数。和。SELECTcolumn_name LIKE '%A%'json_encodeprint $json_output; exit;

4）在$().ajax()，成功响应中，你会得到json输出，你可以将其遍历并设置为DIV或UL LI结构，并使其显示：block。

于 2013-06-15T18:14:29.000 回答
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 回答