私は現在作業中のPHPサイトを持っており、ユーザーがデータを選択し、次のDIV(別画像参照)に異なるデータを表示する必要があります。基本的には、SQL SELECT文を使用してデータを取り込み、ユーザーがリスト項目をクリックできるようにするDIV(オーバーフロー:自動、スクロールする)が必要です。その項目が正しい場合、その項目は右側にdivの新しいSELECT文を作成します。これについて最善の方法で入力しますか? PHP/HTML/CSSでは初めてです。PHP:データをナビゲートする
ザック
私は現在作業中のPHPサイトを持っており、ユーザーがデータを選択し、次のDIV(別画像参照)に異なるデータを表示する必要があります。基本的には、SQL SELECT文を使用してデータを取り込み、ユーザーがリスト項目をクリックできるようにするDIV(オーバーフロー:自動、スクロールする)が必要です。その項目が正しい場合、その項目は右側にdivの新しいSELECT文を作成します。これについて最善の方法で入力しますか? PHP/HTML/CSSでは初めてです。PHP:データをナビゲートする
ザック
に基づいていくつかの部品を変更しました。私は使いやすいですし、トリックを持っていれば、それで素晴らしいことをすることができます。
PHP/MySQLの場合、jQuerys Ajaxの機能を使用できます(http://api.jquery.com/jQuery.ajax/参照)。コールバックを使用して、ロードされたデータを表示します(下記参照)。
ここでは、動的コンテンツを使用して別のdivを表示する方法(選択肢が増える可能性があります)について簡単な例を示します。これをAjaxと組み合わせると、必要なものを手に入れることができます。
はheadタグ内でのjQueryを含める:ボディ用
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
コード:
<!-- First Box: click on link shows up second box -->
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;">
<a href="#" id="one">One</a><br />
<a href="#" id="two">Two</a><br />
<a href="#" id="three">Three</a>
</div>
<!-- Second Box: initially hidden with CSS "display: none;" -->
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div>
<!-- The JavaScript (jQuery) -->
<script type="text/javascript">
//Do something when the DOM is ready:
$(document).ready(function() {
//When a link in div with id "selectOne" is clicked, do something:
$('#selectOne a').click(function() {
//Fade in second box:
$('#selectTwo').fadeIn(500);
//Get id from clicked link:
var id = $(this).attr('id');
//Depending on the id of the link, do something:
if (id == 'one') {
//Insert html into the second box which was faded in before:
$('#selectTwo').html('One<br />is<br />selected')
} else if (id == 'two') {
$('#selectTwo').html('Two<br />is<br />selected')
} else if (id == 'three') {
$('#selectTwo').html('Three<br />is<br />selected')
}
});
});
</script>
ですから、jQuerysのAjax-機能を使用する場合は、あなたがテストしていません(そのようなものを使用することができます! ):
$('#selectOne a').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'getYourData.php',
data: 'thisIsSentToPHPFile='+id,
success: function(msg){
//everything echoed in your PHP-File will be in the 'msg' variable:
$('#selectTwo').html(msg)
$('#selectTwo').fadeIn(500);
}
});
});
getYourData.phpは次のようになります。
$id = $_POST['id'];
$query = mysql_query('SELECT * FROM table WHERE id='.$id);
$result = mysql_fetch_assoc($query);
//Now echo the results - they will be in the callback variable:
echo $result['tablefield1'].', '.$result['tablefield2'];
少し試してみて、ちょっと微調整してみてください。
これを実行する最も簡単な方法は、右部分はiframeにするために考えられます。
<a href="displaySubItems.php?company=2" target="rightColumn">Company 2</a>
displaySubItems.phpであなたは、テーブルを埋めるためにあなたのSELECT文で$ _GET [「会社」]値を使用します。
は、次に真ん中リストの各項目はそれほどのようにリンクすることができ。
また、私は個人的にはAJAXに精通していませんが、AJAXメソッドを使用してテーブルを右に埋め込むことができますので、詳しく説明することはできません。また、iframeがより広くサポートされていると思われます。
編集:私はこれを達成するための最良の方法は、jQueryの(JavaScriptの-ライブラリ)であると思い、あなたのコメントの1
返信いただきありがとうございます!私のデータがmySQLデータベースにリンクされているということだけが問題です。では、どのようにしてアイテムのリストを最初に埋め込むことができますか? 'href = "displaySubItems.php?company = 2 'は明らかにcompany2があることを知っています。 displaySubItems.phpにプッシュするためにこれらのリンクをどのように動的に作成しますか? – Zakman411
PHPのMySQLクラスはどれくらい使い慣れていますか?これらの紹介を読み、どちらかを選んでください(両方ではない):http://php.net/manual/en/book.mysql.phpとhttp://www.php.net/manual/en/book .mysqli.php。基本的には、結果を出してループして価値を得ることができます。 – potNPan
あなたの質問は何ですか?これはおそらくJavaScriptを使用して行うのが最も良いので、ページをリロードする必要はありません。 –
@Pekka:これは列ビューです。前の列の選択に基づいて列を作成する必要があります。たとえば、会社2(添付画像)を押すと、次の列にCompany2に関連付けられたすべてのファイルがSQLデータベースに表示されます(SELECT文を使用)。 – Zakman411
Mac OSのファイルエクスプローラと同じスタイルのインターフェースに似ています。 – cbednarski