클릭으로 테이블을 사용자 정의하는 방법 DCAT 관리자에서 데이터를 추가하는 방법은 무엇입니까?

DCAT 관리자에서 데이터를 추가하려면 클릭이있는 테이블을 사용자 정의하십시오.

이 기사에서는 DCAT Admin (Laravel-Admin)에서 사용자 정의 테이블을 만드는 방법에 대해 설명하고 사용자는 버튼을 클릭하여 데이터를 추가하고 테이블의 편집 수량 및 색상을 지원합니다. 다음 그림은 대상 기능을 보여줍니다.

구현 단계

1. 테이블을 만들고 버튼을 추가하십시오.

DCAT 관리자에서 grid 사용하여 테이블을 만들고 테이블 도구 모음에 버튼을 추가하여 데이터 추가 작업을 트리거하십시오. 다음 코드 스 니펫은 테이블을 만들고 버튼을 추가하는 방법을 보여줍니다.

 dcat \ admin \ Grid를 사용하십시오.
dcat \ admin \ layout \ content를 사용하십시오.

공개 기능 색인 (콘텐츠 $ 컨텐츠)
{
    $ 컨텐츠를 반환하십시오
        -> 헤더 ( '데이터 관리')
        -> 설명 ( '데이터 추가')
        -> body ($ this-> grid ());
}

보호 기능 그리드 ()
{
    $ grid = new Grid (New YourModel ());

    $ grid-> 도구 (function (Grid \ Tools $ 도구) {
        $ tools-> Append (new \ dcat \ admin \ grid \ tools \ button ( 'ad data', 'btn-add-data')-> class ( 'btn btn-primary');
    });

    // 테이블 열 정의 $ grid-> 열 ( 'id', 'id');
    $ grid-> column ( 'name', 'name');
    $ grid-> 열 ( '수량', '수량')-> editable ();
    $ grid-> column ( 'color', 'color')-> select ([ 'red'=> 'red', 'blue'=> 'blue', 'green'=> 'green']);

    반환 $ 그리드;
}

2. 프론트 엔드 자바 스크립트 코드 :

jQuery 바인딩 버튼을 사용하여 이벤트를 클릭하고 AJAX 요청 서버를 통해 데이터를 얻은 다음 데이터를 테이블에 추가하십시오. 백엔드 처리 인터페이스 주소의 대체 /admin/your-endpoint , #your-grid-id . 더 나은 사용자 경험을 위해 DCAT 관리자가 제공하는 테이블 작동 방법을 사용하는 것이 좋습니다.

 $ (document) .on ( 'click', '.btn-add-data', function () {
    id = prompt ( "ID를 입력하십시오");
    if (id) {
        $ .ajax ({
            URL : '/admin/your-endpoint',
            유형 : 'get',
            데이터 : {id : id},
            성공 : 기능 (데이터) {
                if (data) {
                    // DCAT 관리 방법을 사용하여 행 추가 DOM을 직접 조작하는 대신 행 추가
                    dcat.grid.appendrow ( '#your-grid-id', data); // #GRID-ID를 테이블 ID로 바꾸십시오
                } 또 다른 {
                    경고 ( '데이터가 발견되지 않음');
                }
            },
            오류 : 함수 (오류) {
                ALERT ( '요청 실패 :'error.responsetext);
            }
        });
    }
});

3. 백엔드는 AJAX 요청을 처리합니다.

백엔드 컨트롤러 방법은 AJAX 요청을 처리하고 ID를 기반으로 데이터를 쿼리하고 JSON 데이터를 반환합니다.

 Illuminate \ http \ request를 사용하십시오.

공개 기능 getDatum (요청 $ 요청)
{
    $ id = $ 요청-> 입력 ( 'id');
    $ data = yourmodel :: find ($ id);

    if ($ data) {
        return response ()-> json ($ data);
    } 또 다른 {
        return response ()-> json (null);
    }
}

4. 개선 제안 (DCAT 관리자 테이블 API 사용) :

DCAT 관리자의 기능을 더 잘 통합하려면 DCAT 관리자가 제공 한 API를 사용하여 DOM을 직접 조작하는 대신 테이블을 조작하는 것이 좋습니다. 이를 통해 코드가 DCAT 관리자의 업데이트와 호환되며 유지 보수가 향상됩니다. 예를 들어, Dcat.grid.addRow() 또는 이와 유사한 행을 사용하여 행을 추가하는 것을 고려할 수 있습니다. 이를 위해서는 가장 적합한 API 방법을 결정하기 위해 DCAT 관리자의 문서에 대한 참조가 필요합니다.

위의 단계를 통해 DCAT Admin에서 사용자 정의 Click-ADD 데이터 테이블을 만들 수 있습니다. YourModel 모델 이름으로 바꾸고 실제 상황에 따라 코드를 조정하십시오. DCAT 관리자가 제공 한 API를 사용하면 코드가 간결하고 유지 관리가 쉽고 프레임 워크와 더 잘 통합 될 수 있습니다.

위 내용은 클릭으로 테이블을 사용자 정의하는 방법 DCAT 관리자에서 데이터를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!