작업하기작업기

아직 테스트를 더해봐야 하지만, 다중검색 애드온에서 조만간 범위검색도 가능해질 것 같습니다.

날짜 검색에서는 daterangepicker라는 라이브러리를 사용해봤고, 일반적인 수치 검색에서는 jquery ui의 slider 위젯을 사용해봤어요.

 

근데 기능이 늘어날수록 조금씩 느려지는 건 어쩔 수가 없네요ㅋ

그나저나 요즘 좀 기분이 그렇습니다.

겁나 바쁜 일정인데 개발(이라 쓰고 습작이라 읽습니다ㅋ)하고 있는 정신상태;;;

 

암튼 현재까지 작업 결과는 다음과 같습니다.

 

 

1. date 형식의 인풋을 클릭하면 날짜 범위 선택 레이어가 떠요. (아 예뻐)

0.png

 

2. 시작일자를 클릭하면 연이어 종료일자를 클릭할 수도 있죠. (촤르륵)

1.png

그리고 나서 적용 버튼을 누르면...

 

3. 인풋창에 반영(짜짠~). 물론 시작일자와 종료일자는 각각 별도의 히든 인풋에 반영되도록 했지요.

2.png

 

4. 이번에는 수치 범위 검색을 볼게요. 최소값과 최대값은 별도 쿼리를 통해 로드합니다(점점 무거워지는 소리가 들리네요). 검색 바 커서의 최초 위치는 최소값과 최대값 사이의 각각 3분의1과 3분의2 위치로 지정했어요. 균형감 있게요. 커서를 이동시키면 시작 수치를 변경시킬 수 있지요.

3.png

 

5. 종료 수치도 마찬가지로 변경 가능하구요.

4.png

그리고 상세검색 버튼을 누르면...

 

6. 앗??!!

5.png

이 범위엔 등록된 글이 없군요ㅋㅋㅋㅋ

 

실제 동작이 궁금하신 분은 https://bit.ly/2IECAeU 여기서 테스트해보세요~

 

... 끝;;;

  • profile
    skyo 2018.07.09 13:05:50
    크...range 멋지네요
  • profile
    윤삼 2018.07.09 15:12:35
    하면 할수록 무거워지고 있어요ㅜ 이제 이쯤에서 버그 잡고 접어야 할 거 같아요 :D
  • profile
    skyo 2018.07.09 15:34:45
    네. 그렇죠.....사실 지금 2.0도 좀 무거워서 못쓰고 있습니다. ^^
    최종 버전 나오면 다시 시도해보고 넘어갈게요.
  • profile
    윤삼 2018.07.09 15:37:45
    다음 버전은 더 무거울 텐데ㅜㅜ
    '기본 검색'이랑 '서명 검색' 포함 옵션을 사용 안해도 무거우시건가요?
  • profile
    skyo 2018.07.09 16:00:24
    네. 그런데...이건 완전 순전히x 100
    제 느낌 일뿐입니다. 딱히 수치로 재보진 않았습니다.^^
  • ?
    기억속으로 2018.07.09 13:09:22
    커억....대단...하시다는....님의 한계는...
  • profile
    윤삼 2018.07.09 15:16:37
    진짜 개발자님들한테는 새발의 피예요. 저는 그냥 그분들이 걸어온 길을 우당탕탕 시행착오하면서 밟아보는 거죠ㅎㅎ
  • ?
    mospia 2018.07.09 14:18:28
    몇 달라?! ㅋㅋ 진짜 이런거 자꾸 추가해주셔서 감사합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  • profile
    윤삼 2018.07.09 15:17:52 Files첨부 (1)

    4딸라... 흑흑

    4.jpg

  • ?
    mospia 2018.07.10 14:13:18
    윤삼님 날짜범위를 검색기간이 오늘날짜로부터 최대 3달전까지만(90일)까지만 지정할수있게도 가능할까요?!
  • profile
    윤삼 2018.07.10 14:18:15
    네, 되는 걸로 알고 있어요.
    js를 건드려야 하는데 daterangepicker 사이트를 찾아 매뉴얼을 참조해보시면 좋을 거 같아요.
    오늘은 종일 외부에 있어서 직접 확인해드리기가 어렵네요;;;
  • ?
    mospia 2018.07.10 14:21:06
    넵 시도하러가보겟습니다 ㅋ
  • profile
    윤삼 2018.07.11 23:26:16
    성공하셨나요?ㅎ
    js 폴더의 date_range_search.js에서
    .daterangepicker({ ~~ }) 메소드가 두 군데 있을 건데요.

    두 곳 모두 그 안에
    minDate: moment().subtract(3, 'month'),
    maxDate: moment(),
    를 집어넣으니 되네요.

    데모페이지에도 그렇게 적용을 했어요 :)
  • ?
    mospia 2018.07.12 00:47:17
    selectedDate + "+3M" 이걸로 하고있엇는데 먼가 이상해서 헤매고있엇어요 엌...ㅋㅋㅋ
  • profile
    지구침략자 2018.07.09 20:30:56
    어마무시해지고 있는 윤삼님 애드온~~~ 덜덜덜
  • profile
    윤삼 2018.07.09 20:42:59
    여기서 멈춰야 합니다ㅋㅋㅋ

서버에 요청 중입니다. 잠시만 기다려 주십시오...