Django 와 SB Admin을 이용한 Yara GUI Interface 만들기(11)

1.Modal로 datatable 내용 연결하기

1). modal 사용하기

modal은 일종의 팝업창이다. bootstrap을 사용할 경우 modal을 사용자에게 편리하게 사용할수 있도록 제공해주고 있다.

우리는 저번 데이터들을 datatable로 불러올수 있었는데 이 datatable을 클릭시 헥사값을 보여줄수 있도록 지정하도록 하겠다.

일단 modal 동작과정은 다음과 같다.

그림1. Modal동작과정

먼저 datatable의 row를 클릭하면은 자바스크립트가 실행되고 이 자바스크립트는 모달윈도우를 데이터를 전송시키는 역활을 한다.그후 모달 윈도우를 팝업형식으로 띄워주고 헥사값을 보여주게 된다.

저번 datatable의 for문을 다시 보면은

그리고 data는 modal로 넘겨주며 data-fhex의 값에 파일해쉬값도 같이 넘겨준다.

그림2.modal toggle 그림2. 모달 스크립트

모달은 위와 같이 modal_click(id)로 들어올씨 #myModal 의 ID를 가진 모달을 실행시키며 이때 파일해쉬값을 message-text라는 modal template에 변환시켜준다.

modal 템플릿을 table 밑에다가 아래 코드를 넣어보자. div로 modal을 만들며 id는 myModal로 설정한다.

그리고 을 하나 만드는데 그안에 textarea를 만들고 id를 message_text라고 지어서 데이터를 들어올수가 설정한다.

그림3. modal template

위와 같이 저장후 브라우저의 데이터를 클릭하면 아래 그림처럼 모달창이 나오는 것을 확인할수 있다.

그림4. modal창 확인

모달은 데이터를 스크립트로 받고 html으로 div 변환하여 진행하기 때문에 다른 여러가지 특이사항을 모달로 띄워줄수 있다.기존 게시판을 확인하는 것보다 디자인도 깔끔하고 보기에도 더 좋게 보이게 된다.

다음에는 DashBoard사용법을 알아보도록 한다.

from http://zerosin13.tistory.com/18 by ccl(A) rewrite - 2020-03-21 17:54:14

django