ぐちゃぐちゃにしてしまいました。:) 私は jQuery の初心者です。PHP に関する豊富な経験。手がかりを見つけようとしてインターネットの 1/4 の一時ファイルをダウンロードし、100 ドル以上の書籍を購入したことは間違いありません。これを学ぶのを手伝ってください！
これが状況です。情報を編集できるページに取り組んでいます。この情報は、いくつかの異なるレベルでソートされています。部屋とアイテムがあります。アイテムは、ルーム内のさまざまなアイテムである可能性があります。これらのアイテムは集められ、適切なタブであるルームにループされます。タブ、テーブル、行などはすべて、これらのループ内で処理されます。さらに、部屋内にリストされているアイテムを編集するためのダイアログボックスを開くように jquery をセットアップしようとしています。このダイアログ ボックスには、最終的に、データを整理するための UI ソート可能プラグインが含まれます。
ループはうまく機能し、ダイアログ ボックスは機能し、並べ替え機能も機能します。ただし、各タブには固有のダイアログが必要なので、オブジェクトごとに固有の識別子が必要であることはわかっています。これはループで簡単に実現できますが、jQuery にそれを認識させる方法がわかりません。
そのため、[編集] をクリックすると、ダイアログ オブジェクトごとにダイアログ ボックスが表示されます。
これを処理する最良の方法は何ですか? jQueryループ？
(関連性がないと思われるものは省略しました。構文が乱雑で申し訳ありませんが、動作後にクリーンアップします。:P )
PHP/HTML
$count = count( $tpl['template'] );
for( $i = 0; $i < $count; $i++ )
{
foreach( $tpl['template'][$i] as $k => $v )
{
if( is_int($k) )
{
unset( $tpl['template'][$i][$k] );
}
}
}
$temprooms = array();
for( $i = 0; $i < $count; $i ++ )
{
foreach( $tpl['template'][$i] as $k => $v )
{
if( $k == "room_name" )
{
if( ! in_array($v, $temprooms, true ) )
{
$temprooms[] = $v;
}
}
}
}
$rooms = array();
foreach( $temprooms as $k => $v )
{
$rooms[$k+1] = $v;
}
?>
<div id="nested-tabs">
<ul>
<?
foreach( $rooms as $k => $v )
{
?> <li><a href="#<?echo $v; ?>"><?echo $v; ?></a></li>
<?
}
?>
</ul>
<?php
krumo( $tpl['template'] );
foreach( $rooms as $these => $those )
{
?>
<div id="<?php echo $those; ?>">
<table class="ebc-table">
<thead>
<tr>
<table class="ebc-table">
<thead>
<tr>
<th class="sub">Component</th>
<th class="sub">U/M</th>
<th class="sub">Clean</th>
<th class="sub">Repair</th>
<th class="sub">Replace</th>
<th class="sub">Upgrade</th>
</tr>
<?
foreach( $tpl['template'] as $k => $v )
{
foreach( $tpl['template'][$k] as $key => $value )
{
if( $key == "room_name" )
{
if( $key != $those )
{
$roomname = $value;
}
}
else{
if( $v['room_name'] == $those )
{
if( $key == "item_name" )
{
?> <tr>
<td><?php echo $value; ?></td>
<?
}
if( $key == "um" )
{
?> <td><?php echo $value; ?></td>
<?
}
if( $key == "GROUP_CONCAT(IC.amt)" )
{
$prices = explode( ",", $value );
foreach( $prices as $index => $price )
{
?> <td><?php echo $price; ?> </td>
<? }
?> </tr> <?
}
}
}
}
}
?>
</thead>
</table>
</tr>
<tr>
<td>
<p>
<label class="title"> </label>
<a href="#" class="room-edit" >Edit</a>
</p>
</td>
</tr>
</thead>
</table>
</div>
<div class="edit-dialog" title="Edit Room">
<table width="100%" height="100%" border="0">
<tr>
<td width="40%">
<p>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</p>
</td>
<td>
<center>
<br />
<p>
<a href="#" class="add-all">< Add All</a>
</p>
<br />
<p>
<a href="#" class="remove-all">Remove All ></a>
</p>
<p>
<br />
<a href="#" class="reset">Reset</a>
</p>
</center>
</td>
<td width="40%">
<p>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</p>
</td>
</tr>
</table>
</div>
<?
}
?>
これが、私が使用しようとしているスクリプトのスニペットです。
if( $ ('div.edit-dialog').length > 0){
$( 'div.edit-dialog' ).dialog({
autoOpen: false,
height: 500,
height: 500,
width: 550,
modal: true,
position:['middle','middle'],
draggable: true,
resizable: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( 'a.room-edit').click(function() {
$( 'div.edit-dialog' ).dialog( "open" );
});
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
dropOnEmpty: true
}).disableSelection();
$("a.add-all").click(function() {
$("#sortable2 li").appendTo("#sortable1");
});
$("a.remove-all").click(function() {
$("#sortable1 li").appendTo("#sortable2");
});
$("a.reset").click(function(resetall) {
$('#sortable1').html('');
$('#sortable2').html('');
$('#sortable1').html(reset1);
$('#sortable2').html(reset2);
});
var reset1 = $('#sortable1').html();
var reset2 = $('#sortable2').html();
}
さらに情報が必要な場合はお知らせください。
本当にありがとう！