如何在Jquery中制作一个用MySQL数据库显示数据的手风琴？

时间：2013-06-15 17:25:34

标签： php jquery mysql

我如何在JQuery中制作一个手风琴，使用PHP显示来自我的mysql数据库的数据。所以我希望按字母顺序显示数据，如下所示：enter image description here

...因此，在用户点击“A”之前，它不会显示数据，而是等同于b等等。

到目前为止，我有这个：

enter image description here

使用

 哪个不是手风琴。有人可以帮我开始这个。非常感谢。

[代码] 

<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 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

enter link description here使用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，来自docs：

  

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

答案 2 :(得分：0)

你可以使用jquery：

1）创建一个fetchdata.php文件，基本上你可以激活select查询并构建一个json格式输出。

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

3）然后在fetchdata.php中使用包含SELECT（或类似内容）的WHERE子句触发column_name LIKE '%A%'查询。这将返回您的数据，请确保以json格式转换它：您可以使用json_encode php函数。和print $json_output; exit;。

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

答案 3 :(得分：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>
相关问题
最新问题