무료 UI 프레임워크 Easyui 사용법

무료 UI 프레임워크 Easyui 사용법

easyui는 jQuery, Angular, Vue 및 React를 기반으로하는 사용자 인터페이스 구성 요소 모음이다.

나는 스프링프레임워크를 주로 사용했기 때문에 jQuery 문법으로만 사용했다.

앵귤러, 뷰 및 리액트 문법도 제공하니 맞춰서 사용하면 될듯.

사이트 : https://www.jeasyui.com/

기본적으로 영어로 제공되어있다.

사용하고자하는 해당 API를 찾아보면 어떻게 사용하는지 알 수 있다.

디자인을 수정하고싶을 경우는 https://jeasyui.com/themebuilder/index.php 참고하면 쉽고 간단하게 수정가능.

Tab, Panel 등으로 Layout을 나눠서 사용하면 되겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> ERP프로그램 .top-box { float: top; width: 100%; /*height: 50px;*/ position: relative; z-index: 1; } .left-box { background: #E0ECFF; float: left; /* width: 10%; height: 100%; */ } .contents-box { margin: 0 auto; /*height: 10%;*/ vertical-align: top; /*padding-left: 180px;*/ } .leftHeader { height: 36px; } 영업관리 거래처 관리 현재 탭 외 닫기 전체닫기 var playHandle = null; $(document).ready(function() { setDashBoard(); resizeContent(); $('#contents_tabs').tabs({ onContextMenu : function(e, index, row) { e.preventDefault(); $('#rightMenu').menu('show', { left: e.pageX, top: e.pageY }); $('#nowTab').val(row); } }); }); function setDashBoard(){ var id,url,title; id='dashboard'; url='dashboard.do'; title='대시보드'; var content = ''; $('#contents_tabs').tabs('add',{ title:title, content:content, closable:false, tools : [ { iconCls : 'icon-mini-refresh', handler : function() { $('#ifrm_' + id).attr('src',$('#ifrm_' + id).attr('src')); } } ] }); } function nowTabsClose(){ var nowTab = $('#nowTab').val(); var count = $('#contents_tabs').tabs('tabs').length; for(var i=count-1; i>=0; i--){ if(nowTab != i && i != 0){ $('#contents_tabs').tabs('close',i); } } } function allTabsClose(){ var count = $('#contents_tabs').tabs('tabs').length; for(var i=count-1; i>=0; i--){ if(i != 0){ $('#contents_tabs').tabs('close',i); } } } function gohome(){ location.href="home.do"; } $(window).resize(function() { resizeContent(); }); function resizeContent() { var nWidth = $(window).width(); var nHeight = $(window).height(); $("#leftmenu").height(nHeight - 50); $("#contents").height(nHeight - 50); $("#contents_tabs").width(nWidth - 180); $("#contents_tabs").height(nHeight - 50); $("#contents_tabs").tabs('resize', {}); } var index = 0; function addPanel(id, title, uri) { var tabs = $('#contents_tabs').tabs('tabs'); if ($('#contents_tabs').tabs('getTab', title) != null) { $('#contents_tabs').tabs('select', title); return; } if(tabs.length>6){ alert('최대 열 수 있는 탭은 7개입니다.'); return; } var content = ""; $('#contents_tabs').tabs('add',{ title : title, content : content, closable : true, tools : [ { iconCls : 'icon-mini-refresh', handler : function() { $('#ifrm_' + id).attr('src',$('#ifrm_' + id).attr('src')); } } ] }); } function removePanel() { var tab = $('#contents_tabs').tabs('getSelected'); if (tab) { var index = $('#contents_tabs').tabs('getTabIndex', tab); $('#contents_tabs').tabs('close', index); } } function logout() { top.location.href = "logout.do"; } function refreshTabs(id){ $('#ifrm_' + id).attr('src',$('#ifrm_' + id).attr('src')); } function deleteTabs(id){ $('#contents_tabs').tabs('close', id); }

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 거래처 관리 -- 전체 -- 회사명 사업자번호 검색 거래처 등록 $(document).ready(function() { SetGrid(); }); function SetGrid() { var search_gubun = $('#search_gubun').combobox('getValue'); var search_text = $('#search_text').val(); $('#datalist').datagrid({ columns : [ [ { field : 'business_id', title : '체크', width : 120, align : 'center', checkbox : true },{ field : 'business_name', title : '회사명', width : 300, halign : 'center', align : 'left', sortable : true }, { field : 'gubun', title : '구분', width : 50, align : 'center', sortable : true }, { field : 'business_no', title : '사업자번호/주민번호', width : 150, align : 'center', sortable : true }, { field : 'owner_name', title : '대표자명', width : 100, halign : 'center', sortable : true, align : 'left' }, { field : 'tel_no', title : '전화번호', width : 150, align : 'center', sortable : true }, { field : 'address', title : '주소', width : 200, align : 'center', sortable : true }, { field : 'industry', title : '업태', width : 150, align : 'center', sortable : true }, { field : 'update_date', title : '수정일', width : 200, align : 'center', sortable : true } ] ], queryParams : { search_gubun : search_gubun, search_text : search_text }, url : 'sales_search.do' }); } function sales_new(){ location.href = "sales_new_client.do"; }

sales_main.jsp

위 코드는 참고용으로 보자. 제대로된 페이지가 나오기 위해서는 js, css, image 등이 있어야 하기 때문.

url에 해당하는 sales_search.do 에서 json 으로 데이터를 넘겨주면된다.

from http://dojjong.tistory.com/5 by ccl(A) rewrite - 2020-04-02 20:01:03