[JAVASCRIPT 이론] AX5UI

Web/JAVASCRIPT

[JAVASCRIPT 이론] AX5UI - Grid

오류나면꽥꽥 2024. 2. 1. 14:58

📌 ax5ui-grid 사용법

jQuery 1.X + 와 ax5core가 필요

▼ 필요한 스크립트와 스타일시트

1. 그리드만 사용

그리드 컴포넌트 자바스크립트 파일과 jQuery, 그리드 스타일 시트 파일을 페이지에 포함

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css" />

/* jquery */
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

/* ax5core */
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>

2. ax5ui 컴포넌트를 모두 사용

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.min.js"></script>

✅ Grid 기본값

javascript

/* ax5.grid 기본 객체 생성 */
var testGrid = new ax5.ui.grid();

testGrid.setConfig({
    target : $('[data-ax5grid="testGrid"]') //어떤 그리드를 나타내는지
    header: {
    },
    body: { 
    },
    columns: [
    	{key : "", label : "",	align : "", width : ""}
    ]
})

jsp

// 화면에 표시할 grid 설정값
<div id="testGrid" data-ax5grid="testGrid" data-ax5grid-config="{}" style="width:100%; height:100%;"></div>

// js 파일 연결
<script type="text/javascript" src="<c:url value="파일경로.js"/>"></script>

data-ax5grid	그리드가 그려질 태그를 나타내는데 사용
data-ax5grid-config	그리드의 모양, 동작 방식 등 설정 값들을 넣을 수 있는 속성

📍 Ax5grid 함수 정리

grid에 List<Map>형태의 데이터를 세팅

ax5grid.setData(dataList)

grid에 세팅된 데이터 리스트를 가져온다. Parameter로 “selected” 를 넘기면 선택된 데이터의 리스트를 가져옴

ax5grid.getList()

grid에 데이터를 추가한다. Index생략 시 가장 마지막 인덱스에 추가

ax5grid.addRow(data, index)

grid에서 데이터를 삭제한다. Index생략 시 가장 마지막 인덱스의 데이터 삭제

ax5grid.deleteRow(data, index)

grid에 컬럼을 추가한다. Index생략 시 가장 마지막 인덱스에 추가

ax5grid.addColumn(data, index)

grid에서 컬럼을 삭제한다. Index생략 시 가장 마지막 인덱스의 데이터 삭제

ax5grid.removeColumn(data, index)

✅ setConfig 속성

var testGrid = new ax5.ui.grid();

testGrid.setConfig({
    target : $('[data-ax5grid="testGrid"]') //어떤 그리드를 나타내는지
    ...
    header: { 
    	...
    },
    body: { 
    	...
    },
    columns: [
    	{key : "", label : "",	align : "",	width : ""}
    ]
})

