Slickgrid，列下拉選擇列表？

Question

嗨我想知道是否有人知道是否有可能將slickgrid中的列定義爲下拉選擇列表。如果沒有人有一些與slickgrid經驗的人知道我應該如何增加這個選項？

謝謝

Answer 1

我假設你的意思是一個自定義單元格編輯器。 下面是一個來自slick.editors.js的基於select-based布爾單元格編輯器的示例。您可以輕鬆修改它以使用任意一組可能的值。

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對象的這樣的init方法使用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

如果您的單元格已經包含帶有多個選項的「select」標籤，則可以從args中提取此html。這種方法與以前的答案不同，但我個人對這些解決方案感到困擾，當然我的單元格已經包含了一個select-tag。我想重複使用這個單元，而不是在this.init中完全重建它。同樣，我想使用相同的選項，因爲我現有選擇已經有了，而不是他們解析到var column = { ...

的$(args.item[ args.column.field ])返回活性細胞含量，基本上只得到重新附加到的container保持（細胞對象）。從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的輸入 - >下拉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(); 
}