[Front-End] Jquery UI + PHP implementiert die Tabellen-Drag-Sortierung

Zweck: Verwenden Sie die JQuery-UI-Bibliothek, um die Drag-and-Drop-Sortierung von Tabellen zu implementieren und die Sortierung in der Datenbank zu speichern

Der Effekt ist wie folgt

1. Vorbereitung:

1. Laden Sie die JQuery-UI-Bibliothek herunter. Sie können direkt auf den Online-Pfad verweisen

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

2. Ich verwende Laui für das Frontend und PHP für das Backend.

2. Verwendung

logische Erklärung

1. Stellen Sie die Jqueryui-Bibliothek vor

2. Der js-Code verwendet die update()-Methode von jqueryui, um die ID des gezogenen Elements und die aktuelle Seitennummer abzurufen und sie an den Hintergrund zu senden.

3. Da ich Thinkphps Paginate für das Paginieren im Backend verwende, wird die Seitenzahl beurteilt, um sicherzustellen, dass die Drag-and-Drop-Sequenz auf nicht-ersten Seiten hin und her verbunden werden kann. Wenn Seite = 0 oder Seite = 1, beide Seite = 1, wenn Seite größer als 1 ist, sei Seite = Seite-1, subtrahiere 1 von der eigenen Seitennummer

4. Generieren Sie aufeinanderfolgende Seriennummern: Legen Sie die Anzahl der auf jeder Seite angezeigten Elemente fest (pageSize) (um mit der Anzahl der Elemente beim Paging konsistent zu sein), multiplizieren Sie die in Schritt 3 berechnete Seite mit pageSize und addieren Sie 1, zum Beispiel Seite 1: (page*pageSize )+1 => (0*15)+1=1, (0*15)+2=2,... auf Seite 2: (1*15)+1=16, (1*15 )+2 =17, der Zweck besteht darin, die Verbindung der neuen Sequenznummer des Sortiereintrags während des Blätterns zu ermöglichen, und es ist nicht erforderlich, jedes Mal, wenn Sie eine Seite umblättern, bei 1 zu beginnen (die erste Seite: 1, 2, 3,...15, die zweite Seite:16, 17...30, dritte Seite: 31, 32...)

5. Durchlaufen Sie alle Einträge, fügen Sie den durchquerten Indexwert $key basierend auf der Sortierung hinzu, generieren Sie für jeden Eintrag eine neue Seriennummer und aktualisieren Sie schließlich die Datenbank

Front-End-Code

<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-Code

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);
	                }
	            });
	        }
		})
	})

Hinweis: Fügen Sie id="sort" außerhalb der Tabelle hinzu, und der Selektor sollte den Tbody unter der Tabellensortierung auswählen.

Backend-Controller

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','非法请求');
        }
	}

 Backend-Modellmodell

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;
        }
	}