ERP, 관리자 화면등에서 사용하면 좋은 웹 라이브러리

웹서비스를 통해 제공되는 ERP화면이나 관리자패널등에서는 

하나의 화면에 굉장히 다양한 정보를 제공해야되고, 다양한 데이터수정이 이뤄진다.

 

다음과 같은 예시....

ERP는 하나의 화면에서 다양한 정보가 보여지고 컨트롤된다.

(출처 : [팔피엠 웹ERP/MES] https://blog.8pmbiz.com/33)

 

 

하나의 화면에서 다양한 정보를 수정하기 도울수 있는 웹 라이브러리를 소개한다.

 

---

검색이 가능한 multiple Select 라이브러리

단일선택을 위한 Select뿐만 아니라 다중선택이 지원되는 Multiple을 지원하고,

대량의 데이터를 Select를 통해 지원하기 위해 페이징방식의 Select를 지원해주는 라이브러리이다.

 

 

주요특징으로는

• <input/> 태그만으로 이용
• 검색기능 지원
• 무한스크롤방식의 페이징 지원
• 호출-응답 커스텀 가능
• 사용자 선택에 따른 콜백 작성가능
• 사전선택 값 설정가능
• 키보드입력 지연시간 설정가능
• 키보드입력 정규식조건 설정가능

 

검색과 관련된 UI를 구성하거나, 테이블내의 Select를 구성해야하는 곳에서 사용할 수 있다.

버튼을 통해 수정사항을 반영 VS 화면에서 즉시 수정사항을 반영

Select 자체에서 Callback을 통해 선택 즉시 비동기로 데이터를 수정할 수 있음으로,

간단한 데이터의 경우 불필요한 페이지이동을 최소화할 수 있는 장점이 있다.

 

장점에 따른 효과로는....

추가화면에 따른 UI구성소요 줄어듬, 페이지요청에 따른 서버의 불필요한 부담감소등이 있다.

 

 

데모 : https://git.coco.sqs.kr/cocoAjaxMultiSelect/example/example-fetch-multi.html 

깃허브 : https://github.com/burndogfather/cocoAjaxMultiSelect

GitHub - burndogfather/cocoAjaxMultiSelect: Ajax, xhr, fetch등을 이용하여 다중선택창을 만들수 있는 라이브러

 

 

---

모달처럼 사용할 수 있는 바텀시트 라이브러리

앱화면에서  종종볼수 있는 하단에서 올라오는 모달창이다.

하나의 화면에서 추가적인 다른정보를 보여주기위한 화면으로 구성할때 요긴하게 사용할 수 있다.

출처 :&nbsp;https://yozm.wishket.com/magazine/detail/1272/

 

 

 

이 라이브러리는 반응형UI를 지원하기 때문에

모바일뿐만 아니라 PC화면에서도 손쉽게 모달화면을 구성할 수 있는 라이브러리이다.

 

 

 

주요특징으로는

• 바닐라 JS로 작성되어 있어 빠르고 jQuery따위가 불필요하다.
• 라이브러리 자체에서 반응형 UI를 제공한다.
• 바텀시트의 애니메이션이 CSS based이기 때문에 Javascript방식의 애니메이션보다 빠르게 처리된다.
• show(), showmax(), hide(), sethtml(), setcss(), setjs(), gethtml() 등과 같은 여러가지 요긴한 내장함수를 지원한다.
• Ajax등을 활용하여 화면을 비동기적으로 서빙할 수 있다.

 

이 라이브러리는 위의 MultiSelect 보다 조금더 많은 정보를 수정하기 위한

추가적인 페이지로 활용할 수 있다.

자식창의 이벤트제어 VS 부모창에서 모든 이벤트제어

 

데모 : https://git.coco.sqs.kr/cocoBottomSheetJS/example/ 

깃허브 : https://github.com/burndogfather/cocoBottomSheetJS

GitHub - burndogfather/cocoBottomSheetJS: iOS의 바텀시트를 웹에서 구현할 수 있습니다. Similar to the bottom she