ax5ui-binder (Grid 데이터 활용하기)

ax5ui 관련글

ax5ui-grid 활용하기 - 01

ax5ui-grid 활용하기 - 02

ax5ui-binder 활용하기 - 01

 

---

 

지난 번 포스팅인

ax5ui-binder 활용하기 - 01

ax5ui-binder 활용하기 - 01

에서 grid의 데이터를 binder로 옮기는 코드를 설명했었습니다.

 

$(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에 넣기
			}
            /**************************************************************************/
		}
	});
}

해당 코드입니다.

 

다만 grid와 binder의 컬럼이 서로 다를 경우에 제대로 binder에 출력이 되지 않는 경우가 발생합니다.

 

그럴 경우

 

해결법

$(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 () {
            /**************************************************************************/
				var temp = $.extend(true, {}, firstGrid.list[this.dindex]);
				myModel.setModel(temp, $(document["binder-form"]));
			},
			onDataChanged: function () {
				var temp = $.extend(true, {}, firstGrid.list[this.dindex]);
				myModel.setModel(temp, $(document["binder-form"]));
			}
            /**************************************************************************/
		}
	});
}

위의 변경된 부분과 같이 

var temp = $.extend(true, {}, firstGrid.list[this.dindex]);

를 통해 '강한 복사'를 사용해 grid 데이터를 temp에 복사해놓고

setModel을 통해 binder form에 데이터를 넣어주면 해결됩니다.