ax5ui-binder 활용하기 - 01

ax5ui 관련글

ax5ui-grid 활용하기 - 01

ax5ui-grid 활용하기 - 02

ax5ui-binder 활용하기 - 01

---

 

이전 포스팅에서 grid에 대해서 다뤘었는데 이번에는 grid 옆에 binder를 활용하여 grid 내용을 상세하게 볼 수 있는 부분을 만들어 보도록 하겠습니다.

 

https://ax5.io/ax5ui-binder/

ax5ui / ax5ui-binder : home

1. script

 

$(document).ready(function () {
	myModel = new ax5.ui.binder();				// myModel이라는 binder 선언
	myModel.setModel({}, $(document["binder-form"]));	// binder-form 과 연결
    
    firstGrid.setConfig({
		target: $('[data-ax5grid="first-grid"]'),
		showLineNumber: false,
		showRowSelector: true,
		multipleSelect: false,
		virtualScrollY: false,
		lineNumberColumnWidth: 40,
		rowSelectorColumnWidth: 27,

		columns: [
			{ key: "type", label: "분류코드", align: "center", width: 100 },
			{ key: "name", label: "분류코드명", align: "left", width: 300 },
			{ key: "explain", label: "설명", align: "left", width: 400 },
			{
				key: "use", label: "사용여부", align: "center",
				editor: {
					type: "select", config: {
						columnKeys: {
							optionText: "CD",
							optionValue: "TF"
						},
						options: [
							{ CD: "사용", TF: "사용" },
							{ CD: "미사용", TF: "미사용" }
						]
					},
					disabled: function () {
						return this.item.complete == "true";
					}
				}
			}
		],
		page: {
			navigationItemCount: 9,
			height: 30,
			display: true,
			firstIcon: '|<',
			prevIcon: '<',
			nextIcon: '>',
			lastIcon: '>|',
			onChange: function () {
				search(this.page.selectPage);
			}
		},
		header: {
			selector: false
		},
		body: {
			onClick: function () {
				myModel.setModel(this.item);	// grid 클릭 시 해당 item을 myModel에 넣기
			},
			onDataChanged: function () {
				myModel.setModel(this.item);	// grid가 달라질 때 해당 item을 myModel에 넣기
			}
		}
	});
}

상단에 myModel을 선언해줍니다.

grid를 클릭할 경우 이벤트가 발생해야 되기 때문에 이전 포스팅의 grid 코드에 onClick시 발생할 수 있게 코드를 넣어줍니다.

onDataChanged 옵션은 기본적으로 grid가 변경되었을 때 발생하며 체크박스를 체크 또는 체크 해제 시에도 동작합니다.

 

2. html

 

<div>
	<div id="grid01" data-ax5grid="first-grid" data-ax5grid-config="{}" style="width:60%; height:500px;float:left">
	</div>
	<form class name="binder-form" id="form01" onsubmit="return false;"
		style="border: 1px solid #ccc;padding:10px 10px 20px 20px;border-radius: 10px; width:35%; height:auto;float:right;">
		<div class="form-group">
			<label>* 분류코드</label>
			<input type="text" class="form-control" data-ax-path="type" style="width:50%">
		</div>
		<div class="form-group">
			<label>* 분류코드명</label>
			<input type="text" class="form-control" data-ax-path="name" style="width:50%">
		</div>
		<div class="form-group">
			<label>분류코드 설명</label>
			<textarea class="form-control" data-ax-path="explain" style="width:90%"></textarea>
		</div>
		<div class="form-group">
			<label>사용여부</label>
			<select class="form-control" data-ax-path="use">
				<option value></option>
				<option value="사용">사용</option>
				<option value="미사용">미사용</option>
			</select>
		</div>
	</form>
</div>

data-ax-path를 grid에서 선언할 때와 동일하게 이름을 맞춰줍니다.

 

 

3. 결과물