Slickgrid, açılan listeyi içeren sütun?

Question

Merhaba, seçtiğim bir listeyi açmak için slickgrid'de bir sütun tanımlamanın mümkün olup olmadığını bilen var mı diye merak ediyordum. Eğer slickgrid ile ilgili deneyime sahip olan bir kimse, bu seçeneği eklemem için nasıl gitmem gerektiğini biliyor mu?

Teşekkürler

Answer 1

Özel bir hücre düzenleyicisi kastettiğinizi varsayalım. İşte slick.editors.js adresinden örnek bir seçim tabanlı boole hücre editörüdür. Olası bir dizi olası değerle çalışmak için kolayca değiştirebilirsiniz.

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

Muhtemelen seçeneklerin her aralığı için yeni bir seçme editör yapmak istemiyorum. Ayrıca, önceden tüm seçenek değerlerinin aralığını bilmiyor olabilirsiniz.

Bu durumda, belirli bir tür düzenleyicide esnek bir seçenek yelpazesi istiyorsunuz. Bunu yapmak için böyle sütun tanımları (örneğin denilen seçenekler) için fazladan bir seçenek ekleyebilirsiniz:

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} 
] 

ve erişime bu gibi kendi SelectEditor nesnenin init yönteminde args.column.options kullanarak:

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

Eğer hücreniz zaten birden fazla seçeneğe sahip bir "select" -tag içeriyorsa, bu html'yi hatalardan çıkarabilirsiniz. Yaklaşım önceki cevaplardan farklıdır, ancak bu çözümlerle kişisel olarak sıkıntı çektim, tabiki hücremde zaten bir seçim etiketi var. Bu hücreyi, this.init'da tamamen yeniden oluşturmak yerine yeniden kullanmak istiyorum. Aynı şekilde, ben benim temelde sadece container için yeniden eklenir olsun, hangi zaten seçme mevcut yerine $(args.item[ args.column.field ]) içeriği aktif hücreleri dönmek var column = { ...

onları ayrıştırma gibi aynı seçenekleri kullanmaya devam etmek istiyorum (hücre nesnesi). if (document.createEvent) ve aşağıdan, sadece aktivasyondaki açılır menüyü otomatik olarak açan bir işlevdir; vb. hücreye gitmek için tabülatör kullandığınızda.

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"); 
     } 

    }; 
} 

Açılan html-giriş için Komplet editörü -> Açılır html-çıktı aradığım gibi şeylerde

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(); 
}