Slickgrid, 드롭 다운 선택 목록이있는 열?

Question

안녕하세요 slickgrid의 열을 선택 목록 드롭 다운으로 정의 할 수 있는지 누가 아는 지 궁금합니다. slickgrid에 대한 경험이있는 사람이라면이 옵션을 어떻게 추가해야하는지 알 수 있습니까?

고마워요.

Answer 1

사용자 셀 편집기라고 가정합니다. 다음은 slick.editors.js의 샘플 선택 기반 부울 셀 편집기입니다. 가능한 임의의 값으로 작업하도록 쉽게 수정할 수 있습니다.

function YesNoSelectCellEditor($container, columnDef, value, dataContext) { 
    var $select; 
    var defaultValue = value; 
    var scope = this; 

    this.init = function() { 
     $select = $("<SELECT tabIndex='0' class='editor-yesno'><OPTION value='yes'>Yes</OPTION><OPTION value='no'>No</OPTION></SELECT>"); 

     if (defaultValue) 
      $select.val('yes'); 
     else 
      $select.val('no'); 

     $select.appendTo($container); 

     $select.focus(); 
    }; 


    this.destroy = function() { 
     $select.remove(); 
    }; 


    this.focus = function() { 
     $select.focus(); 
    }; 

    this.setValue = function(value) { 
     $select.val(value); 
     defaultValue = value; 
    }; 

    this.getValue = function() { 
     return ($select.val() == 'yes'); 
    }; 

    this.isValueChanged = function() { 
     return ($select.val() != defaultValue); 
    }; 

    this.validate = function() { 
     return { 
      valid: true, 
      msg: null 
     }; 
    }; 

    this.init(); 
}; 

Answer 2

각 옵션 범위에 대해 새로운 선택 편집기를 만들지는 않을 것입니다. 또한 모든 옵션 값의 범위를 미리 알지 못할 수도 있습니다.

그런 경우 선택 유형 편집기에서 유연한 범위의 옵션이 필요합니다. 이를 위해이처럼 열 정의 (예를 들면라는 옵션)에 추가 옵션을 추가 할 수 있습니다

var columns = [ 
    {id:"color", name:"Color", field:"color", options: "Red,Green,Blue,Black,White", editor: SelectCellEditor}, 
    {id:"lock", name:"Lock", field:"lock", options: "Locked,Unlocked", editor: SelectCellEditor} 
] 

및 액세스를 그 같은 자신의 SelectEditor 개체의 초기화 방법에 args.column.options을 사용 :

SelectCellEditor : function(args) { 
     var $select; 
     var defaultValue; 
     var scope = this; 

     this.init = function() { 

      if(args.column.options){ 
       opt_values = args.column.options.split(','); 
      }else{ 
       opt_values ="yes,no".split(','); 
      } 
      option_str = "" 
      for(i in opt_values){ 
       v = opt_values[i]; 
       option_str += "<OPTION value='"+v+"'>"+v+"</OPTION>"; 
      } 
      $select = $("<SELECT tabIndex='0' class='editor-select'>"+ option_str +"</SELECT>"); 
      $select.appendTo(args.container); 
      $select.focus(); 
     }; 

     this.destroy = function() { 
      $select.remove(); 
     }; 

     this.focus = function() { 
      $select.focus(); 
     }; 

     this.loadValue = function(item) { 
      defaultValue = item[args.column.field]; 
      $select.val(defaultValue); 
     }; 

     this.serializeValue = function() { 
      if(args.column.options){ 
       return $select.val(); 
      }else{ 
       return ($select.val() == "yes"); 
      } 
     }; 

     this.applyValue = function(item,state) { 
      item[args.column.field] = state; 
     }; 

     this.isValueChanged = function() { 
      return ($select.val() != defaultValue); 
     }; 

     this.validate = function() { 
      return { 
       valid: true, 
       msg: null 
      }; 
     }; 

     this.init(); 
    } 

Answer 3

셀에 이미 여러 옵션이있는 "선택"태그가 포함되어있는 경우이 html을 args에서 추출 할 수 있습니다. 접근 방식은 이전 답변과 다르지만, 개인적으로 이러한 솔루션에 어려움을 겪었습니다. 물론 셀에 이미 선택 태그가 있습니다. this.init에서 완전히 재구성하는 대신이 셀을 재사용하고 싶습니다. 마찬가지로, 나는이 기본적으로 그냥하여 container에 재 - 추가 얻을 수있는, 이미 선택 기존의 대신의 $(args.item[ args.column.field ]) 내용 활성 세포를 반환 var column = { ...

에 구문 분석과 동일한 옵션을 계속 사용하고 싶습니다 (세포 개체). if (document.createEvent)에서 아래로, 활성화시 드롭 다운을 자동으로 여는 기능입니다. 당신이 셀로 이동 tabulator를 사용하면 등.

function SelectCellEditor(args) { 
    var $select; 
    var defaultValue; 
    var scope = this; 

    this.init = function() { 
     $select = $(args.item[ args.column.field ]); 
     $select.appendTo(args.container); 
     $select.focus(); 

     // Force the select to open upon user-activation 
     var element = $select[ 0 ]; 

     if (document.createEvent) { // all browsers 
      var e = new MouseEvent("mousedown", { 
       bubbles: true, 
       cancelable: true, 
       view: window 
      }); 

      element.dispatchEvent(e); 
     } else if (element.fireEvent) { // ie 
      element.fireEvent("onmousedown"); 
     } 

    }; 
} 

드롭 다운 HTML 입력에 대한 COMPLET 편집기 -> 드롭 다운 HTML 출력 내가 찾던 물건의 일종

function SelectCellEditor(args) { 
    var $select = $(args.item[ args.column.field ]); 
    var defaultValue; 
    var scope = this; 

    this.init = function() { 
     //$select 
     $select.appendTo(args.container); 

     // Force the select to open upon user-activation 
     var element = $select[ 0 ]; 

     if (document.createEvent) { // all browsers 
      var e = new MouseEvent("mousedown", { 
       bubbles: true, 
       cancelable: true, 
       view: window 
      }); 

      element.dispatchEvent(e); 
     } else if (element.fireEvent) { // ie 
      element.fireEvent("onmousedown"); 
     } 

     $select.on("click", function(e) { 
      var selected = $(e.target).val(); 

      $select.find("option").removeAttr("selected"); 
      $select.find("option[value='" + selected + "']").attr("selected", "selected"); 
     }); 

    }; 

    this.destroy = function() { 
     $select.remove(); 
    }; 

    this.focus = function() { }; 

    this.loadValue = function (item) { }; 

    this.serializeValue = function() { }; 

    // Only runs if isValueChanged returns true 
    this.applyValue = function (item, state) { 
     item[ args.column.field ] = $select[ 0 ].outerHTML; 
    }; 

    this.isValueChanged = function() { 
     return true; 
    }; 

    this.validate = function() { 
     return { 
      valid: true, 
      msg: null 
     }; 
    }; 

    this.init(); 
}