testGrid.setConfig({

target	표시할 그리드	jQuery 선택자를 통해 가져오면 됨
sortable	그리드의 열에 대한 정렬	true / false
multiSort	여러 열을 기준으로 정렬	true / false
multipleSelect	행 선택 갯수	true / false
showRowSelector	행 체크박스 표시	true / false
showLineNumber	번호	true / false
paging	페이지 표시	true / false

header: {

align

텍스트 위치

center / left / right

body:{

onClick	row 클릭 시 이벤트	this로 현재 선택된 row가져올 수 있음
onDBClick	row 더블클릭 시 이벤트	this로 현재 선택된 row가져올 수 있음
trStyleClass	style class를 지정 속성	if(this.item.key값 == 비교값) 으로 row별로 서로 다른 style class를 적용
onDataChanged	grid 데이터 변경 시 이벤트

contextMenu: {

items	우클릭 메뉴 리스트	{type : int, label : String}
popupFilter	우클릭 메뉴 필터	function(item, param) 1. items의 개수만큼 반복 2. param은 선택한 row의 값이 들어옴 if( param.item.key값 == 비교값)으로 활성화 시킬 context menu를 return true / false
onClick	contextMenu 클릭 시 이벤트

columns: [

key	우클릭 메뉴 리스트	{type : int, label : String}
label	컬럼명
width	컬럼 width	n%
align	컬럼 정렬방향	center / left / right
formatter	컬럼 포매터	if(this.item.key값 == 비교값) 으로 row별로 서로 다른 value를 적용 return formattedValue

]

ex)

var testAGrid = new ax5.ui.grid();

testAGrid.setConfig({
  target : $('[data-ax5grid="testGrid"]'),
  sortable : true,
  showLineNumber : true,
  multiSort : true,
  showRowSelector : false,
  paging : false,
  header : {
    align : "center",
  },
  body : {
    onClick : function() {
    	this.self.clearSelect();
      	this.self.select(this.dindex);
    },
    trStyleClass : function() {
   		 if (this.item.selected_flag === '1'){
    		return "fontStyle-cncl";
    	 }
    },
    onDBClick : function() {
    	this.self.clearSelect();
        this.self.select(this.dindex);
    },
    onDataChanged : function() {
      	this.self.repaint();
    }
  },
 contextMenu: {
        iconWidth: 20,
        acceleratorWidth: 100,
        itemClickAndClose: false,
        icons: {
            'arrow': '<i class="fa fa-caret-right"></i>'
        },
        items: [
            {type: 1, label: "상세"},
            {type: 2, label: "정보"}
        ],
        popupFilter: function (item, param) { //items의 개수 만큼 반복
         	if(item.type == '1'){
            	return true;
            }
            else if(item.type == '2'){
            	return true;
            }
        },
        onClick: function (item, param) {
	        testAGrid.contextMenu.close(); //또는 return true;
        	
        }
   },
  columns : [ 
    {key : "name", label : "성명", align : "center", width : "35%"}, 
    {key : "tel", label : "전화번호", align : "center", width : "65%"} 
  ]
});

$(document).ready(function () {

/* 테스트용 데이터 생성 */
  var list = [];
    list.push({name: "김철수", tel: "010-2222-2222"},
              {name: "이영지", tel: "010-2132-2541"},
              {name: "최미정", tel: "010-5555-5555"},
              {name: "최주영", tel: "010-5687-4526"},
              {name: "김삿갓", tel: "010-7777-7777"},
              {name: "정희동", tel: "010-4445-4455"},
              {name: "김영희", tel: "010-1564-7562"});

  /* 그리드에 데이터 설정 */
  testAGrid.setData(list);
  
  }

ex)

var testGrid = new ax5.ui.grid();

testGrid.setConfig({
  target : $('[data-ax5grid="testGrid"]'),
  sortable : true,
  showLineNumber : true,
  multiSort : true,
  showRowSelector : false,
  paging : false,
  header : {
    align : "center",
  },
  body : {
    onClick : function() {
      this.self.select(this.dindex);
    },
    trStyleClass : function() {
    },
    onDBClick : function() {
    },
    onDataChanged : function() {
      this.self.repaint();
    }
  },
  columns : [ 
    {key : "name", label : "성명", align : "center", width : "35%"}, 
    {key : "tel", label : "전화번호", align : "center", width : "65%"} 
  ]
});

$(document).ready(function () {

/* 테스트용 데이터 생성 */
  var list = [];
    list.push({name: "김철수", tel: "010-2222-2222"},
              {name: "이영지", tel: "010-2132-2541"},
              {name: "최미정", tel: "010-5555-5555"},
              {name: "최주영", tel: "010-5687-4526"},
              {name: "김삿갓", tel: "010-7777-7777"},
              {name: "정희동", tel: "010-4445-4455"},
              {name: "김영희", tel: "010-1564-7562"});

  /* 그리드에 데이터 설정 */
  testGrid.setData(list);
  
  }

See the Pen Untitled by dawoon77 (@dawoon77) on CodePen.

ex)

DB 데이터 활용

/* 현재 창의 최상위 창에 있는 "userId" 속성에 접근 */
var userId = widow.top.userId;
var testGrid = new ax5.ui.grid();

testGrid.setConfig({
  target : $('[data-ax5grid="testGrid"]'),
  sortable : true,
  showLineNumber : true,
  multiSort : true,
  showRowSelector : false,
  paging : false,
  header : {
    align : "center",
  },
  body : {
    onClick : function() {
      this.self.select(this.dindex);
    },
    trStyleClass : function() {
    },
    onDBClick : function() {
    },
    onDataChanged : function() {
      this.self.repaint();
    }
  },
  columns : [ 
    {key : "name", label : "성명", align : "center", width : "35%"}, 
    {key : "tel", label : "전화번호", align : "center", width : "65%"} 
  ]


$(document).ready(function () {
  // 그리드 값 가져오기
  getUserInfo();
})


// json에 보내줄 데이터 설정
function getUserInfo(){
    data = new Odject();
    data = {
    	UserId: 'userId'
        requestType: 'getUserInfo'
    }
    ajaxAsync('파일경로',data,'json',sucessUserInfo);
}


// json에서 받아온 값 그리드에 셋팅
function sucessUserInfo(data){
    userData = data;
    testGrid.setData(userData);
}

'Web > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT 이론] AX5UI - wCheck (0)	2024.06.14
[JAVASCRIPT 이론] AX5UI 구성 (0)	2024.02.05
[JAVASCRIPT 이론] AX5UI - Select Box (0)	2024.02.05

현재글[JAVASCRIPT 이론] AX5UI - Grid

개발새발오리발