9

Nestable List を使用してリリース アクセスを作成しています。List1 から List2 にアイテムをドロップすると、データベースに保存する必要があるため、List2 にドロップされたアイテムを特定するにはどうすればよいですか?

これは私のコードです:

        <div class="col-lg-6">
            <h3 class="droppTextCenter">Serviços Disponíveis</h3>
            <div class="dd" id="nestable">
                <script id="template" type="text/template7">
                    <ol class="dd-list">
                        {{#each Services}}
                        <li class="dd-item" data-id="{{Id}}">
                            <div class="dd-handle">
                                <div class="col-lg-9">
                                    {{Descryption}}
                                </div>
                            </div>
                        </li>
                        {{/each}}
                    </ol>
                </script>
            </div>
        </div>
        <div class="col-lg-6">
            <h3 class="droppTextCenter">Serviços Liberados para o Usuário</h3>
            <div class="dd" id="nestable2">
                <script id="template2" type="text/template7">
                    <ol class="dd-list">
                        {{#each ServicesReleased}}
                        <li class="dd-item" data-id="{{Id}}">
                            <div class="dd-handle">
                                <div class="col-lg-9">
                                    {{Descryption}}
                                </div>
                            </div>
                        </li>
                        {{/each}}
                    </ol>
                </script>
            </div>
        </div>

リストの作成には template7 を使用しています。

したがって、ネスト可能な onChange で ajax メソッドを作成して、データベースに保存します。

$('#nestable').nestable({
    maxDepth: 1,
    group: 1
}).on('change', updateOutput);

// activate Nestable for list 2
$('#nestable2').nestable({
    maxDepth: 1,
    group: 1
}).on('change', updateOutput);

これは の代わりになりupdateOutputます。リスト1からリスト2に移動するとデータベースに保存する必要がありますが、リスト2からリスト1に移動するとデータベースから削除する必要があります。

function saveServicosLiberados() {
    $.ajax({
        url: "/Admin/MeusNegociosAcessos/SaveServicosLiberados",
        method: "POST",
        data: {
            Id: ????????
        },
        success: function (result) {
            var list = e.length ? e : $(e.target), output = list.data('output');

            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));
            } else {
                output.val('É necessario estár com um nevegador com suporte à JSON.');
            }
        }
    });
}

function deleteServicosLiberados() {
    $.ajax({
        url: "/Admin/Delete",
        method: "POST",
        data: {
            Id: ??????????
        },
        success: function (result) {
            var list = e.length ? e : $(e.target), output = list.data('output');

            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));
            } else {
                output.val('É necessario estár com um nevegador com suporte à JSON.');
            }
        }
    });
}

では、ドロップされたアイテムから Id を取得するにはどうすればよいでしょうか?

4

1 に答える 1

1

これは解決するのが難しいものでした (私が解決した場合は... 教えてください)。

最初に、Template7の難しさは脇に置きました。ここではNotepad++
で 手作業でコーディングしています。 とにかく、この HTML プリプロセッサ構文は、質問の実際のトピックとは関係ありませんでした。

問題は、ネスト可能なプラグインを使用して、リスト項目の「動き」をリストから別のリストに保存する方法です。ちなみに、2014 年 8 月以降は維持されていません。
だから私はあなたのために2つの例を作りました.

1 つは、ドラッグされた要素を左側のリストidから、または左側のリストに保存するために ajax リクエストをフックする場所を示しています。
2つ目は、変更時に一方または両方のリストを保存するために ajax リクエストをフックする場所をています。

プラグインのコードにはまったく触れていません...
完全に機能しているようです。

さらに、あなたの質問は、その結果をどのように使用するかについてでした。
したがって、コードの代わりにこの GitHub の例から始めました。

DBに保存するために関連情報を取得できる場所を見つけました。

両方のペンを見てください。
そして不明な点があれば聞いてください。
;)

console.log()何が起こっているのかを理解するのに役立つように、関連するものはすべて残しました。



面白い (?)逸話: 私は今日 3 時間を失い、GitHubでDynへのDDoS 攻撃から生き返るのを待って、この回答を投稿しました。たわごとが起こる！;)

于 2016-10-21T23:23:56.353 に答える