Javascript Slickgrid，带有下拉选择列表的列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2623161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slickgrid, column with a drop down select list?
提问by Sam
Hi I was wondering if anyone knows if it's possible to define a column in slickgrid as being a drop down select list. If not does anyone with some experience with slickgrid know how I should go about adding this option?
嗨，我想知道是否有人知道是否可以将 slickgrid 中的列定义为下拉选择列表。如果没有，有一些 slickgrid 经验的人知道我应该如何添加这个选项吗？
Thanks
谢谢
采纳答案by Tin
I assume you mean a custom cell editor. Here's a sample select-based boolean cell editor from slick.editors.js. You could easily modify it to work with an arbitrary set of possible values.
我假设您的意思是自定义单元格编辑器。这是来自 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();
};
回答by Matthijs
You probably dont want to make a new select editor for each range of options. Also you may not know that range of all option value beforehand.
您可能不想为每个选项范围创建一个新的选择编辑器。此外，您可能事先不知道所有选项值的范围。
In that case you want a flexible range of options in a select type editor. In order to do this you can add an extra option to your column definitions (e.g. called options) like this:
在这种情况下，您需要在选择类型编辑器中提供灵活的选项范围。为此，您可以在列定义中添加一个额外的选项（例如称为选项），如下所示：
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}
]
and access that using args.column.optionsin the init method of your own SelectEditorobject like this:
并args.column.options在您自己的SelectEditor对象的 init 方法中使用它来访问它，如下所示：
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();
}
回答by Unicco
If your cell already contains a "select"-tag with multiple options, you can extract this html from the args. The approach differs from the previous answers, but I was personally troubled with these solutions, course my cell already contained a select-tag. I'd like to reuse this cell instead of reconstructing it completely in the this.init. Likewise, I'd like to keep using the same options, as my existing select already have, instead of parsing them to the var column = { ...
如果您的单元格已经包含一个带有多个选项的“选择”标签，您可以从 args 中提取此 html。该方法与之前的答案不同，但我个人对这些解决方案感到困扰，当然我的单元格已经包含一个选择标签。我想重用这个单元格，而不是在this.init. 同样，我想继续使用与我现有的选择相同的选项，而不是将它们解析为var column = { ...
The $( args.item[ args.column.field ] )return the active cells content, which basically just get re-appended to the the container(the cell-object). From if ( document.createEvent )and down, is just a functionality which automatically opens the dropdown on activation; etc. when you use tabulator to navigate to the cell.
该$( args.item[ args.column.field ] )返回活性细胞含量，这基本上只得到重新追加到所述container（小区对象）。从if ( document.createEvent )和向下，只是一个在激活时自动打开下拉菜单的功能；等当您使用制表符导航到单元格时。
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" );
}
};
}
Complet editor for Dropdown html-input -> Dropdown html-output
Dropdown html-input -> Dropdown html-output 的完整编辑器
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();
}
回答by Arturas Lapinskas
Without jq, and inline injected elements, packed in module:
没有 jq 和内联注入元素，打包在模块中：
'use strict';
class SelectCellWidget {
constructor(args) {
this._args = args;
this._$select = undefined;
this._defaultValue = undefined;
this._init();
}
_init () {
let selects, container, divend, opt_values;
const args = this._args;
if(args.column.options){
opt_values = args.column.options.split(',');
}else{
opt_values = ["yes","no"];
}
container = document.createElement("div");
container.classList.add('select-editable');
divend = document.createElement('input');
divend.setAttribute("type", "text");
divend.setAttribute("name", "format");
divend.setAttribute("value", "");
selects = document.createElement("select");//"<select id='Mobility' tabIndex='0' class='editor-select'>"+ option_str +"</select>";
selects.setAttribute("id", "Mobility");
selects.setAttribute("tabIndex", 0);
selects.setAttribute("class", "editor-select");
for(let i = 0; i < opt_values.length; i++) {
let v = opt_values[i];
let option = document.createElement("option");
option.setAttribute("value", v);
option.innerText = v;
selects.appendChild(option);
}
container.appendChild(divend);
container.appendChild(selects);
this._$select = container;
args.container[0].appendChild(this._$select);
this._$select.focus();
document.getElementById("Mobility").selectedIndex = args.item[args.column.field] ? opt_values.indexOf(args.item[args.column.field]) : 0;
}
destroy () {
this._$select.remove();
}
focus () {
this._$select.focus();
}
loadValue (item) {
this._defaultValue = item[this._args.column.field];
this._$select.value = this._defaultValue;
}
serializeValue () {
if(this._args.column.options){
return this._$select.lastElementChild.value;
}else{
return (this._$select.lastElementChild.value === "yes");
}
}
applyValue (item,state) {
item[this._args.column.field] = state;
}
isValueChanged () {
return (this._$select.lastElementChild.value !== this._defaultValue);
}
validate () {
return {
valid: true,
msg: null
};
}
}
module.exports=SelectCellWidget;
