テーブルドラッグソートを実装してデータベースに保存する TP5 メソッド (コードが添付されています)

この記事の内容は、TP5 でテーブルをドラッグ＆ソートしてデータベースに保存する方法（コード付き）です。一定の参考価値があります。困っている友人は参考にしてください。お役に立てば幸いです。あなたに、助けてください。

私は少し前に古いプロジェクトを修正したのですが、クライアントから医師の専門職名ごとに表を並べ替えるように頼まれました。クライアントのプロジェクトは病院の人事システムであり、病院全体で何千人もいると考えると、クライアントの要望に合わせて一々手配するのは大変です... 幸いなことに、この時、私は次のことを思い出しました。この機能は jqueryUi プラグインを使用して実現できます。ただし、jqueryUi プラグインは現在のページでのみ並べ替えることができ、ページが更新されるとすぐに元の状態に戻ります。そこで、並べ替えをドラッグしてデータベースに永続的に保存する方法を検討し、1 時間かけて作業し、ようやく完成しました。ここに記録してください。もっと良いアイデアがある生徒がいたら、遠慮なく教えてください。
まず、jqueryUi プラグインをダウンロードします。オンラインで検索して、ここでスキップできます。
ダウンロードが完了したらページを紹介します。コード行を追加するだけです:

<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#sort tbody").sortable();
});
</script>

セレクターはテーブルの tbody を選択する必要があることに注意してください。sort メソッドには多くの構成パラメーターを追加できます。詳細については、このプラグインのこのドキュメントを参照してください。同様に、初心者向けのチュートリアルなど、インターネット上でさまざまな情報を検索できます。ここでは、現在のページに並べ替えのみを実装しますが、データベースは同じです。以下は、並べ替えをデータベースに保存する私の方法です。以前は、データ テーブルの ID 値に基づいて並べ替えを行っていましたが、デフォルトでは逆順になっていましたが、並べ替えフィールド (XX フィールド) をデータ テーブルに追加して、並べ替えられた数値を表すことができるようになりました。各ドラッグが完了した後、このプラグインの組み込み更新関数を使用して、並べ替えられた各行の ID を ajax 経由でバックグラウンドに送信します。バックグラウンド コントローラーで受信した後、トラバースして最初の行のデータのソート値をキー値 1 に変更します。
たとえば、ソートが完了すると、最初の行のデータ ID 値は 8 になります。 2 行目のデータ ID 値は 8 です。は 6、3 行目は 2 です。バックグラウンドで走査を受信する場合、ID 8 のデータを最初に走査する必要があり、その後、foreach 内のデータのキー値を走査する必要があります。 $k が 0、つまり $k が 0 の場合は、それを並べ替えます $k 1 は 0、1 は 1 に変更します。同様に、2 番目のデータの並べ替えは、$k 1 が 2 に等しくなります。ソート値に従って正の順序で表示されます。
次はフロント デスク コードです:

$("#sort tbody").sortable({
        update:function () {
            var idArr = [];
            $("input[name='id']").each(function () {//遍历每一行的ID值
                idArr.push($(this).val());//把拍完序的数据ID依次推入数组
            })
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "__URL__/staff/pinyong",
                data:{idArr:idArr},
                success:function (data) {
                    layer.msg(data['msg'],{icon:1,time:2000});
                },
                error:function (request) {
                    console.log(request);
                }
            });
        }
    });

これは TP3 によって書かれた古いプロジェクトなので、私は使用しませんでした。 TP5 の記述方法です。TP5 は URL アドレスを {:url(...)} に変更するだけです。記述方法は問題ありません。

バックエンド コード：（TP3 の記述方法でもあります。TP5 では、モデル メソッドを使用してテーブル モデルを取得し、保存メソッドを変更するだけです)

  public function pinyong(){
   if (IS_POST) {
        //前台post方式传数组的话，后台必须指定接收格式才能接收，否则会报错
        $arr = I('idArr/a');
        foreach ($arr as $k => $v) {
            M('pinyong')->where('id','eq',$v)->save(['sort'=>$k + 1]);
        }
        $this->success('排序成功');
    } else {
        $this->display();
    }
}

このようにして、毎回、前景がドラッグされるたびに更新関数がトリガーされます。ソートされた後、新しくソートされた ID 値が ajax を使用してバックグラウンドに送信されます。バックグラウンドがそれを受信した後、ソート値を順番に変更できます。

この記事はここで終了です。すべて終了です。詳細はこちらその他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript チュートリアル ビデオ 列に注目してください。

以上がテーブルドラッグソートを実装してデータベースに保存する TP5 メソッド (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。