0 レビュー
1 回答
jquery-PHPを使用したダイナミックHTMLリストをサーバーに送信します
2つの単純なHTMLリストがあります。最初のエントリには多数のエントリが含まれ、2番目のエントリには最初は空です。一般的なリスト構造は次のとおりです。
<ul id="project-offer-list" class="connectedSortable">
<li class="ui-state-default">
<div>
<!-- formatting -->
</div>
</li>
<li class="ui-state-default">
<div>
<!-- formatting -->
</div>
ユーザーは、最初のリストからいくつかのエントリを2番目のリストにドラッグして選択できます。そうすることで、2番目のリスト内の要素を並べ替えることで優先順位を付けることができます。
ドラッグアンドドロップメカニズムはJQueryによって実現されます：
<script>
$(function() {
$("#project-offer-list, #project-selection-list").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
選択した要素（2番目のリストにある要素）とその順序の両方をPHPを使用するリモートサーバーに送信したいと思います。ユーザーが[保存]ボタンをクリックするたびに、現在の選択が送信されます。
どうすればこれを達成できますか？各リスト要素にIDを割り当て、どういうわけか2番目のリストとその順序を読み取る必要があります。 JQueryによって行われたHTMLコードの変更の可能性を考慮することが重要です。
ありがとう
わからない
0
レビュー
答え :
解決策：
2番目のリストのデータをjsonオブジェクトに変換し、各要素にIDを割り当て、データベースにあるのと同じIDを使用する必要があります。既存のデータのオプションを更新して実行します。
var items = [];
$('ul#list_id').find("li").each(function() {
var $this = $(this);
var item = { id: $(this).attr('data-id'), title: $(this).text() };
items.push(item);
});
このようなものを取得し、ajaxを使用してこれをリモートサーバーに送信します
[
{"id":"1","title":"School-management"},
{"id":"2","title":"library-management"},
{"id":"3","title":"billing_software"}
]
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。