리모트 리스트 렌더러는 검색을 통해 원격으로 리스트를 실시간으로 가져와 출력시키는 렌더러입니다.
에디팅으로 진입하면 사용자는 수정할 값을 입력하는 것이 아니라 검색할 단어를 입력하면, 해당 단어를 파라메터로 지정된 URL 로 요청을 합니다.
서버 사이드는 응답으로 JSON 또는 XML, TEXT 를 보내야 합니다. 서버 사이드 응답과 별개로 리모트 리스트에서 사용하는 원격 리스트 객체는 Array-Object 입니다.
따라서 서버사이드 응답이 JSON 이라면 바로 사용할 수 있지만, XML, TEXT 인 경우 별도의 파싱 작업을 할 필요가 있습니다.
리모트 리스트 렌더러는 칼럼 레이아웃을 정의할 때 개별 칼럼의 editRenderer 속성 값인 Object 형태로 선언되어야 합니다.
칼럼의 editRenderer 속성의 type 으로만 설정 가능합니다.
아래는 설정 예제 입니다.var columnLayout = [ { dataField : "name", headerText : "Name", width : 140 }, { dataField : "product", headerText : "Product", width : 120, editRenderer : { // 편집 모드 진입 시 원격 리스트 출력하고자 할 때 type : "RemoteListRenderer", remoter : function( request, response ) { // remoter 반드시 지정 필수 if(request.term && String(request.term).length < 2) { alert("2글자 이상 입력하십시오."); response(false); // 데이터 요청이 없는 경우 반드시 false 삽입하십시오. return; } // 데이터 요청 $.ajax({ url: "../../blog/api/search_books.php?title=1&query=" + encodeURIComponent(request.term), success: function(data) { // 성공 시 완전한 배열 객체로 삽입하십시오. response(data); } }); // end of ajax } }];
Name | Description |
---|---|
autoCompleteMode
| Type : Boolean Version: 3.0.8 사용자의 매 입력마다 remoter 를 호출할지 여부를 지정합니다. 일반적으로 엔터나 검색 버튼을 눌러야 remoter 가 호출됩니다. 그러나 이 속성을 true 설정하면 사용자의 매 입력마다 remoter 가 호출되어 실시간 리스트를 표시 할 수 있습니다. remoter 에서 서버 요청을 작성하는 경우 서버 과부하에 주의 하십시오. 기본값(default) :false . |
autoEasyMode
| Type : Boolean Version: 3.0.8 autoCompleteMode = true 설정한 경우 매 입력 시 실시간 리스트가 표시될 때 리스트의 첫 아이템이 자동 선택될지 여부를 지정합니다. 기본값(default) :false . |
fieldName
| Type : String 응답으로 설정한 리스트가 여러개의 fleld 를 갖는 구조(일반적인 JSON구조)인 경우 그리드 셀에 실제로 적용시킬 값이 있는 필드명을 지정합니다. 예를 들어 단순 1차원 텍스트 배열인 ["A", "B", "C"] 와 같은 구조는 fieldName 을 지정할 필요가 없습니다. 응답이 JSON 구조의 복잡한 키-값으로 이루어진 배열 [{"name":"A", "age" : 19, "date" : "2015/10/10"}, {"name":"A", "age" : 19, "date" : "2015/10/10"}] 와 같은 구조인 경우 해당 셀에 수정완료로 적용할 필드명을 지정해야 합니다. 기본값(default) :null . |
labelFunction
| Type : Function 리모트 리스트에 출력될 리스트의 텍스트를 변경할 수 있는 함수입니다. 기본적으로 응답으로 설정한 항목이 리모트 리스트에 출력되나 이 함수로 출력되는 항목을 바꿀 수 있습니다. 예를 들어 실제 데이터는 1, 2 와 같이 int 이나 사용자에게 보여 줄때는 "남자", "여자" 로 바꿔 표현해 줘야 할 때가 있습니다. labelFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
labelFunction : function(rowIndex, columnIndex, value, item) { var valueNumber = Number(value); // 1인 경우 남자, 2인 경우 여자 if(valueNumber == 1) return "남"; else return "여"; } 이 함수의 반환값이 곧 해당 항목의 출력 텍스트가 됩니다. 주의 : listTemplateFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다. |
listAlign
| Type : String Version: 3.0.6 리스트 항목들의 텍스트 정렬 방식을 지정합니다. 유효값은 "left", "right", "center" 입니다. 기본값(default) :"center" . |
listHeight
| Type : Number Version: 3.0.6 항목 리스트의 높이를 명시적으로 지정합니다. 이 값으로 설정한 값보다 항목 리스트의 높이는 커지지 않습니다. 기본값(default) :NaN . |
listTemplateFunction
| Type : Function 리모트 리스트에 출력될 리스트의 텍스트를 사용자 정의 할 수 있는 함수입니다. 기본적으로 응답으로 설정한 항목이 리모트 리스트에 출력되나 이 함수로 출력되는 항목의 HTML 템플릿을 바꿀 수 있습니다. 리스트의 출력 모습을 복잡하거나, 다양한 정보를 출력시키고자 할 때 사용하십시오. listTemplateFunction 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.
이 함수의 반환값이 곧 해당 개별 항목의 출력 HTML 이 됩니다.(innerHTML 처리됨) 주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다. |
noDataMessage
| Type : String 응답으로 설정한 리스트가 빈 배열인 경우 출력할 텍스트를 지정합니다. 기본값(default) :"No Data" . |
remoter
| Type : Function 리모트 리스트의 요청과 응답을 관리할 remoter 를 지정합니다. 사용자가 입력한 텍스트(즉, 검색하고자 한 단어)를 기반으로 서버에 요청을 보내고, 그리드에 응답으로 설정할 수 있는 속성입니다. 파라메터 설명
remoter 는 함수로 정의하며 다음은 설정 예입니다. editRenderer : { // 편집 모드 진입 시 원격 리스트 출력하고자 할 때 type : "RemoteListRenderer", remoter : function( request, response ) { // remoter 반드시 지정 필수 if(request.term && String(request.term).length < 2) { alert("2글자 이상 입력하십시오."); response(false); // 데이터 요청이 없는 경우 반드시 false 삽입하십시오. return; } // 데이터 요청 $.ajax({ url: "../../blog/api/search_books.php?title=1&query=" + encodeURIComponent(request.term), success: function(data) { // 성공 시 완전한 배열 객체로 삽입하십시오. response(data); } }); // end of ajax } 리모트 리스트 렌더러를 사용하기 위해서는 remoter 는 필수 설정해야 합니다. 기본값(default) :null . |
selectedSameText
| Type : Boolean Version: 3.0.8.4 그리드의 값과 리스트 항목들 중 텍스트가 같은 경우 해당 항목을 선택시킬지 여부를 지정합니다. 기본값(default) :true . |
showEditorBtn
| Type : Boolean Version: 3.0.4 셀이 선택된 상태에서 해당 셀의 오른쪽에 에디터 버턴을 출력할지 여부를 지정합니다. 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다. 기본값(default) :true . |
showEditorBtnOver
| Type : Boolean 셀에 마우스 오버 시 해당 셀의 오른쪽에 에디터 버턴을 출력시킬지 여부를 지정합니다. 에디터 버턴을 클릭하면 바로 수정 모드로 진입하는 역할을 합니다. 기본값(default) :false . |