1. 검색 영역 코드
<%-- search 영역 --%>
<div class="input">
<select id="searchSomething" name="searchSomething" data-bind="value: searchSomething, events:{change: changeSelectValue}">
<option value="" <c:if test="${commandMap.searchSomething == ''}">selected</c:if>>전체</option>
<c:forEach var="result" items="${controller.model.obeject}" varStatus="status">
<option value="${result}" <c:if test="${result == commandMap.searchSomething}">selected</c:if>>${result.name}</option>
</c:forEach>
</select>
</div>
// data-bind="value: searchSomething, events:{change: changeSelectValue}" 넘기고 싶은 파라미터와 events를 선언해줌 / 이 경우 콤보박스 CHANGE 될 때 changeSelectValue라는 함수가 실행되도록 설정
<div class="search">
<input type="text" data-bind="value: searchKeyword, events:{ change: changeSearch }">
<a href="#none" class="" data-bind="events:{ click: changeSearch}">찾기</a>
</div>
<%-- search 영역 edn --%>
2. 데이터 grid template 영역
<ul class="list mb30" data-template="templateId" data-bind="source: dataInfo"></ul>
// data-template="templateId" 아래 템플릿 영역을 가져옴
// data-bind="source: dataInfo" 맨 하단의 바인더된 데이터를 바인딩해서 template안에서 사용함
// kendo.bind($(".container"), _binder); _binder : _binder.set("dataInfo", _items );
<script id="templateId" type="text/x-kendo-template">
<li>
<dl>
<dt>명칭1</dt>
<dd>#:name#</dd>
</dl>
<dl>
<dt>명칭2</dt>
<dd>#:htel#</dd>
</dl>
<dl>
<dt>명칭3</dt>
<dd>#:hp#</dd>
</dl>
</li>
</script>
3. script안에서 kendo 데이터 조회 영역
<!--kendo 그리도 조회 영역-->
var _binder = null;
var _dataSource = new kendo.data.DataSource({
transport: {
read:{
url: "controllerBindName.do", dataType: "json", data: {chkid: randKey()}
}
},
schema:{ model:{ id: "irum" } } // 서버로부터 받아온 데이터에서 각 항목들을 고유하게 식별할 수 있는 속성의 이름을 나타냅니다. 이 값은 데이터의 주요 식별자(ID)로 사용되며, 중복되지 않는 고유한 값을 가져야 합니다.
});
4. kendo 데이터 자동 업데이트 영역
// 데이터 자동 업데이트
_binder = kendo.observable({
// 파라미터 영역
searchSomething: "${commandMap.searchSomething}"
, dataInfo: null
, searchKeyword: ""
, changeSelectValue : function(e){
_dataSource.read({searchSomething: this.searchSomething, chkid: randKey() }).then(function(e){
_binder.changeSearch();
});
}
, changeSearch: function(e){
var _searchKeyword = this.searchKeyword;
if( _searchKeyword == "" ){
_dataSource.filter( null );
}else{
_dataSource.filter({
logic: "or"
, filters: [
{ field: "columnName1", operator: "contains", value: _searchKeyword }
, { field: "columnName2", operator: "contains", value: _searchKeyword }
, { field: "columnName3", operator: "contains", value: _searchKeyword }
, { field: "columnName4", operator: "contains", value: _searchKeyword }
]
});
}
var _items = _dataSource.view();
// 조회 결과 여부
if (_items.length === 0) {
$("#noResultsMessage").show();
} else {
$("#noResultsMessage").hide();
}
_binder.set("dataInfo", _items );
}
});
_binder.changeSelectValue();
kendo.bind($(".container"), _binder);
<!--kendo 그리도 조회 영역 end -->
data: {chkid: randKey() 쓰는 이유
data: {chkid: randKey()}를 사용하는 이유는 Kendo UI의 데이터 소스(kendo.data.DataSource)가 데이터를 요청할 때 추가적인 파라미터를 함께 서버로 전달하기 위함입니다. 여기서 data: {chkid: randKey()}는 서버에 전달되는 파라미터 중 하나로, randKey() 함수가 호출되어 해당 함수의 반환값을 chkid라는 파라미터의 값으로 사용합니다.
이렇게 함으로써 서버 측에서는 요청을 구분하거나, 클라이언트 측에서 생성된 값을 서버로 전달하여 서버에서 해당 값을 활용할 수 있게 됩니다. 일반적으로 이러한 방식은 서버 측에서 특정 작업을 구분하거나 클라이언트 측에서 생성된 임시 값이나 요청의 특정 정보를 서버로 전달하는 데 사용됩니다.
randKey() 함수가 호출되어 새로운 값을 반환하게 되면, 매 요청마다 다른 값이 chkid 파라미터에 전달되어 서버에서 각 요청을 식별하거나 처리할 수 있습니다. 이와 같은 방식은 웹 애플리케이션에서 비동기적으로 데이터를 요청하거나 특정 작업을 수행하는 데에 많이 활용되며, 보안 측면에서도 일부 보안을 제공하는데 사용될 수 있습니다.
서버 측에서는 chkid 파라미터를 검증하여 요청의 유효성을 확인하거나, 중복 요청 등을 방지하는 등의 처리를 할 수 있습니다.
kendo.observable 란?
kendo.observable은 Kendo UI에서 제공하는 MVVM (Model-View-ViewModel) 패턴의 일부로, 데이터 바인딩을 쉽게 구현할 수 있도록 도와주는 기능입니다. MVVM 패턴은 데이터, UI, 그리고 데이터와 UI를 연결하는 ViewModel로 구성되어 있으며, 이를 통해 데이터와 UI를 분리하여 애플리케이션의 유지보수성과 확장성을 향상시킬 수 있습니다.
kendo.observable은 JavaScript 객체를 Kendo UI의 Observable Object로 변환하는 역할을 합니다. Observable Object는 데이터 변경을 자동으로 감지하고 해당 변경을 UI에 반영할 수 있도록 해주는 객체입니다. 이렇게 하면 데이터의 변경을 수동으로 UI에 반영하지 않아도 자동으로 데이터와 UI가 동기화되게 됩니다. Observable Object를 생성하기 위해 kendo.observable 함수를 사용합니다.
