AUISoft
AUIGrid 3.0.13 Documentation
RemoteListRenderer

리모트 리스트 렌더러는 검색을 통해 원격으로 리스트를 실시간으로 가져와 출력시키는 렌더러입니다.

에디팅으로 진입하면 사용자는 수정할 값을 입력하는 것이 아니라 검색할 단어를 입력하면, 해당 단어를 파라메터로 지정된 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
      }
}];
NameDescription
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 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
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 은 함수를 지정해야 하며 함수 형태는 다음과 같습니다.

  • rowIndex : 행 인덱스
  • columnIndex : 칼럼 인덱스
  • value : 원래 데이터의 해당 셀 값(value)
  • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
  • dataField : 해당 칼럼이 출력하고 있는 행 아이템의 필드명(String)
  • listItem : list 속성에서 정의한 배열에서 개별 아이템(Object Or String)
listTemplateFunction : function(rowIndex, columnIndex, value, item, dataField listItem) { return '<img src="./assets/' + listItem.img + '" height="20" width="20"/><span>' + value + '</span>'; }

이 함수의 반환값이 곧 해당 개별 항목의 출력 HTML 이 됩니다.(innerHTML 처리됨)

주의 : labelFunction 과 함께 사용할 수 없습니다. listTemplateFunction 이 우선 순위가 높아 labelFunction 은 무시됩니다.

noDataMessage
Type : String

응답으로 설정한 리스트가 빈 배열인 경우 출력할 텍스트를 지정합니다.

기본값(default) : "No Data".
remoter
Type : Function

리모트 리스트의 요청과 응답을 관리할 remoter 를 지정합니다.

사용자가 입력한 텍스트(즉, 검색하고자 한 단어)를 기반으로 서버에 요청을 보내고, 그리드에 응답으로 설정할 수 있는 속성입니다.

파라메터 설명

  • request : 요청에 필요한 정보를 갖는 Object 입니다. Object 요소는 다음의 정보를 갖습니다.
    • rowIndex : 행 인덱스(Number)
    • columnIndex : 칼럼 인덱스(Number)
    • item : 해당 행에 출력되고 있는 행 아이템 객체 (Object)
    • dataField : 해당 칼럼이 출력하고 있는 행 아이템의 필드명(String)
    • term : 사용자가 검색하고자 했던 단어(String)
  • response : 요청이 성공하고 응답으로 받은 리스트를 삽입할 응답 함수입니다. 응답 함수는 반드시 자바스크립트 Array(또는 Array-Object) 형태로 파라메터를 삽입해야 합니다. 단, false 를 삽입하면 응답을 기다리지 않습니다.

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.