테이블 드래그 정렬을 구현하고 데이터베이스에 저장하는 TP5 방법(코드 첨부)

이 글의 내용은 TP5에서 테이블을 드래그하여 정렬하여 데이터베이스에 저장하는 방법에 대한 내용입니다.(코드 포함) 도움이 필요한 친구들이 참고하시면 도움이 될 것입니다. .

얼마 전 오래된 프로젝트를 수정했는데, 의뢰인께서 의사 직위별로 테이블을 재정렬해 달라고 하셨습니다. 의뢰인의 프로젝트는 병원의 인사제도이기 때문에 병원 전체에 수천명의 인원이 있다는 점을 고려하면 의뢰인의 요구사항에 맞춰 하나씩 배치하는 것은 힘든 일이겠지만... 다행히 이때는 제가 기억해낸 것이 있습니다. 이 기능을 수행하려면 jqueryUi 플러그인을 사용할 수 있습니다. 그러나 jqueryUi 플러그인은 현재 페이지에서만 정렬할 수 있으며 페이지가 새로 고쳐지는 즉시 원래 상태로 돌아갑니다. 그래서 정렬을 끌어서 데이터베이스에 영구 저장하는 방법을 연구한 끝에 한 시간 동안 작업한 끝에 드디어 완성했습니다. 여기에 기록하세요. 더 나은 아이디어가 있는 학생이 있으면 알려주세요.
먼저 jqueryUi 플러그인을 다운로드하고 여기에서 건너뛸 수 있습니다.
다운로드가 완료되면 페이지를 가져옵니다. 코드 한 줄만 추가하세요:

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

선택기는 테이블의 본문을 선택해야 합니다. 많은 구성 매개변수를 정렬 방법에 추가할 수 있습니다. 자세한 내용은 이 플러그의 문서를 참조하세요. -안에. 마찬가지로, 초보자 튜토리얼 등 인터넷에서 많은 것을 검색할 수 있습니다. 이제 현재 페이지에서만 정렬을 구현하지만 데이터베이스는 여전히 동일합니다. 다음은 정렬을 데이터베이스에 저장하는 방법입니다. 이전에는 기본적으로 역순으로 정렬되었던 데이터 테이블의 ID 값을 기반으로 정렬이 이루어졌지만 이제 정렬 필드 또는 XX 필드를 데이터 테이블에 추가하여 정렬된 숫자를 나타낼 수 있습니다. 각 드래그가 완료된 후 이 플러그인에 내장된 업데이트 기능을 사용하여 정렬된 각 행의 ID를 ajax를 통해 백그라운드로 전송합니다. 백그라운드 컨트롤러에서 받은 후 첫 번째 행의 데이터 정렬 값을 키 값 + 1로 탐색하여 변경합니다.
예를 들어 정렬이 완료된 후 첫 번째 행의 데이터 ID 값은 8이고, 두 번째 행의 데이터 ID 값은 6입니다. 세 번째 줄은 2입니다. 순회가 백그라운드에서 수신되면 ID 8의 데이터가 먼저 순회되어야 합니다. 그런 다음 foreach에서 이 데이터의 키 값은 0, 즉 0이어야 합니다. , $k는 0입니다. 그런 다음 정렬을 $k+1로 변경합니다. 이는 0+1이 1과 같다는 것을 의미합니다. 같은 방식으로 두 번째 데이터의 정렬은 $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 작성 방법을 사용하지 않았습니다. 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 중국어 웹사이트의 JavaScript Tutorial Video 칼럼을 참조하세요.

위 내용은 테이블 드래그 정렬을 구현하고 데이터베이스에 저장하는 TP5 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!