728x90

 

EasyUI란?

  • easyui는 jQuery, Angular, Vue 및 React를 기반으로 하는 사용자 인터페이스 구성 요소 모음입니다.
  • easyui는 최신 대화형 자바스크립트 애플리케이션을 구축하기 위한 필수 기능을 제공합니다.
  • easyui를 사용하면 많은 자바스크립트 코드를 작성할 필요가 없으며 일반적으로 일부 HTML 마크업을 작성하여 사용자 인터페이스를 정의합니다.
  • HTML5 웹 페이지를 위한 완벽한 프레임워크.
  • easyui는 제품을 개발하는 동안 시간과 규모를 절약합니다.
  • easyui는 매우 쉽지만 강력합니다.

easyui의 각 구성 요소에는 속성, 메서드 및 이벤트가 있습니다. 사용자는 쉽게 확장할 수 있습니다.

 

Properties

속성은 jQuery.fn.{plugin}.defaults에 정의되어 있습니다. 예를 들어 대화 상자의 속성은 jQuery.fn.dialog.defaults에 정의되어 있습니다.

Events

이벤트(콜백 함수)는 jQuery.fn.{plugin}.defaults에도 정의되어 있습니다.

Methods

호출 메서드 구문: $('selector').plugin('method', parameter);

 

어디에:

  • selector 는 jquery 객체 선택기입니다.
  • plugin 은 플러그인 이름입니다.
  • method 는 플러그인에 해당하는 기존 메서드입니다.
  • parameter 는 매개변수 개체이며 개체, 문자열 등이 될 수 있습니다.

메서드는 jQuery.fn.{plugin}.methods에 정의되어 있습니다. 

각 메소드에는 jq와 param이라는 두 개의 매개변수가 있습니다. 해당 jQuery 개체를 참조하는 첫 번째 매개 변수 'jq'가 필요합니다. 두 번째 매개변수 'param'은 메소드를 통과하는 실제 매개변수를 의미합니다. 예를 들어 대화 상자 구성 요소에 대해 'mymove'라는 메서드를 확장하려는 경우 코드는 다음과 같습니다.

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});

이제 'mymove' 메서드를 호출하여 대화 상자를 지정된 위치로 이동할 수 있습니다.

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

 

jQuery EasyUI 시작하기

라이브러리를 다운로드하고 페이지에 EasyUI CSS 및 JavaScript 파일을 포함하십시오.

<link rel = "stylesheet" type = "text/css" href = "easyui/themes/default/easyui.css" >   
<link rel = "stylesheet" type = "text/css" href = "easyui/themes/icon.css" >   
<script type = "text/javascript" src = "easyui/jquery.min.js" ></script>  
<script type = "text/javascript" src = "easyui/jquery.easyui.min.js" ></script>

 

EasyUI 필수 파일을 포함했으면 마크업 또는 JavaScript를 사용하여 EasyUI 구성요소를 정의할 수 있습니다. 

예를 들어 접을 수 있는 기능이 있는 패널을 정의하려면 다음과 같은 HTML 코드를 작성할 수 있습니다.

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

 

마크업에서 구성 요소를 생성할 때 'data-options' 속성을 사용하여

버전 1.3부터 ​​HTML5 호환 속성 이름을 지원할 수 있습니다. 따라서 위의 코드를 다음과 같이 다시 작성할 수 있습니다.

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

 

아래 코드는 'onSelect' 이벤트를 바인딩하는 콤보박스를 생성하는 방법을 보여줍니다.

*onselect 이벤트 : 텍스트가 선택될때 이벤트발생

<input class="easyui-combobox" name="language"
        data-options="
            url:'combobox_data.json',
            valueField:'id',
            textField:'text',
            panelHeight:'auto',
            onSelect:function(record){
                alert(record.text)
            }">

DataGrid

https://www.jeasyui.com/documentation/datagrid.php

 

datagrid - Documentation - jQuery EasyUI

DataGrid Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time

www.jeasyui.com

 

DataGrid는 데이터를 표 형식으로 표시하고 데이터 선택, 정렬, 그룹화 및 편집을 위한 풍부한 지원을 제공합니다. DataGrid는 개발 시간을 줄이고 개발자의 특정 지식이 필요하지 않도록 설계되었습니다. 깃털처럼 가볍고 기능이 풍부합니다. 셀 병합, 다중 열 머리글, 고정된 열 및 바닥글은 그 기능 중 일부에 불과합니다.

종속성

  • 패널 panel
  • 크기 조정 가능 resizable
  • 링크버튼 linkbutton
  • 쪽수 매기기 pagination

 

사용 예

열, 행 및 데이터를 html로 정의하여 기존 테이블 요소에서 DataGrid를 만듭니다.

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>name1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>name2</td><td>4612</td>
        </tr>
    </tbody>
</table>

 

<table> 마크업을 통해 DataGrid를 생성합니다. 중첩된 <th> 태그는 테이블의 열을 정의합니다.

<table class="easyui-datagrid" style="width:400px;height:250px"
        data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">Code</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
    </thead>
</table>

 

javascript를 사용하여 데이터 그리드를 생성하는 것도 허용됩니다.

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});

 

일부 매개변수를 사용하여 데이터를 쿼리합니다.

$('#dg').datagrid('load', {
    name: 'easyui',
    address: 'ho'
});

 

데이터를 서버로 변경한 후 앞의 데이터를 새로 고칩니다.

$('#dg').datagrid('reload');    // reload the current page data

 

열 속성

DataGrid 열은 배열 개체이며 이 요소도 배열입니다. 요소 배열의 요소는 모든 열 필드를 정의하는 구성 개체입니다.

columns:[[
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
    {title:'Item Details',colspan:4}
],[
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
    {field:'attr1',title:'Attribute',width:100},
    {field:'status',title:'Status',width:60}
]]

 

