jQueryでリッチエディタを自作
テキスト入力時に文字を装飾したり画像や表を埋め込めるリッチエディタ。ワードプレスを使用す…
CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッグ&ドロップで感覚的に操作して入れ替える方法をメモ。
<form action="○○○○.php" method="post">
<table class="listTable">
<thead>
<tr>
<th>NO</th>
<th>カテゴリー名</th>
<th>並び順</th>
</tr>
</thead>
<tbody id="sortdata">
<tr name="1">
<td>1</td>
<td>タロット占い</td>
<td name="num_data"><input type="hidden" name="data[]" value="1"><input type="text" name="item_order[]" value="1"></td>
</tr>
<tr name="1">
<td>2</td>
<td>ヒーリング</td>
<td name="num_data"><input type="hidden" name="data[]" value="2"><input type="text" name="item_order[]" value="2"></td>
</tr>
<tr name="1">
<td>3</td>
<td>西洋占星術</td>
<td name="num_data"><input type="hidden" name="data[]" value="3"><input type="text" name="item_order[]" value="3"></td>
</tr>
</tbody>
</table>
<ul class="submitbtn">
<li><input type="submit" name="changeno" value="表示順を更新する"></li>
</ul>
</form>
<!-- ページ送り機能 -->
<nav>
<ul class="paging">
<li><a href="">最初のページ</a></li>
<li><a href="?pageno=1">1</a></li>
<li><a href="?pageno=2">2</a></li>
<li><a href="?pageno=3">3</a></li>
<li><a href="?pageno=3">最後の(3)ページ</a></li></ul>
</nav>
<!-- ページ送り機能 -->
trタグの「name」の値にはオブジェクトの開始番号を入力。
上記例は最大表示数3までで、1ページ目のため1。
2ページ目の場合は「3*(2-1)+1=4」、3ページ目の場合は「3*(3-1)+1=7」となります。
$('#sortdata').sortable();
var defno = $('#sortdata').find('tr').attr('name');
$('#sortdata').bind('sortstop',function(){
$(this).find('[name="num_data"]').each(function(idx){
$(this).find('input[type="text"]').val(Number(defno)+idx);
});
});
jQuery UI の Sortableメソッドを利用し、ドロップ時に取得したオブジェクトのの開始番号から加算して自動的に番号を割り振り、入力項目に値を挿入。
if(!empty($_POST['changeno'])){
$count = count($_POST['data']);
for($i = 0; $i < $count; $i++){
//データベースへの登録処理
$updatesql = $db->pdo->prepare('UPDATE ○○○○ SET ○○○○ = :item_order WHERE ○○○○ = :id');
$updatesql->bindValue(':item_order', $_POST['item_order'][$i], PDO::PARAM_INT);
$updatesql->bindValue(':id', $_POST['data'][$i], PDO::PARAM_INT);
$updatesql->execute();
}
}
サブミットボタンの押下時にフォームの値を取得してデータベースの値を更新しています。
仕様上、ページを渡ってオブジェクトの入れ替えができないので、その際は数値を直接入力してから再度並びを調整します。
テキスト入力時に文字を装飾したり画像や表を埋め込めるリッチエディタ。ワードプレスを使用す…
スライダーの中に音源を設置し都度再生したいとのご要望があった際に、スライドが切り替わる度…
トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多…