[フロントエンド] Jquery UI +PHP でテーブルドラッグソートを実装

目的: jquery ui ライブラリを使用して、テーブルのドラッグ アンド ドロップの並べ替えを実装し、並べ替えをデータベースに保存します。

効果は以下の通りです

1. 準備:

1. jquery ui ライブラリをダウンロードします。オンライン パスを直接参照できます。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/主題/base/jquery-ui.css">
<script src="https://code.jquery. com/ui/1.12.1/jquery-ui.min.js"></script>

2. フロントエンドにはlayuiを使用し、バックエンドにはPHPを使用します。

2. 使用する

論理的な説明

1. jqueryuiライブラリの導入

2. js コードは、jqueryui の update() メソッドを使用して、ドラッグされた項目 ID と現在のページ番号を取得し、バックグラウンドに送信します。

3. バックエンドでのページングに thinkphp の paginate を使用しているため、最初のページ以外のドラッグ アンド ドロップのシーケンスを前後に接続できるようにするために、ページ番号を判断します。page=0 または page=1 の場合、両方とも page=1、page が 1 より大きい場合、page=page-1 とし、自分のページ番号から 1 を減算します。

4. 連続するシリアル番号を生成します。各ページに表示される項目数の pageSize を設定し (ページング中の項目数と一致するように)、ステップ 3 で計算したページに pageSize を乗算し、1 を加算します (例: ページ 1)。 (page*pageSize )+1 => (0*15)+1=1、(0*15)+2=2、... ページ 2: (1*15)+1=16、(1*15) )+2 =17、その目的は、ページング中にソート エントリの新しいシーケンス番号を接続できるようにすることであり、ページをめくるたびに 1 から開始する必要がなくなります (最初のページ: 1、2、 3、…15、2ページ目：16、17…30、3ページ目：31、32…）

5. すべてのエントリを走査し、並べ替えに基づいて走査されたインデックス値 $key を追加し、各エントリの新しいシリアル番号を生成し、最後にデータベースを更新します。

フロントエンドコード

<table class="layui-table box_table" lay-skin="nob" lay-size="lg" style=" text-align: center;" id="sort">
	<thead>
		<tr>
			<td>课件名</td>
			<td>课件类型</td>
			<td>发送班级</td>
		</tr>
	</thead>
	<tbody>
        <tr>
            <td>内容...</td>
            <td>内容...</td>
            <td>内容...</td>
        </tr>
    </tbody>
</table>

JSコード

function GetQueryString(name)
	{
	     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	     var r = window.location.search.substr(1).match(reg);
	     if(r!=null)return  unescape(r[2]); return null;
	}
	// 拖拽排序
	$(document).ready(function () {
		$("#sort tbody").sortable({
			update:function () {
				var idArr = [];
	            $("input[name='id']").each(function() {		//遍历每一行的ID值
	                idArr.push($(this).val());		//把拍完序的数据ID依次推入数组
	            })
	            var page = GetQueryString('page')
	            console.log(idArr)
	            console.log(page)
	            $.ajax({
	                type: "POST",
	                dataType: "json",
	                url: "upsort",
	                data:{idArr:idArr,page:page},
	                success:function (res) {
	                	console.log(res)
	                	layer.msg(res.message, { icon:1, time: 1000 }, function(){
							window.location.reload()
						});
	                },
	                error:function (request) {
	                    console.log(request);
	                }
	            });
	        }
		})
	})

注:テーブルの外側に id="sort" を追加すると、セレクターはテーブル ソートの下の tbody を選択する必要があります。

バックエンドコントローラー

public function upsort()
	{
		if (request()->isPost()) {

            $data = input('post.');
            $page=$data['page'] ? $data['page']-1 : 0;
            $res = model('Kejian')->upsort($data['idArr'],$page);
            
            if ($res) {
                return apiResponse('200','操作成功');
            }else{
                return apiResponse('110','操作失败');
            }
        }else{
            return apiResponse('110','非法请求');
        }
	}

 バックエンドモデルモデル

public function upsort($idArr,$page)
	{
        $pageSize = 15;     //每页显示条数，与列表分页保持一致
        $sort = ($page * $pageSize)+1;
        Db::startTrans();
        try {
            foreach ($idArr as $key => $value) {
                Db::table('kejian')->update(['id'=>$value,'sort'=>$sort+$key]);
            }
            Db::commit();
            return true;
        } catch (Exception $e) {
            Db::rollback();
            return false;
        }
	}