편집자

$.fn.datagrid.defaults.editors로 기본값을 재정의합니다.

예를 들어 텍스트 편집기는 다음과 같이 정의됩니다.

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return input;
        },
        destroy: function(target){
            $(target).remove();
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            $(target)._outerWidth(width);
        }
    }
});

Layout

https://www.jeasyui.com/documentation/layout.php

 

layout - Documentation - jQuery EasyUI

Layout Override defaults with $.fn.layout.defaults. The layout is the container that has up to five regions: north, south, east, west and center. The center region panel is required but edge region panel is optional. Every edge region panel can be resized

www.jeasyui.com

 

$.fn.layout.defaults로 기본값을 재정의합니다.

레이아웃은 북쪽, 남쪽, 동쪽, 서쪽 및 중앙의 최대 5개 영역이 있는 컨테이너입니다. 중앙 영역 패널은 필수이지만 가장자리 영역 패널은 선택 사항입니다. 모든 가장자리 영역 패널은 테두리를 드래그하여 크기를 조정할 수 있으며 축소 트리거를 클릭하여 축소할 수도 있습니다. 레이아웃을 중첩할 수 있으므로 사용자가 원하는 복잡한 레이아웃을 구축할 수 있습니다.

 

종속성

  • 패널
  • 크기 조정 가능

사용 예

레이아웃 만들기

1. 마크업을 통해 레이아웃을 생성합니다.

<div/> 마크업에 'easyui-layout' 클래스를 추가합니다.

<div id = "cc" class = "easyui-layout" style = " 폭 : 600px ; 높이 : 400px ; " >   
    <div data-options = "region:'north',title:'North Title',split:true" style = " height : 100px ; " ></div>  
    <div data-options = "region:'south',title:'South Title',split:true" style = " height : 100px ; " ></div>  
    <div data-options = "region:'east',title:'East',split:true" style = " width : 100px ; " ></div>  
    <div data-options = "region:'west',title:'West',split:true" style = " width : 100px ; " ></div>  
    <div data-options = "region:'center',title:'center title'" style = " padding : 5px ; background :# eee ; " ></div>  
</div>

2. 전체 페이지에 레이아웃을 만듭니다.

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3. 중첩된 레이아웃을 만듭니다.

내부 레이아웃의 서쪽 패널이 축소되어 있음을 알 수 있습니다.

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4. ajax로 콘텐츠 로드하기

패널을 기준으로 레이아웃이 생성됩니다. 각 지역 패널은 URL에서 콘텐츠를 비동기식으로 로드하기 위한 기본 제공 지원을 제공합니다. 비동기 로딩 기술을 사용하여 사용자는 레이아웃 페이지를 더 빠르게 표시할 수 있습니다.

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" />
    <div data-options="region:'center',href:'center_content.php'" />
</body>

 

축소 레이아웃 패널

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

도구 버튼이 있는 서부 지역 패널 추가

$('#cc').layout('add',{
    region: 'west',
    width: 180,
    title: 'West Title',
    split: true,
    tools: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        iconCls:'icon-remove',
        handler:function(){alert('remove')}
    }]
});

Create a Link Button

https://www.jeasyui.com/tutorial/mb/linkbutton.php

 

Create a Link Button - jQuery EasyUI

Create a Link Button Tutorial » Create a Link Button Normally a button is created using <button/> element. A link button is created using <a/> element, so in fact a link button is a <a/> element but show a button style. To create a link button, all you wa

www.jeasyui.com

링크 버튼은 요소를 사용하여 생성되므로 사실상 링크 버튼은 요소이지만 버튼 스타일을 보여줍니다.

 

링크 버튼을 만들려면 <a/> 요소에 'easyui-linkbutton'이라는 클래스 속성을 추가하기만 하면 됩니다.

<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
    <a href="#" class="easyui-linkbutton">text button</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
</div>
 
<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
    <a href="#" class="easyui-linkbutton" plain="true">text button</a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
</div>

 

보시다시피 iconCls 속성은 버튼에 아이콘 이미지를 표시하는 아이콘 CSS 클래스입니다.

때때로 링크 버튼을 비활성화하거나 활성화하기로 결정한 경우 아래 코드는 링크 버튼을 비활성화하는 방법을 보여줍니다.

$(selector).linkbutton('disable');    // call the 'disable' method

Messager

$.messager.alert('Warning','The warning message');
$.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){
    if (r){
        alert('ok');
    }
});

 

 

ok 끈 확인 버튼 텍스트입니다. 좋아요
cancel 끈 취소 버튼 텍스트입니다. 취소
msg 끈 대화 상자에 표시할 메시지입니다.  
fn 기능 확인 또는 취소 버튼을 클릭할 때의 콜백 함수입니다.   
$.messager.confirm({
	title: 'My Title',
	msg: 'Are you confirm this?',
	ok: 'Yes',
	cancel: 'No',
	fn: function(r){
		if (r){
			alert('confirmed: '+r);
		}
	}
});

easyui 한글적용

<script type="text/javascript" src="<c:url value="/scripts/jquery-easyui/locale/easyui-lang-ko.js"/>"></script>

 

 

728x90

'STUDY > jQuery' 카테고리의 다른 글

[jQuery] 이벤트등록 .bind() .unbind() / .on() .off()  (0) 2022.12.28
[jQuery] innerHTML innerText기능 사용하기 .html() .text()  (0) 2022.12.28
[jQuery] 제이쿼리 기초 animate()·stop()  (0) 2022.10.05
[jQuery] 자주 사용되는 메서드 ready·on·prop·attr  (0) 2022.10.05
[jQuery] AJAX 설명과 기본 사용 방법 정리  (0) 2022.09.30

티스토리툴바